docker create-react-app without installing node, npm in local system.

Because we are using Docker, we should not 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.

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

my failed attempt to solve this problem without docker-compose

NOTE: we need to fix this problem, please help me if anyone know the solution.

1. build the docker image that will handle just react cli part.

docker build . -t react-cli

1. Once that is done, let’s generate new create-react-app scaffold using this image:

docker run react-cli create-react-app myApp

EXPECTED

• it should generate react scaffold app myApp in my current directory.

RESULT

Got nothing 😄 . Looks like it is generating app inside docker container.

Working Solution: using docker-compose

Because I was unable to solve it by using just docker command, I am solving it using docker-compose.

docker-compose.yml

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

Usage

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

docker-compose run web create-react-app myApp

Everthing should work this time. And you should get react generated application inside myApp directory.

If anyone knows how to use react-cli image to generate create-react-app without using docker-compose.yml file, please let me know.

Thanks

[przbadu]

@Timer : Thanks a lot 😄 , So, I finally fixed it. No changes in Dockerfile all we gotta do is add -v volume flag to map current directory.

So, the complete solution is if anyone interested:

Add Dockerfile to build your own image

You can remove extra packages if you don’t like, or add other packages too.

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

Build your react-cli image

docker build . -t react-cli

Use this image to generate your react scaffold

Now we can use react-cli image to generate our create-react-app, create-react-native-app or react-native-cli application. The important thing is, don’t forget to add -v flag that points to your current directory with docker’s /app directory.

Linux/Mac User

docker run -v ${PWD}:/app react-cli create-react-app myapp
ls # make sure it is successful

Windows user

docker run -v %cd%:/app react-cli create-react-app myapp
dir # make sure it is successful

Thanks

[devxpy]

Great!

Add this to your bashrc & enjoy containerised react everywhere!

alias react-docker='docker run -v ${PWD}:/app react-cli'
alias npm='docker run -v ${PWD}:/app react-cli npm'
alias yarn='docker run -v ${PWD}:/app react-cli yarn'