react-redux-boilerplate

Setup

# use node version in .nvmrc
nvm use

# install packages
yarn install

# run development
yarn start

# verify style
yarn run lint

# format code
yarn run format

# build distribution
yarn build

Docker

# build image
docker build \
  -t brightwindanalysis/react-redux-boilerplate:latest \
  -f docker/Dockerfile .

# start temporary container
docker run \
  --rm \
  -p 8080:80 \
  --name react-redux-boilerplate \
  brightwindanalysis/react-redux-boilerplate

# access container
docker exec -it react-redux-boilerplate sh

Continuous integration and deployment

Requirements for deployment on AWS

• two EC2 instances (dev/prod) e.g. ec2-000-000-000-000.AWS_REGION.compute.amazonaws.com
• EC2 Container Registry configured e.g. AWS_ACCOUNT_ID.dkr.ecr.AWS_REGION.amazonaws.com/react-redux-boilerplate
• Credentials (Access Key ID and Secret Access Key) of a unique IAM user with AmazonEC2ContainerRegistryPowerUser permission to push on the registry

CircleCI v2 setup

• add the repository to CircleCI
• AWS CodeDeploy: set the AWS keypair (Access Key ID and Secret Access Key)
• SSH Permissions: add a private key (PEM) to deploy to the EC2 machine
• Chat Notifications: set a Webhook URL for Slack to get a notification on each build

Configure the following CircleCI Environment Variables:

• AWS_ACCOUNT_ID (registry)
• AWS_REGION e.g. eu-west-1 (without a/b/c)
• EC2_USERNAME_DEV and EC2_USERNAME_PROD
• EC2_HOST_DEV and EC2_HOST_PROD e.g. ec2-000-000-000-000.AWS_REGION.compute.amazonaws.com
• HTTP_PORT_DEV and HTTP_PORT_PROD e.g. 8080

Deployment

• a push on the master branch trigger a build and a deployment in DEV
• a push of a tag starting with v trigger a deploy in PROD of the latest image available

Local deployment (skip CircleCI)

./script/local/local_registry.sh
./script/local/local_deploy.sh

Documentation

• React Express introduction
• nvm
• yarn
• webpack
• Babel + ES2015
• Prettier
• React
• React Router
• Redux + Redux DevTools
• axios + redux-axios-middleware
• AWS EC2
• AWS ECR