Forem: rahul shukla

Docker react setup in local

rahul shukla — Mon, 07 Oct 2024 13:13:16 +0000

Introduction

Before we begin, there are a few prerequisites that you should have installed on your machine.

Docker
Node.js

Notes

If you don't already have Docker installed, you can download it from the Docker website.
If you don't have them installed, you can download them from the 'Node.js website'.

To verify that Docker is installed, open your terminal and run the below command:

docker --version

This will display the version of Docker installed on your machine.

If Docker is not installed, you will see an error message.

To verify that Node.js and npm are installed, open your terminal and run the below command:

node --version

This will display the version of Node.js installed on your machine. If Node.js is not installed, you will see an error message.

In this guide, we will walk you through the process of deploying a React web application with Docker in local. We'll start by creating a new React application using create-react-app and then we will create a Dockerfile for our application. We will then build a Docker image and run a Docker container to test our application.

Create a React Application

The first step is to create a new React application using create-react-app command. This command will set up a new React project with some default configuration files, dependencies, and a basic application structure.

npx create-react-app react-docker-setup
cd react-docker-setup

To run this react application execute the below command in your terminal:

npm run start

Create a Dockerfile

The next step is to create a Dockerfile for our React application. A Dockerfile is a text file that contains instructions for building a Docker image.

In your terminal, navigate to the root directory of your React application and create a new file named Dockerfile.

Open the Dockerfile in your code editor and add the following contents:

# Use an Node runtime as a parent image
FROM node:alpine

# Set the working directory to /app
WORKDIR /app

# Copy the package.json and package-lock.json to the working directory
COPY ./package*.json ./

# Install the dependencies
RUN npm install

# Copy the remaining application files to the working directory
COPY . .

# Build the application
RUN npm run build

# Expose port 3000 for the application
EXPOSE 3000

# Start the application
CMD [ "npm", "run", "start" ]

Building a Docker Image

Now that we have a Dockerfile for our React application, we can build a Docker image.

Create a new file named .dockerignore in the root directory of your React application and add the following line:

node_modules

In your terminal, navigate to the root directory of your React application and run the following command:

docker build -t react-application .

This command builds a Docker image with the tag react-application using the . to specify the build context as the current directory.

The build process may take a few minutes to complete, depending on the size of your application and the speed of your internet connection.

Once the build is complete, you can see image after type below command:

Docker image ls

Running the Docker Container

Now that we have a Docker image for our React application, we can run a Docker container.

In your terminal, run the below command to start a Docker container based on the image we just built:

docker run -d -p 3000:3000 react-application

This command starts a Docker container and maps port 3000 from the container to port 3000 on your local machine. The react-application parameter specifies the name of the Docker image that we want to run.

With the -d flag, the command returns the ID of the container once it's started.

You can also use the docker ps command to see a list of running containers, including the ID of the container running your React application.

Once the container is running, you should be able to view your React application by navigating to http://localhost:3000 in your web browser.

To stop the container, you can use the docker stop command followed by the container ID

docker stop <container_id>
docker stop c8872dfba1b0

What is Nullish Coalescing Operator

rahul shukla — Mon, 10 Jan 2022 18:26:53 +0000

We all have some questions about Nullish Coalescing Operator.

what is Nullish Coalescing Operator ?

-> Nullish Coalescing Operator is denoted using "??".
-> ES11 has added the nullish coalescing operator.

Let's understand with a simple expression

x ?? y   // This is expression

In the above expression,
-> If x is either null or undefined then the result will be y.
-> If x is not null or undefined then the result will be x
-> This will help make condition check code easy task

Why JavaScript Needed the Nullish Coalescing Operator

The or Operator ( || ). That work good. but sometimes we want to evaluate when the first operand is only either null or undefine.Now Come Nullish Coalescing Operator solved this problem.

There is some code you can try and understand this operator

let result = undefined ?? "Hello";
console.log(result); //  this print Hello

result = null ?? true; 
console.log(result); // this print true

result = false ?? true;
console.log(result); // this print false

result = 45 ?? true; 
console.log(result); //  this print 45

result = "" ?? true; 
console.log(result); // this print ""


result = [1, 2, 3] ?? true;
console.log(result); // this print  [1, 2, 3]

Notes :
if you don't know about operator and operand let see below code

   1 + 2

OPERATOR: Above code, The + is an operator. Operators are used to performing specific mathematical and logical computations on operands.
OPERAND : Above code 1 and 2 are operands

I hope you have found this tutorial useful and thank you for taking the time to follow along!

Let Understand Temporal Dead Zone

rahul shukla — Mon, 10 Jan 2022 04:53:53 +0000

Before understanding Temporal Dead Zone. We have to understand.
What is the difference between declaring and initialising?

What is Declaring?

Let's take a small code

function example() {
    let age; // 1 line
    age = 20; // 2 line
    let hands = 2; // 3 line
}

In the above example, we declare the age variable with the "let" keyword.in line 2, we assign value to age. It is called initialising. Before ES6 there is no other way to define a variable.ES6 came with let and const. let and Const are both blocks scoped.

Now What is Block Scoped?
let and const both access within the { } enclosed them. On another side, "var" has no restriction.

Let's take simple code

let boyAge= 18;
let isPartyToday = true;

if (isPartyToday) {
    let boyAge = 6; 
}

console.log(boyAge); // This print 18

Above code, I am initialising BoyAge two times. When we print boyAge then we have output is 18 because boyAge have 6 age that is wrapped with {} symbols. so we can not get output 6.

in case of var let take one sample code and see what will happen.
Let's take one simple code

var boyAge= 18; // line 1
var isPartyToday = true; // line 2

if (isPartyToday ) { // line 3
    var boyAge = 6;  // line 4
}  // line 5

console.log(boyAge); // This print 6

In the above code, we initial our boyAge two time .That Program will give us 6.because of at the last of line number 4 . We assign value is 6.

Notes:
if we accesss variable before declared then it will show undefined.But if you do with let and const.They throw a ReferenceError

Let see some code:

console.log(varNumber); // undefined
console.log(letNumber); // it throws a ReferenceError letNumber is not defined

var varNumber = 1;
let letNumber = 1;

In above code, We can see clear that letNumber variable showed referenceError.

Now move to main Topic that is Temporal Dead Zone

There are a few questions about Temporal Dead Zone

Let's check question

What is Temporal Dead Zone?

a. The let and const variables exist in the TDZ from the start of their enclosing scope until they are declared.
b. The only difference between const and let is that when they are hoisted, their values don't get defaulted to undefined.

{
    // Both the below variables will be hoisted to the top of their scope!
    console.log(typeof nothing); // Prints undefined
    console.log(typeof name); // Throws an error, cannot access 'name' before initialization

    let name = "rahul";
}

The above code is proof that let is clearly hoisted above where it was declared, as the engine alerts us to the fact. It knows name exists but we can't access it before it is initialized.

When variables get hoisted, var gets undefined initialized to its value by default in the process of hoisting. let and const also get hoisted, but they don't get set to undefined when they get hoisted.

And that is reason we have the TDZ. Which is why it happens with let and const but not var.

Why is Temporal Dead Zone?

It helps us catch errors.To try and access a variable before it is declared is the wrong way.

Aware about one fraud ( new freelancer )

rahul shukla — Thu, 16 Jan 2020 07:03:56 +0000

Hello, I told you one thing that happened with me. One day, I bid on one project that provided by "clara002".

She told me

"I have checked ur profile. Its very good and impressive. I think if i would award u this project u will do it very honestly & sincerely".

I told him

"okay i would provide good work".

She told me

"hey thanks for showing interest as you know well its very hard to find job with new freelancer account. In this deal you got review plus profit
review helps your profile to boost up your freelancer carrier. I need some positive review with 5 star from you to my profile and gives you same. I am seller of reviewed account. I have to show big projects and financial transactions to buyer for good prize. we start with small amount for trust and go for big.the details of deal mentioned below

please read carefully before start"

I told her

"Okay please provide details about work".

She told me

"
first deal 5000 INR
you got 4500 INR after fees
payback amount 2250 INR

payback mode paytm and google pay or upi

you have to payback after release in your freelancer wallet

(after that successful deal we go for bigger as much as you are ready)

the amount goes bigger for 2nd deal once we complete this first deal.

thanks

make sure when i release fund in your freelancer account after that you have to pay back half by paytm
after that we move for 5 star review "

I told him again

" Please provide details of project"

She told me

"
i dont need any work from your side

just provide positive review with 5 star

half is yours in every deal

and send half money back what you got finally
"

Note: If Someone gives you these type of project then don't take these project.
because they will only fraud with you. you will not get any type of money.

Please aware these type of fraud and help to share this more. That who is new freelancer. " BE the person not a victim of fraud "

Oops Concepts

rahul shukla — Sun, 08 Dec 2019 05:22:04 +0000

I will explain oops concepts with an example. I will try to explain a simple way. if you have any doubt about any topic regarding oops than I will provide new more example.

Class
Object
Inheritance
Polymorphism
Abstraction
Encapsulation
Association
Aggregation
Composition

Class

A class is a plan
or
A class is a blueprint
or
A class is a template
or
It is only a logical component and not the physical entity.

For example, I want to create 1000 chairs. So if I create a chair with exact parameter width and height. that will take a lot of times. For creating 1000 chairs. if I developed one blueprint or plan or template then it is easy for me to create lots of chairs. using that plain, I can Create 1000 chairs under less time.

or
For example, I want to create 1000 briquettes. if I create every briquette with the same size then it takes a lot of time. if I create a dye or class or plan or blueprint for creating a briquette.that is more helpful for me.

A class works like a dye. We can create a lot of thing with one logic.

Object

An object is remote of a class. using an object, We can access or operate our class like tv or remote. A tv is a class and remote is an object. that access tv.
or
An object can be defined as an instance of a class, and there can be multiple instances of a class in a program. An object contains both the data and the function, which operates on the data. For example - chair, bike, marker, pen, table, car, etc.

Inheritance

Inheritance is an OOPS feature. In inheritance, let take 2 class school and student. I create a school class. in school class, there are some variable school_name, school_Code, school_address. In student, there are some variable student_id, student_name, student_father_name. In a simple case, if I want to add school variable school_name, school_code. in student class then I have to create two variable another.that is not good for us. We should be developed reusable code. in that case, we inherit a class to another class. which class is inherited that is called "child class".that class is inherited. that is called "Parent class".

Polymorphism

The word polymorphism means having many forms.
or
Polymorphism is one of the OOPS features. that allows us to perform a single action in different ways. For example, let say we have a class Animal that has a method sound(). Since this is a generic class so we can’t give it an implementation like Roar, Meow, Oink etc. We had to give a generic message.
Polymorphism can be achieved in two of the following ways:

Method Overloading(Compile time Polymorphism)
Method Overriding(Run time Polymorphism)

Abstraction

Abstraction means to show only the necessary field and hide details.

Consider a real-life example of a man driving a car. The man only knows that pressing the accelerators will increase the speed of the car or applying brakes will stop the car but he does not know about how on pressing accelerator the speed is increasing, he does not know about the inner mechanism of the car or the implementation of an accelerator, brakes etc in the car. This is what abstraction is.

Advantages of Data Abstraction:

Helps the user to avoid writing the low-level code
Avoids code duplication and increases reusability.
Can change the internal implementation of class independently without affecting the user.
Helps to increase the security of an application or program as only important details are provided to the user.

Encapsulation

Encapsulation is defined as wrapping up of data and information under a single unit.

Consider a real-life example of encapsulation, in a company, there are different sections like the accounts section, finance section, sales section etc. The finance section handles all the financial transactions and keeps records of all the data related to finance. Similarly, the sales section handles all the sales-related activities and keeps records of all the sales. Now there may arise a situation when for some reason an official from the finance section needs all the data about sales in a particular month. In this case, he is not allowed to directly access the data of the sales section. He will first have to contact some other officer in the sales section and then request him to give the particular data. This is what encapsulation is. Here the data of the sales section and the employees that can manipulate them are wrapped under a single name “sales section”.

Association

Association is a connection or relation between two separate classes that are set up through their objects. Association relationship indicates how objects know each other and how they are using each other’s functionality. It can be one-to-one, one-to-many, many-to-one and many-to-many.

For example, a person can have only one passport. That is a “one-to-one” relationship.

If we talk about the association between a Bank and Employee, a bank can have many employees, So it is a “one-to-many” relationship.

Similarly, every city exists in exactly one state, but a state can have many cities, which is a “many-to-one” relationship.
Lastly, if we talk about the association between a teacher and a student, multiple students can be associated with a single teacher and a single student can also be associated with multiple teachers but both can be created or deleted independently. This is a “many-to-many” relationship.

As an example, imagine the relationship between a doctor and a patient. A doctor can be associated with multiple patients. At the same time, one patient can visit multiple doctors for treatment or consultation. Each of these objects has its life cycle and there is no “owner” or parent. The objects that are part of the association relationship can be created and destroyed independently.

Let’s take an example of a teacher and student. Multiple students can associate with a single teacher, and a single student can associate with multiple teachers, but both have their own lifecycles (both can be create and delete independently); so when a teacher leaves the school, we don’t need to delete any students, and when a student leaves the school, we don’t need to delete any teachers.

Aggregation

An aggregation is a special form of association. It is a relationship between two classes like association, however its a directional association, which means it is strictly a one-way association. Aggregation is "the" relationship among objects.

Let’s take an example of a cell phone and a cell phone battery. A single battery can belong to a phone, but if the phone stops working, and we delete it from our database, the phone battery will not be deleted because it may still be functional. So in aggregation, while there is ownership, objects have their own lifecycle.

Composition

Composition is about expressing relationships between objects. Think about the chair example. A chair has a Seat. A chair has a back. And a chair has a set of legs. The phrase "has a" implies a relationship where the chair owns, or at minimum, uses, another object. It is this "has a" relationship which is the basis for composition.

if I forgot any point please comment. I will improve my post.

Django ORM

rahul shukla — Sun, 01 Dec 2019 06:28:30 +0000

What is Django ORM?

Django ORM provides an elegant and powerful way to interact with the database. ORM stands for Object Relational Mapper. You have not to write SQL query for the database operations. ORM, as from the name, maps objects attributes to respective table fields. It can also retrieve data in that manner.

The Problem solved by ORM - >

ORMs provide is rapid development.
ORMs makes the project more portable.
It is easier to change the database if we use ORMs
Knowing SQL is also not enough since SQL implementations slightly differ from one another in different databases. this became a difficult and time-consuming task. So, to resolve this, The concept of ORM was introduced in web frameworks.
ORMs automatically create a database schema from defined classes/models.
The ORMs use connectors to connect the database with a web application. you have to install the connector of a specific database you want to work with.

Is it necessary to use ORM?

This is totally a developer's choice. Although there are certain benefits of ORM, there are some downsides too. IT is beneficial for developer as it allows faster development. Sometimes ORMs generate more complex queries then they should. This can result in a performance decrease For example – Django ORM is efficient for working with low-medium complexity models.

Django ORM vs SQLAlchemy?

In most cases, people prefer SQLAlchemy over Django ORM. The reason being SQLAlchemy is more adept to work with high-complexity data structures. Django ORM is powerful in its own way. The ORM provides features integrated with Django which are more important than just performance improvement.

Amazon EC2 Setup with Ubuntu and XAMPP Installation

rahul shukla — Sat, 16 Nov 2019 07:19:12 +0000

Step 1
First of all, login our Aws account. Aws log in ( link )

Step 2
After Amazon console login you find the following screen, select EC2 from Compute category.

Step 3
Click Launch Instance button.

Step 4

Now choose operating system for web server. I suggest use Ubuntu for more package advantage. Make sure, that should be listed in free tier.

Step 5

After select button. you will click for review and instance

Step 6

After clicking Review and Launch You find the below screen, now click Launch button.

Step 7

In this step. you see this screen. Select “create a new key pair”

a. Set key pair name. What ever you want
b. Give valid name and click to Download Key Pair. You will get an .pem file.

Step 8

Now Instance has been created successfully.

Step 9

Firewall Security Settings

 You will find the instance status here.

Step 10

Select the instance box and scroll down the page, you will find inbound rules for firewall security

Step 11

Add HTTP rule for web server access.

Elastic IP - Create Static IP Address

Basically, Amazon instance will provide you a dynamic public DNS name, this is not stable. So you need a static IP.

Step 12

Go to Network & Security category and select Elastic IPs, click Allocate New Address

Step 13

Amazon will provide you a random IP address.

Step 14

Now associate IP address with instance box.

Step 15

Choose instance box here.

Step 16

Click Associate address.

Step 17

Associated IP address with instance.

Linux & MAC connection

Executing following command with Linux or MAC terminal, you can directly access your box.

ssh -i keyname.pem ubuntu@IP_ADDRESS

Sometimes you will get following error.

Permissions 0640 for 'keyname.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "keyname.pem": bad permissions
Permission denied (publickey).

Give only READ permission for .pem file, then execute SSH command again.

sudo chmod 400 keyname.pem

Windows connection

Run following command

ubuntu@ip-172-31-19-204:~$ sudo su
root@ip-172-31-19-204:/home/ubuntu#

This will update Ubuntu OS Packages

sudo apt-get update

XAMPP Installation Commands for Ubuntu

Download XAMPP for 64 bit

wget https://www.apachefriends.org/xampp-files/7.0.23/xampp-linux-x64-7.0.23-0-installer.run

Make Execute Installation

sudo chmod +x xampp-linux-x64-7.0.23-0-installer.run

Run Installation

sudo ./xampp-linux-x64-7.0.23-0-installer.run

XAMPP instructions

Select the components you want to install; clear the components you do not want to install. Click Next when you are ready to continue.
XAMPP Core Files : Y (Cannot be edited)
XAMPP Developer Files [Y/n] : Y
Is the selection above correct? [Y/n]: Y


Installation Directory
XAMPP will be installed to /opt/lampp
Press [Enter] to continue:
Do you want to continue? [Y/n]:Y

Run XAMPP

sudo /opt/lampp/lampp start

XAMPP Access Forbidden
Open your browser and access http://IP-ADDRESS/ you will find this Access forbidden screen.

XAMPP Configurations

Edit XAMPP configurations.

vi /opt/lampp/etc/extra/httpd-xampp.conf

In this image there are default value is local you have to set “ all granted ”

Restart XAMPP

sudo /opt/lampp/lampp restart

Security Settings

sudo /opt/lampp/xampp security

XAMPP: Your XAMPP pages are NOT secured by a password.
XAMPP: Do you want to set a password? [yes]
XAMPP: Your XAMPP pages are NOT secured by a password.
XAMPP: Do you want to set a password? [yes] no
XAMPP: MySQL is accessable via network.
XAMPP: Normaly that's not recommended. Do you want me to turn it off? [yes] yes
XAMPP: Turned off.
XAMPP: Stopping MySQL...ok.
XAMPP: Starting MySQL...ok.
XAMPP: The MySQL/phpMyAdmin user pma has no password set!!!
XAMPP: Do you want to set a password? [yes] yes
XAMPP: Password:*******
XAMPP: Password (again):*******
XAMPP: Setting new MySQL pma password.
XAMPP: Setting phpMyAdmin's pma password to the new one.
XAMPP: MySQL has no root passwort set!!!
XAMPP: Do you want to set a password? [yes] yes
XAMPP: Write the password somewhere down to make sure you won't forget it!!!
XAMPP: Password:*******
XAMPP: Password (again):*******
XAMPP: Setting new MySQL root password.
XAMPP: Change phpMyAdmin's authentication method.
XAMPP: The FTP password for user 'daemon' is still set to 'xampp'.
XAMPP: Do you want to change the password? [yes] no
XAMPP: Done.

PhpMyAdmin

Access PhyMyAdmin at http://IP-Address/phpmyadmin/

Domain Settings
If you own a domain address, go to domain DNS(Domain name settings). Add host value @ points to IP-Address

                                Thanks for Reading