### 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 react-scripts@3.4.1 -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.