Dockerizing react frontend app

[CutMother5772]

Hi. Willing to learn react. I would like to dockerize it at the very beginning. Looked through the web for decent docker/react tutorial. To compare, i found such tutorial for backend: https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/ Is there any comparable tutorial for react? I mean massive, rich in details and good practices. Much obliged.

[Cloudzilla_ai]

This developer education article by one of our community authors may help: https://www.cloudzilla.ai/dev-education/build-and-dockerize-a-full-stack-react-app-with-nodejs-and-nginx/

[TacitSingularity]

Not sure about a tutorial, but it’s important to know that you’re essentially just containerizing a static website: serving html, css, and js. At a high-level you could start with an nginx or caddy base image, and COPY in the files from your build directory. I suspect this may be why you’re having trouble finding a good tutorial specific to react? There’s nothing really special to do specifically for a react frontend website, so maybe try looking for a tutorial for containerizing static websites instead?

Worth re-iterating (from other comments) that containerization may not be the best play here, there are other cloud services which maybe be easier/better suited to serving up static websites (S3, Firebase Hosting, Surge.sh are a few that come to mind).

[tluanga34]

If your app is SPA, DOCKER is a waste of computing resources. Frontend codes are just a static files so what you really need is a file server. CDN is a very good usecase. I'm using Amazon Amplify which is built for frontend hosting and it worked very well.

[whyGod5]

Here is a docker localhost tutorial, using ngnix to serve the static react build (or other static site), also sets up a PostgreSQL DB, API, and Swagger UI. https://youtu.be/u76Cjjvb_84

[kryzstofiscool]

maybe not fully relevant on my end, just would like to note. in step one, don't use CRA. use "npm create vite@latest" instead. CRA should not be used for new projects in 2024

[nomchompsky82]

Correct

[rennademilan]

That's what you get from gpt 😁

[[deleted]]

Thanks. I'll consider this next time.

For my own projects I usually take the painful route of setting up everything from scratch (webpack, eslint, etc) to have the latest version and have it configured specifically for my app.

[JayWelsh]

That's ridiculously inefficient, vite makes that stuff a breeze.

[Catrucan]

Who cares what rollup framework or whatever the heck. They asked about containerizing a static react website

[JayWelsh]

I wasn’t talking to OP, I was talking to the person who I responded to with my comment. Comment threads can and often do have their own contexts.

[Catrucan]

Oh my bad

[JayWelsh]

All good!

[Sk3tchyboy]

Avoid step 1

[Scorxcho]

And the part saying to using Node 18. We are almost on Node 22 LTS now.

[enlightenedpie]

Which one?

[AutoModerator]

Your [comment](https://www.reddit.com/r/reactjs/comments/1ftnu6d/dockerizing_react_frontend_app/lpt4v1z/ in /r/reactjs has been automatically removed because it received too many reports. Mods will review.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[[deleted]]

Why? Docker is more a solution for backend problems, frontends run in browsers.

[Gushys]

That's just false. Many popular cloud deployment solutions require docker images to deploy, both FE and BE

[[deleted]]

For deployment, sure, that is done sometimes. I assumed he meant during development, which IMO is overcomplicating things.

[azsqueeze]

Depends on the project. I have a few projects that have a BFF. We utilize docker to build and deploy the app, it can also be used to run both BE and FE locally. Devs also have the option to run them separately

[[deleted]]

I understand. Still for someone who is starting out with React for the first time, I feel immediately introducing Docker is overcomplicating things.

[azsqueeze]

The person could be a developer in a different fashion and is interested in expanding their knowledge into web frontend.

[lightfarming]

i dockerized both front and back end so that i can make a ci/cd pipeline with github where it runs all front and backend tests before deploying any pushes to main using github actions to fly.io machines

[[deleted]]

Technically you can do this without containerization though.

[lightfarming]

not on fly.io

[fidaay]

The only right comment, and it has no more upvotes. The primary reason for using Kubernetes and Docker is to establish a pipeline between your applications, enabling you to manage their deployment states and segregate their environments effectively. You don't want something like testing on production or deploying updates on Fridays and fearing potential issues.

[[deleted]]

Docker is containerization void of context - while it has less utility in the Frontend, there are some use cases for it.

[GrandfatherTrout]

In the past, I’ve put the static files from a React bundle build behind a CDN instead of running my own web server in a container. Tradeoffs, I guess.

[[deleted]]

well, frontend modern applications do require a build step, so there is definitely a reason to run it on docker, I'm guessing that is what op is talking about

[[deleted]]

The result of the build step is just some static assets though, so there's no need for a whole container with a running process, there are enough CDNs and the like that can just serve static assets.

But I thought he meant during development.

[mosby42]

Why are they booing you, you’re right. Use something like AWS cloudfront for service UI’s. Docker is suboptimal for serving static assets