# React Docker Tutorial
This repository demonstrates how to bootstrap a React app using `create-react-app` and add  Docker container and using ENV variables. This is the TL;DR version of normal trial and error to get Docker and ENV variables to work nicely in a React app. The goal is allowing you to package and deploy your app to any environment and adhere to 12-factor-app principles.

# Requirements
## NodeJS version 6 or later
You need NodeJS installed on your machine at least version 6, and a general understanding of NPM and how to install, configure, and start a Node app. You don't need experience with React to follow this tutorial, however it is preferred.

## Docker
In order to test the Docker container you need to be able to perform `docker` commands. Familiarity with building and running images is preferred.

# Setup
1. Bootstrap your application with `create-react-app`
```
npx create-react-app my-docker-react-app
```

2. Verify application runs
```
cd my-docker-react-app
npm install
npm start
```

Your browser will likely launch a window or tab for `http://localhost:3000` and you should see a React icon and welcome screen. If everything is running, then `CTRL + C` to stop the app and proceed. If it is not working, visit create-react-app's website for instructions and troubleshooting tips for your environment.

# Customize app to use ENV variables
## Using ENV variables
Bootstrapped React apps (using `create-react-app`) strip most environment variables with the exception of `NODE_ENV` and any variables that are prefixed with `REACT_APP_<your var>`. For this tutorial we will prefix all variables with `REACT_APP_` to work with the default install configuration.

1. Add local ENV variables
Add a `.env.local` file with variables `REACT_APP_ENVIRONMENT` and `REACT_APP_TIMEZONE` and some values. (SEE: env.local example but name with `.` prefix and `.gitignore` will ignore)

2. Add a `Config.js` file to centralize ENV variables for use in the application. For a larger application you may want to move this to a `lib/` folder.

3. Print variable values on default `App.js` screen to confirm the application is using them.

4. Verify application runs (using `npm start` as before)

# Add Docker container
If you tested the app above, and the values you set in your local environment appear, then proceed to package your app in a container.

## Create Docker image and run script
1. Add `Dockerfile` as example in this repository

2. Add `run` script (this is the secret)
Adding a separate script for the `CMD` of your `Dockerfile` allows you to inject the container's ENV params during `docker run ...`. If you build your React app in the `Dockerfile` it will not recognize the ENV variables you pass as arguments when you run it.

3. Set script permissions
**IMPORTANT** `chmod +x run` to allow Docker to execute the script during the `CMD`. Alternatively you could add another layer to the `Dockerfile` and a `RUN chmod+x run` step.

## Build and run Docker image
1. Build docker image
```
docker build -t myimage .
```

2. Run image and add ENV variables to container
```
docker run --name myapp -p 8080:5000 \
-e REACT_APP_ENVIRONMENT=docker \
-e REACT_APP_TIMEZONE=America/Pacific \
--rm myimage
```

3. Test that your app is running on port 8080 in local browser at http://localhost:8080 and you should see the default screen but the values match ENV variable values passed in your run command.

# Congratulations
If you made it this far, then you have successfully extended `create-react-app` to use environment variables and added a Docker image that allows you to configure your application dynamically to run anywhere!