Ajeet Raina Docker Captain, ARM Innovator & Docker Bangalore Community Leader.

Creating Your First React app using Docker Desktop

1 min read


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


  • Install Docker Desktop for Mac 

Visit https://www.docker.com/get-started/ to download Docker Desktop for Mac and install it in your system.

getting started with docker

Once the installation gets completed, click “About Docker Desktop” to verify the version of Docker running on your system.

about docker desktop pull down menu

If you follow the above steps, you will always find the latest version of Docker desktop installed on your system.

Docker Desktop Version 4.7 welcome

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.

react app

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.


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


Please follow and like us:

Have Queries? Join https://launchpass.com/collabnix

Ajeet Raina Docker Captain, ARM Innovator & Docker Bangalore Community Leader.

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright Collabnix Inc

Built for Collabnix Community, by Community