Creating Your First React app using Docker Desktop

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

Without Docker

Run the below command:

npx create-react-app whalified

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.

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

The post was originally published in Collabnix.