Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Create React App" with Docker

I was wondering if anyone had any experience using create-react-app with docker. I was able to get it set up with a Dockerfile like:

from node
RUN mkdir /src
WORKDIR /src
ADD package.json /src/package.json
RUN npm install
EXPOSE  3000
CMD [ "npm", "start" ]

And then used a docker-compose file like:

app:
  volumes:
    - "./app:/src"
  ports:
    - "3000:3000"
    - "35729:35729"
  build: ./app

This allowed me to start up the container and view the app. However livereload didn't work when saving files in the mounted volume and webpack created several .json.gzip files in the src directory.

Any suggestions for getting this working correctly?

like image 800
john_ryan Avatar asked Aug 04 '16 04:08

john_ryan


People also ask

Can I use Docker With React?

Dockerizing a React App We're going to need to create the following three files for Docker: Dockerfile : A Dockerfile is a set of instructions used to construct an image. Inside this file, we declare the software we want to use for our project. For instance, for a React project, we're going to need Node.

How do I deploy React app to production?

For your React app, you'll have to drag and drop the build folder onto the Netlify Dashboard. Run npm run build beforehand to deploy the latest build. You can also connect GitHub, GitLab, or Bitbucket, depending on where your project is stored. This allows automatic deployment whenever you push your changes.


2 Answers

Yeah, as aholbreich mentioned, I'd use npm install / npm start locally on my machine for development, just because it's so easy. It's probably possible with docker-compose, mounting volumes etc. too, but I think it could be a bit fiddly to set up.

For deployment you can then very easily use a Dockerfile. Here's an example Dockerfile I'm using:

FROM node:6.9

# Create app directory
RUN mkdir -p /src/app
WORKDIR /src/app

# to make npm test run only once non-interactively
ENV CI=true

# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
    npm install -g pushstate-server

# Bundle app source
COPY . /src/app

# Build and optimize react app
RUN npm run build

EXPOSE 9000

# defined in package.json
CMD [ "npm", "run", "start:prod" ]

You need to add the start:prod option to your package.json:

"scripts": {
  "start": "react-scripts start",
  "start:prod": "pushstate-server build",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

You can run the tests on your CI service with:

docker run <image> npm test

There's nothing stopping you from running this docker container locally as well to make sure things work as expected.

like image 171
metakermit Avatar answered Sep 22 '22 16:09

metakermit


I recently made a small project called hello-docker-react who just does what the op is looking for.

It's made with docker-compose, create-react-app, yarn, a node image, and a small entrypoint script.

Live reload work flawlessly and I haven't found any problems yet.

https://github.com/lopezator/hello-docker-react

like image 35
sh4 Avatar answered Sep 20 '22 16:09

sh4