DEV Community

Cover image for Dockerize your React app

Dockerize your React app

Karan Pratap Singh on July 08, 2021

Hey, welcome back. This article is part of the Dockerize series, make sure to checkout the Introduction where I go over some concepts we are going ...
Collapse
 
salhernandez profile image
Salvador Hernandez

This is great! I like putting react apps in containers!

I created a docker compose files that runs create-react-app based apps loacally on Docker!

dev.to/salhernandez/containerize-b...

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

that's amazing, thanks for sharing!

Collapse
 
spyshow profile image
jihad khorfan • Edited

when i am running the dev image it's building it correctly but when i run the production one i got this error :

  [builder 7/7] RUN yarn build:
15 1.300 Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation)
15 1.300
15 1.300 $ yarn run [--inspect] [--inspect-brk] <scriptName> ...
executor failed running [/bin/sh -c yarn build]: exit code: 1
ERROR: Service 'app' failed to build : Build failed
Enter fullscreen mode Exit fullscreen mode

i checked the code and it's exactly the same as yours!

Collapse
 
mikebernal profile image
Mike Bernal SP0701 • Edited

The Compose file is invalid because:
Service app has neither an image nor a build context specified. At least one must be provided.

I have similar code as the tutorial tho I am using ubuntu

Collapse
 
dthuan123 profile image
dthuan123

The Compose file is invalid because:
Service app has neither an image nor a build context specified. At least one must be provided.

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Hey, thank you for reporting this. I've updated the article to include context...are you on the latest docker-compose version?

Collapse
 
dthuan123 profile image
dthuan123
Comment
Enter fullscreen mode Exit fullscreen mode
Collapse
 
xreyc profile image
Reyco Seguma

Add to docker-compose.dev.yml for live reload
environment:
- WATCHPACK_POLLING=true

updated:

version: "3.8"

services:
app:
container_name: app-dev
image: app-dev
build:
target: development
volumes:
- ./src:/app/src
ports:
- 3000:3000
environment:
- WATCHPACK_POLLING=true

Collapse
 
ddexster profile image
DDexster

Great article, but unfortunately not a word about using process.env variables neither here nor in "dockerizing node app" article

Collapse
 
vitomanu96 profile image
vitomanu96 • Edited

In CRA all the file under /static folder can be cached without problem (they include hash in their filename). So se paragraph "Optimizing static assets" can be improved.
Just the file under the "public" folder cannot be cached by the browser.

However nginx has a optimal built-in cache strategy.

Collapse
 
moonraker727 profile image
Alex • Edited

Hi, I'm only trying to reproduce the steps for production. I'm getting:
yarn run v1.22.17
error Command "build" not found.

Collapse
 
lindsaykwardell profile image
Lindsay Wardell

Thanks! This just saved me on M1 (ran into an issue with Node dependencies not installing properly).

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

I’m glad it helped!

Collapse
 
claysam75 profile image
claysam75

After you have updated the Dockerfile for production, you have another two stages - one which actually builds the react app, and the last stage which grabs those built static files from the build step and serves them via NGINX.

Firstly, is the lower case 'as' in the nginx build step a typo or does that do something different to 'AS'.

Secondly, in the docker-compose.prod.yml file, you set the build target as 'production' - ie the last nginx stage in the docker file. How can that run successfully if the build stage it relies on has not been run yet? Is that build stage called when the nginx stage runs?

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Hey, nice catch! yes it's a typo and should be 'AS', in dockerfile lowercase syntax also works exactly the same but it's not prefered..i'll update it to upper case..thank you

For the second question, docker automatically understands that "builder" is used inside the prod stage so it runs the builder first..so the seq of events are like this:

  1. looks in at the target, creates a dependency graph (what requires what)
  2. identifies that prod is relied on builder
  3. runs the builder first
  4. continues with the prod
Collapse
 
damiensn profile image
Damien S

Hi, thank you very much for this article.
There's a lot of articles about that, but not for the build.

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Glad it was helpful!

Collapse
 
josemunoz profile image
José Muñoz

This is neat but you could achieve equal or better results by just serving the static files from a CDN/storage service like S3

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Yes definitely! That is usually my goto solution but many orgs usually run on k8s or equivalent nowadays

Collapse
 
constantinehuzenko profile image
Constantine Huzenko

Hi, article easy to reproduce, thanks! But for real I don't understand why I need containers? Only for different versions of node and packages?

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Thanks! yes, we don't have to use them but I find them to be useful for the following:

  • Consistent and Isolated Environment
  • Test, Roll Back and Deploy
  • Collaboration, Modularity and Scaling
  • Mobility – Ability to Run Anywhere

...and many more!

Collapse
 
yandjoumbi profile image
yandjoumbi

when i run the docker compose file im getting this error
The Compose file is invalid because:
Service app has neither an image nor a build context specified. At least one must be provided.