@@ -0,0 +1,172 @@
### Setup docker to run React app
After setting up docker to generate React app without installing node js in https://gist.github.com/przbadu/4a62a5fc5f117cda1ed5dc5409bd4ac1
It was confusing to some of the devs, how to run react app, so I am creating this as second step to the configuration.
### Generate required files in your react project
``` sh
cd my-react-app
touch Dockerfile Dockerfile.dev docker-compose.yml .dockerignore
```
` .dockerignore ` is used to ignore files or directories that you want to ignore in docker build process.
` Dockerfile ` is a set of instructions used to construct an image. this file is for production environment
` Dockerfile.dev ` is similar to ` Dockerfile ` but for development environment
` docker-compose.yml ` is a tool for defining and running multi-container Docker applications with one command mostly ` docker-compsose up `
#### ` my-react-app/.dockerignore `
Add files and directories that you want to ignore in docker build process in ` .dockerignore ` file
``` sh
node_modules
build
.dockerignore
Dockerfile
Dockerfile.dev
```
#### ` Dockerfile.dev `
``` sh
# we will use node:alpine docker image
FROM node:alpine
# set /app as work directory
WORKDIR /app
# copy package.json to work directory, so that we install npm dependencies
COPY package.json /app
# install npm dependencies
RUN npm install # OR `RUN yarn install`
# copy your project files to work directory
COPY . /app
# run your app
CMD [" npm" " start" # OR CMD ['yarn', 'run', 'start']
```
#### ` docker-compose.yml `
``` sh
version: ' 3'
services:
client:
stdin_open: true
build:
context: .
dockerfile: Dockerfile.dev
ports:
- " 3000:3000"
volumes:
- " /app/node_modules"
- " ./:/app"
```
Now that your ** Dockerfile** and ** docker-compose.yml** files are ready run your app using below command
### Run your app
``` sh
docker-compose up
```
And once the docker-compose command is successful, you should see your app running at http://localhost:3000/
YaY!! That's your development environment setup.
### Production setup
If you are interested in production docker configuration, then you can follow below instructions:
#### ` Dockerfile `
``` sh
# build environment
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
RUN npm install [email protected] -g --silent
COPY . ./
RUN npm install
RUN npm run build
# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
# If you are using react-router, uncomment below line
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD [" nginx" " -g" " daemon off;"
```
This dockerfile will install all node dependencies, then build your react app (create build directory), Then our
` nginx ` setup will serve our app from this ` build ` directory.
### Update your docker-compose.yml file
`docker-compose.yml
``` sh
version: ' 3.7'
services:
web-dev:
stdin_open: true
build:
context: .
dockerfile: Dockerfile.dev
ports:
- " 3000:3000"
volumes:
- " /app/node_modules"
- " ./:/app"
web-prod:
container_name: my-app-prod
build: .
ports:
- ' 1337:80'
```
> NOTE: if you are using same ` docker-compose.yml ` file for both dev and production environment, then you need to run
> development environment with ` docker-compose up web-dev ` . if you run ` docker-compose up ` then it will by default
> run all the containers defined inside docker-compose file.
### Nginx configuration
Create the nginx.conf file inside nginx directory inside your project e.g ` my-react-app/nginx/nginx.conf `
``` sh
mkdir -p nginx
touch nginx/nginx.conf
```
` nginx/nginx.conf `
``` sh
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri / /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
```
> NOTE: Although this example shows us how to configure Docker for both dev and production envionrment, you might not
> need ` docker-compose.yml ` for production build, as your hosting provider will handle that, but Dockerfile and nginx.conf iwll require.
przbadu created this gist