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...
Collapse
 
pprathameshmore profile image
Prathamesh More • 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"]
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

All other works fine but not running the react app.

Collapse
 
ziv profile image
zivka

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"

Collapse
 
pprathameshmore profile image
Prathamesh More

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;
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
pprathameshmore profile image
Prathamesh More

After installing serve as global

I getting this error

ERROR: for scan-app-frontend  Cannot start service react-app: network nanoheal_default not found
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
pprathameshmore profile image
Prathamesh More

Now image building well but not serving app

image

Thread Thread
 
ziv profile image
zivka

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

Collapse
 
adamklepacz profile image
Adam Klepacz

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 .
Collapse
 
ziv profile image
zivka

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

Collapse
 
vipul2008 profile image
Vipul Goel • 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.

Collapse
 
ziv profile image
zivka

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

Collapse
 
vipul2008 profile image
Vipul Goel

Awesome Thank's!!

Collapse
 
yosefalnajjarofficial profile image
Yosef Alnajjar

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

Collapse
 
ziv profile image
zivka

Thank you man:)

Collapse
 
hycarldev_ profile image
Haikal Azmi

What is the function of dockerize?

Collapse
 
ziv profile image
zivka

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

Collapse
 
kristijanfistrek profile image
KristijanFištrek

This is just amazing! Thanks!

Collapse
 
ziv profile image
zivka

You welcome:)

Collapse
 
jglickmantrv profile image
jglickmantrv

Hi. I'm getting this in the docker build command and I don't see any /app directory:

error Couldn't find a package.json file in "/app"

Collapse
 
farbod29 profile image
Farbod Aprin

In the folder of docker file which is inside of the , ugnfotionatly didn't work for me

arbodaprin$ dokcer build -t react-fullsack_app

bash: dokcer: command not found

Collapse
 
farbod29 profile image
Farbod Aprin • Edited

hey Zivka ... you had dictation problem please corect it

dokcer build -t react-webapp .

should be

dokcer build -t react-webapp .

also what is react-webapp? your project name was "webapp" please make it clear

Collapse
 
ziv profile image
zivka • Edited

Hey Farbod,
Thank you for your feedback.

Regarding to react-webapp, -t flag means, tagging. So it will be the name of the image