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

Pre-requisite:

  • 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.

**/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

 

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

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

35 Replies to “Creating Your First React app using Docker Desktop”

  1. Thanks , I’ve just been searching for info about this subject for ages and yours is the greatest I have discovered so far. But, what about the bottom line? Are you sure about the source?

  2. I would like to thank you for the efforts you have put in writing this website. I am hoping the same high-grade blog post from you in the upcoming as well. In fact your creative writing abilities has encouraged me to get my own web site now. Actually the blogging is spreading its wings quickly. Your write up is a great example of it.

  3. I know this if off topic but I’m looking into starting my own blog and was wondering what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100 sure. Any recommendations or advice would be greatly appreciated. Cheers

  4. I’ve been surfing online more than 3 hours today, but I never discovered any fascinating article like yours. It is pretty price sufficient for me. In my opinion, if all web owners and bloggers made excellent content as you did, the net will be a lot more helpful than ever before.

  5. You can definitely see your skills in the paintings you write. The world hopes for even more passionate writers like you who aren’t afraid to mention how they believe. At all times follow your heart.

  6. Hello there, simply turned into alert to your weblog via Google, and found that it is really informative. I am gonna watch out for brussels. I’ll appreciate when you continue this in future. Numerous other people can be benefited from your writing. Cheers!

  7. Simply desire to say your article is as astounding. The clearness in your post is just spectacular and i could assume you’re an expert on this subject. Fine with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please continue the enjoyable work.

  8. Hello, i think that i saw you visited my website thus i came to “return the favor”.I am trying to find things to improve my website!I suppose its ok to use some of your ideas!!

  9. Hello! I could have sworn I’ve been to this website before but after checking through some of the post I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and I’ll be bookmarking and checking back frequently!

  10. I’ve been surfing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  11. You could definitely see your expertise within the paintings you write. The arena hopes for more passionate writers like you who are not afraid to say how they believe. At all times go after your heart.

  12. Terrific work! That is the type of info that should be shared around the internet. Disgrace on Google for no longer positioning this submit upper! Come on over and seek advice from my site . Thanks =)

  13. Great web site. Plenty of helpful information here. I am sending it to a few buddies ans additionally sharing in delicious. And of course, thanks for your sweat!

  14. Pretty great post. I just stumbled upon your blog and wished to say that I have really loved browsing your blog posts. In any case I will be subscribing to your feed and I hope you write once more soon!

  15. Can I just say what a relief to find somebody who really is aware of what theyre speaking about on the internet. You definitely know methods to carry an issue to light and make it important. More folks have to read this and perceive this aspect of the story. I cant consider youre no more in style because you definitely have the gift.

  16. Its superb as your other articles : D, regards for posting. “The rewards for those who persevere far exceed the pain that must precede the victory.” by Ted W. Engstrom.

  17. I’m not sure where you’re getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for fantastic information I was looking for this information for my mission.

Leave a Reply

Your email address will not be published.