Development

Testing

Deployment
 Github Repo

Branches feature Pull Request master Travis CI AWS Hosting

You
Flow
Create/change features
Dev Make changes on a non-master
branch

Push to github

Create Pull Request

to merge with
master

Code pushed to Travis CI

Test
Tests run

Merge PR with
master

Code pushed to Travis CI

Prod Tests run

Deploy to AWS Elastic Beanstalk

 Something to notice...
Last diagram didn't mention anything about Docker!

Docker is a tool in a normal development flow

Docker makes some of these tasks a lot easier

 Starts up a development server. For development use
npm run start
only

npm run test Runs tests associated with the project

npm run build Builds a production version of the application

In Development... In Production...

Docker Container Docker Container

npm run start npm run build

 Map the pwd into
the '/app' folder

docker run -p 3000:3000 -v /app/node_modules -v $(pwd):/app <image_id>

Put a bookmark on the

node_modules folder
 Local Folder Docker Container

frontend /app

/src reference

/public reference

reference
 Test Container Web Container

start.js npm npm run start

stdin stdout stderr stdin stdout stderr stdin stdout stderr

Our Terminal
Page 1 Dev Environment

https://www.draw.io

Web Container

index.html
Dev Server
main.js
Page 1 Prod Environment

https://www.draw.io

Web Container

Production index.html

Server main.js
Page 1 Prod Environment

https://www.draw.io

Web Container

index.html
nginx
main.js
 Use node:alpine

Copy the package.json file

Install dependencies

Run 'npm run build'

Start nginx
 Use node:alpine

Copy the package.json file

Deps only needed to

Install dependencies
execute 'npm run build'!

Run 'npm run build'

Errr...what? Where's
Start nginx
nginx coming from?
 Build Phase Run Phase

Use node:alpine Use nginx

Copy over the result of 'npm

Copy the package.json file
run build'

Install dependencies Start nginx

Run 'npm run build'

 Github Free!

Travis CI Free!

Free, but credit card

AWS
required