DEV Community

Dockerize Create-React-App in 3 minutes

zivka on January 04, 2020

First of all, I'm pretty excited since it's my first blog post ever... I hope you would like it Lately I got a full stack home assignment which wa...

Read full post

Prathamesh More • Oct 18 '20 • Edited

Hey Zivka,

I trying build an image but stuck at error

FROM node:12

WORKDIR /use/src/app

COPY package*.json ./

RUN npm install
RUN npm install react-scripts@3.4.1 -g --silent


COPY . .

EXPOSE 3000

CMD ["npm", "run", "build"]

My docker-compose.yml file

version: "3"

services:
  app:
    container_name: scan-app-backend
    restart: always
    build: ./api
    ports:
      - "3001:3001"
    links:
      - mongo
  mongo:
    container_name: mongo
    image: mongo
    ports:
      - "27017:21017"

  react-app:
    container_name: scan-app-frontend
    build: ./dashboard
    ports:
      - "3000:3000"

Error

> dashboard@0.1.0 start /use/src/app

> react-scripts start


ℹ ｢wds｣: Project is running at http://172.26.0.3/

ℹ ｢wds｣: webpack output is served from

ℹ ｢wds｣: Content not from webpack is served from /use/src/app/public

ℹ ｢wds｣: 404s will fallback to /

Starting the development server...

All other works fine but not running the react app.

zivka • Oct 18 '20

Try to map your ports to port 80 and to set your react app to expos it on port 80
CMD ["serve", "-p", "80", "-s", "."]

in your docker-compose
ports:
- "8000:80"

Prathamesh More • Oct 19 '20

Now I am getting this error

 internal/modules/cjs/loader.js:969
scan-app-frontend |   throw err;
scan-app-frontend |   ^
scan-app-frontend |
scan-app-frontend | Error: Cannot find module '/use/src/app/serve'
scan-app-frontend |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
scan-app-frontend |     at Function.Module._load (internal/modules/cjs/loader.js:842:27)
scan-app-frontend |     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
scan-app-frontend |     at internal/main/run_main_module.js:17:47 {
scan-app-frontend |   code: 'MODULE_NOT_FOUND',
scan-app-frontend |   requireStack: []
scan-app-frontend | }
scan-app-frontend | internal/modules/cjs/loader.js:969
scan-app-frontend |   throw err;

Prathamesh More • Oct 19 '20

After installing serve as global

I getting this error

ERROR: for scan-app-frontend  Cannot start service react-app: network nanoheal_default not found

Prathamesh More • Oct 19 '20

Now image building well but not serving app

zivka • Oct 19 '20

Make sure you install serve globally on your image. Take a look on my Dockerbuild file how do I install the serve

Adam Klepacz • Feb 13 '20

Hey unfortunettlly this doesn't work

Unknown token: { line: 3, col: 2, type: 'INVALID', value: undefined } 3:2 in /app/yarn.lock

I have a basic CRA app, build with YARN and this is an error that I'm getting when running

docker build -t react-app .

zivka • Feb 13 '20

It seems to be related to yarn.lock file.
Try to add this file to dockerignore file and see if it’s still happen:)

Vipul Goel • Jan 4 '20 • Edited

Here codebase is locally on your dev system I assume, when your codebase is a git repository then how will docker work? I am very new to docker, may be a silly question.

zivka • Jan 4 '20

So it depends on the system that builds the image. You can build it locally, or build it part of CI/CD.

As you can see, we are using COPY command which means the build machine should have this code locally.. In case you are using some GitHub actions/Jenkins/circle ci just start with checkout step in order to clone the updated repo

Vipul Goel • Jan 4 '20

Awesome Thank's!!

Yosef Alnajjar • Jan 4 '20

Congrats for your first article, it was great, keep up the good work 👍

zivka • Jan 4 '20

Thank you man:)

Haikal Azmi • Jan 5 '20

What is the function of dockerize?

zivka • Jan 5 '20

Not sure I understand your question correctly. Any way the docker file is set of commands that by running docker build . is searching for this file, run the set of commands and create an image