React is a JavaScript library for building user interfaces. It makes it painless to create interactive UIs. You can design simple views for each state in your application, and React efficiently update and render just the right components when your data changes.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React can also render on the server using Node and power mobile apps using React Native. React allows you to interface with other libraries and frameworks
Get Started
Pre-requisite:
- Ensure that you have NPM installed on your Mac system
- Install Docker Desktop for Mac
Visit https://www.docker.com/get-started/ to download Docker Desktop for Mac and install it in your system.
Once the installation gets completed, click “About Docker Desktop” to verify the version of Docker running on your system.
If you follow the above steps, you will always find the latest version of Docker desktop installed on your system.
1. Without Docker Desktop
Run the below command:
npx create-react-app whalified
Creating a new React app in /Users/ajeetraina/projects/whalified.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
...
removed 1 package and audited 1419 packages in 5.867s
169 packages are looking for funding
run `npm fund` for details
found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Created git commit.
Success! Created whalified at /Users/ajeetraina/projects/whalified
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd whalified
npm start
Happy hacking!
Starting the React app
cd whalified
yarn start
It will open up the first react app over the browser at port 3000, if not occupied.
2. With Docker
Step 1. Create a Dockerfile
FROM node:15.4 as build
WORKDIR /react-app
COPY package*.json .
RUN yarn install
COPY . .
RUN yarn run build
FROM nginx:1.19
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /react-app/build /usr/share/nginx/html
Step 2. Create a dockerignore
Now, let’s configure the .dockerignorefile . Copy and paste the below snippet.
**/node_modules
Step 3. Create nginx.conf file
Create a folder nginx/ and then add the below content in nginx.conf file:
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
try_files $uri $uri/ /index.html;
}
}
}
Step 5. Build the Docker Image
docker build -t ajeetraina/firstreact-app .
Step 6. Run the app
docker run -d -p 80:80 ajeetraina/firstreact-app
Access the app
Comments are closed.