Setup Docker for React development

react-on-docker.md

STEP 2: setup docker to run react app (dev and production) configuration: https://gist.github.com/przbadu/929fc2b0d5d4cd78a5efe76d37f891b6

Setup Docker for React development

Because we are using Docker, we are not going to install node, npm, create-react-app in our development machine, not even for generating create-react-app scaffold.

For this purpose I am using 2-step docker configuration:

• In first step, we will create a simple docker container, that does only one thing, install create-react-app and we can use it to generate create-react-app scaffold.
• And second docker configuration is project specific. It will handle nodemon, npm, development servers, etc.

Build docker image for create-react-app

Because we are not installing create-react-app locally in our development machine, Let's build new docker container for it. For this container, we are not going to write Dockerfile or docker-compose manually. because we can use this container for creating lots of create-react-app.

Create dockerfile

Dockerfile

FROM node:8.2.1-alpine
RUN npm install -g create-react-app \
                   create-react-native-app \
                   react-native-cli
RUN mkdir /app
WORKDIR /app
ADD . /app

docker-compose.yml

version: '3'
services:
  web:
    build: .
    image: react-cli
    container_name: react-cli
    volumes:
      - .:/app

NOTE: I am unable to do this without docker-compose. The problem was, the scaffold that were generated by cli were on docker container, not in our development machine. The idea is, the cleaner solution would be to build the image without docker-compose example: docker build . -t react-cli. Then we can use this image where ever we want, example: docker run react-cli create-react-app myApp.

Usage

Now using docker-compose we can generate our react application:

docker-compose run web create-react-app myApp

and setup myApp with seperate Dockerfile, Dockercompose that will actually handles project level configuration. Above Dockerfile is just for the purpose of generating create-react-app cli without having to install npm and node js in our system.

If anyone knows how to use react-cli image to generate create-react-app without using docker-compose.yml file, please let me know. Please read NOTE section above for expected result and gotcha.

Thanks

Build the docker image docker build -t react-cli .

This docker command will allow you to mount a local directory on the host machine without using docker-compose.

docker run --mount type=bind,source="$(pwd)",target=/app react-cli create-react-app myApp

Works perfectly.

To resume:

1- Create a Dockerfile with the content given by @przbadu
2- docker build . -t react-cli
3- docker run --mount type=bind,source="$(pwd)",target=/app react-cli create-react-app myApp

Tested in Windows 10 via powershell using Visual Code.

Thanks @przbadu and @jbigler

Happy hacking!

Sorry if it's obvious, but I didn't see how to use this And second docker configuration is project specific. It will handle nodemon, npm, development servers, etc.

So how to handle this?
First step with first container works well, but what about the second configuration ?

Hi,

Change your Dockerfile to:

FROM node:8.2.1-alpine
RUN npm install -g create-react-app \
                   create-react-native-app \
                   react-native-cli

WORKDIR /app

and build that image:

docker build -t react/cli .

Then you go wherever you want and run:

docker run -v /path/of/your/choice:/app react/cli create-react-app MyApp

Hot reloading is not working in create react app

Hi there, sorry for the confusion, yes we need separate configuration for second part, and here is the second part that I prepared to avoid further confusion:

https://gist.github.com/przbadu/929fc2b0d5d4cd78a5efe76d37f891b6

Hi,

So if we need a some npm packages, we always need to run the docker container to access npm ? For exemple :

$ docker run --mount type=bind,source="$(pwd)",target=/app react-cli npm i --save-dev babel-core ?

This is what I use to avoid having the created folder being owned by root
docker run --rm -v "$(pwd)":/app --user "$(id -u)":"$(id -g)" react/cli create-react-app my-react-app