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.

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

  1. Hi, i think that i saw you visited my website so i came to “return the favor”.I am attempting to find things to enhance my web site!I suppose its ok to use a few of your ideas!!

  2. After I initially commented I clicked the -Notify me when new comments are added- checkbox and now each time a remark is added I get four emails with the identical comment. Is there any manner you’ll be able to take away me from that service? Thanks!

  3. You actually make it seem so easy along with your presentation however I in finding this matter to be actually one thing which I think I’d never understand. It seems too complicated and very wide for me. I am taking a look ahead to your subsequent put up, I will attempt to get the cling of it!

  4. dimalam yang sesunyi ini aku sendiri tiada yang menemani, akhirnya kini kusadari dia telah pergi tinggalkan diriku. Akan semua akan terulang kisah cintaku yang seperti dulu. Bocoran RTP Live

  5. Its like you read my mind! You seem to know a lot approximately this, like you wrote the e book in it or something. I feel that you just can do with some percent to force the message house a bit, however other than that, this is wonderful blog. A fantastic read. I’ll definitely be back.

  6. I’m curious to find out what blog system you’re using? I’m experiencing some minor security problems with my latest blog and I’d like to find something more risk-free. Do you have any solutions?

  7. Awsome info and straight to the point. I am not sure if this is actually the best place to ask but do you people have any thoughts on where to get some professional writers? Thank you 🙂

  8. What i don’t understood is in truth how you are no longer actually much more neatly-favored than you might be now. You’re so intelligent. You already know therefore significantly with regards to this subject, made me individually imagine it from numerous varied angles. Its like women and men are not fascinated unless it’s one thing to accomplish with Girl gaga! Your personal stuffs nice. All the time maintain it up!

  9. When I initially commented I clicked the -Notify me when new feedback are added- checkbox and now each time a comment is added I get four emails with the identical comment. Is there any way you may remove me from that service? Thanks!

  10. I simply could not depart your website before suggesting that I extremely enjoyed the usual information a person provide on your guests? Is gonna be again frequently in order to investigate cross-check new posts.

  11. Very efficiently written article. It will be beneficial to everyone who employess it, as well as myself. Keep up the good work – i will definitely read more posts.

  12. I know this if off topic but I’m looking into starting my own weblog 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 savvy so I’m not 100 positive. Any recommendations or advice would be greatly appreciated. Thanks

  13. I have been exploring for a little bit for any high-quality articles or blog posts on this sort of area . Exploring in Yahoo I at last stumbled upon this site. Reading this information So i’m happy to convey that I have a very good uncanny feeling I discovered exactly what I needed. I most certainly will make sure to do not forget this site and give it a look regularly.

  14. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove people from that service? Thanks a lot!

  15. My programmer is trying to convince me to move to .net from PHP. I have always disliked the idea because of the expenses. But he’s tryiong none the less. I’ve been using WordPress on various websites for about a year and am worried about switching to another platform. I have heard excellent things about blogengine.net. Is there a way I can import all my wordpress content into it? Any kind of help would be really appreciated!

  16. This web site is really a walk-through for all of the info you wanted about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.

  17. What i do not understood is actually how you’re not really much more well-preferred than you may be right now. You’re so intelligent. You already know therefore considerably relating to this topic, made me in my opinion consider it from numerous varied angles. Its like men and women aren’t interested until it?¦s one thing to do with Lady gaga! Your personal stuffs nice. At all times care for it up!

  18. Just want to say your article is as surprising. The clearness on your post is simply great and i can suppose you are a professional in this subject. Well along with your permission let me to grasp your feed to stay updated with coming near near post. Thank you a million and please carry on the gratifying work.

  19. Great post. I was checking continuously this blog and I am impressed! Extremely helpful info specifically the last part 🙂 I care for such information much. I was looking for this particular information for a very long time. Thank you and best of luck.

  20. Whats up very cool web site!! Man .. Excellent .. Wonderful .. I will bookmark your web site and take the feeds alsoKI’m glad to find numerous helpful info here in the put up, we want develop extra techniques in this regard, thank you for sharing. . . . . .

  21. I’m impressed, I must say. Really rarely do I encounter a weblog that’s both educative and entertaining, and let me tell you, you have got hit the nail on the head. Your idea is excellent; the issue is one thing that not enough persons are talking intelligently about. I am very joyful that I stumbled throughout this in my seek for one thing referring to this.

  22. I will immediately take hold of your rss as I can’t find your e-mail subscription link or newsletter service. Do you have any? Kindly allow me recognise in order that I may just subscribe. Thanks.

  23. Some really fantastic information, Gladiolus I observed this. “It’s not only the most difficult thing to know one’s self, but the most inconvenient.” by Josh Billings.

  24. It is appropriate time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I want to suggest you some interesting things or tips. Maybe you could write next articles referring to this article. I want to read more things about it!

  25. Hi there! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My website looks weird when viewing from my apple iphone. I’m trying to find a theme or plugin that might be able to fix this issue. If you have any suggestions, please share. With thanks!

  26. Hey! This post could not be written any better! Reading this post reminds me of my good old room mate! He always kept chatting about this. I will forward this post to him. Pretty sure he will have a good read. Many thanks for sharing!

  27. Youre so cool! I dont suppose Ive learn anything like this before. So good to search out someone with some original ideas on this subject. realy thanks for beginning this up. this web site is one thing that is wanted on the net, somebody with just a little originality. useful job for bringing something new to the web!

  28. Bakire bozma pornoları izle türkçe konuşmalı By admin 3
    gün önce Brazzers porno 7 İzlenme Paylaş Tweet on Twitter Share on Facebook Google+ Pinterest Bedava bakire kiza tecavuz vityo siteleri türkiş şhemela
    trnny porno video bakire bozma pornoları izle türkçe konuşmalı turkish amator porno about erotik kizların erkeklerle.

  29. magnificent submit, very informative. I ponder why the other specialists of this sector don’t notice this. You should proceed your writing. I’m confident, you’ve a great readers’ base already!

  30. Thanks for your strategies. One thing we’ve noticed is that banks plus financial institutions really know the spending behavior of consumers and also understand that the majority of people max out and about their cards around the breaks. They wisely take advantage of this real fact and start flooding your inbox as well as snail-mail box having hundreds of 0 APR credit cards offers soon after the holiday season concludes. Knowing that if you’re like 98 of the American community, you’ll soar at the possible opportunity to consolidate card debt and switch balances to 0 APR credit cards.

  31. I would like to thnkx for the efforts you have put in writing this blog. I am hoping the same high-grade blog post from you in the upcoming as well. In fact your creative writing abilities has inspired me to get my own blog now. Really the blogging is spreading its wings quickly. Your write up is a good example of it.

  32. Hey there! 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. Anyhow, I’m definitely delighted I found it and I’ll be bookmarking and checking back frequently!

Leave a Reply to Anonymous Cancel reply

Your email address will not be published.

© Copyright Collabnix Inc

Built for Collabnix Community, by Community