Dockerize Create-React-App in 3 minutes

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 was included NodeJS micro services in the backend and React for the front-end.

I created a really nice project using Create React App.

If you don't know Create React App, It's creating in less then 20 seconds React App the works Simply by running the following command

npx create-react-app webapp

Ok, once I got my project, I coded my stuff, which was pretty straight forward using the basic templated. Then I wonder, what will be the easiest way to serve this page.
Remember that I need to submit this home assignment.

Since I already have micro-services I had docker-compose file for the rest of the services, so I was looking how to dockerized my React project.

I'm happy to tell you that it's really easy.

Let's say my project name is webapp.

Create two files under the project root folder Dockerfile and .dockerignore.

Copy the content into your files accordingly

Lines 1 - 6 are building the image:

1. Creating working dir
2. Copy all the files besides the one in the .dockerignore
3. Installing react-scripts which is using for serving the project
4. Running yarn insatll - Get the dependencis
5. Yarn run build - Build the project in optimized way

Lines 8-12 are the one used to serve the project.
Note the at we are serving this project in port 80.

Let's build this image just run on the Dockerfile folder
docker build -t react-webapp .

And run our container
docker run -it -p 8000:80 react-webapp
Once the container is running, you can open http://localhost:8000 and you'll be able to access the React app running inside the Docker container.

For docker-compose you can copy

That's it...
Now you got a dockerized UI solution in less then 3 minutes.

Comments

[Prathamesh More]

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]

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]

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]

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]

Now image building well but not serving app

[zivka]

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

[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 .

[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:)

[Vipul Goel]

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]

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]

Awesome Thank's!!

[Yosef Alnajjar]

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

[zivka]

Thank you man:)

[Haikal Azmi]

What is the function of dockerize?

[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

[KristijanFištrek]

This is just amazing! Thanks!

[zivka]

You welcome:)

[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"

[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

[Farbod Aprin]

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

[zivka]

Hey Farbod,
Thank you for your feedback.

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