• Dev vs Test vs Prod
• Dev
  • Build Docker Image
  • Create container
    • Create Container With Build Option
  • Run The Test
• Prod
  • Build
  • Create Container
• Easy Create React App

Dev vs Test vs Prod

TEST :

npm run test

Dev

• Dockerfile : Dockerfile.dev
• use docker-compose.yml
• entrypoint command : npm run start
• use react development-server
• use docker volumes option to mapping :
  • local dir with the container dir
  • Foldernode_modules/ is bookmark-ed, to use exising node_modules/ folder inside container, instead of replacing it with the reference/mapping to local dir volume.
    • Foldernode_modules/ is not bookmark-ed
    • Foldernode_modules/ is bookmark-ed prefered
• url : http://localhost:3000/

Build Docker Image

Manually using docker-cli to build the docker image.

docker build -f Dockerfile.dev .

Using docker-compose to Create Container With Build Option

Create Container

docker-compose up

Create container with build option

If there is a changes to Dockerfile.dev or new sevices added to docker-composer.yml file.

docker-compose up --build

Run The Test

List the services :

docker ps -a

Then get the container id of the web-app. Then run script below. Replace [CONTAINER-ID] with the actual container id value.

docker exec -it [CONTAINER-ID] npm run test

run the test with coverage, and immediate exit with 0, after finished. To avoid the watch mode, never ending process.

docker run harryosmar/react-docker npm run test -- --coverage

Prod

• Dockerfile : Dockerfile
• do not use docker-compose.yml
• entrypoint command : npm run build
• use nginx server
• only container public/ folder
• Has 2 phases :
  • build phase : install npm dependencies, then build the files for production usage inside
  • run phase : copy build files from /app/build folder in build phase, then create the web server/nginx
• url : http://localhost:8080/

Build

docker build .

Create Container

docker run -p 8080:80 [CONTAINER-ID]