Instantly share code, notes, and snippets.

Embed
What would you like to do?
npm scripts for Docker

These are generic npm scripts that you can copy & paste into your package.json file as-is and get access to convinience scripts to manage your Docker images all in one place.

Looking for npm scripts for AWS ECS? Go here!

Watch the video: Do More With Less JavaScript

Docker Containers for Static or Angular/React/Vue/etc SPA Websites

Features

  • Cross-Platform: Works on Windows 10 and macOS.
  • docker:build: Builds your Docker image, using the root Dockerfile and tags the image as latest and whatever version is specificed in package.json like 1.0.0.
  • docker:run: Run the image you built on your local Docker instance. When you run docker ps your image will identified by the imageName you specify in package.json.
  • docker:debug: Builds and runs image; tails console logs, so you can see what's happening inside the container; launche target app URL http://localhost:imagePort in a browser; all in one command.
  • docker:publish: Publishes the image to the imageRepo specified. This can be on Docker Hub, AWS ECS or any other Docker repository you may create.

Pre-Requisites

  • Install Docker for Mac or Windows
  • npm i --save-dev cross-conf-env npm-run-all: Needed to ensure cross platform functionality for scripts.

Configuring Package.json in 2-steps

Step 1

In your package.json file add a new config property with three sub-properties using your own values, as shown below:

  "config": {
    "imageRepo": "[namespace]/[repository]",
    "imageName": "custom_app_name",
    "imagePort": "0000"
  },

Step 2

Copy & paste these new scripts under the scripts property in package.json:

Note that docker:runHelper assumes that your code is listening to port 3000. Update the value in the scripts, if this is not the case.

  "scripts": {
    "predocker:build": "npm run build",
    "docker:build": "cross-conf-env docker image build . -t $npm_package_config_imageRepo:$npm_package_version",
    "postdocker:build": "npm run docker:tag",
    "docker:tag": " cross-conf-env docker image tag $npm_package_config_imageRepo:$npm_package_version $npm_package_config_imageRepo:latest",
    "docker:run": "run-s -c docker:clean docker:runHelper",
    "docker:runHelper": "cross-conf-env docker run -e NODE_ENV=local --name $npm_package_config_imageName -d -p $npm_package_config_imagePort:3000 $npm_package_config_imageRepo",
    "predocker:publish": "echo Attention! Ensure `docker login` is correct.",
    "docker:publish": "cross-conf-env docker image push $npm_package_config_imageRepo:$npm_package_version",
    "postdocker:publish": "cross-conf-env docker image push $npm_package_config_imageRepo:latest",
    "docker:clean": "cross-conf-env docker rm -f $npm_package_config_imageName",
    "predocker:taillogs": "echo Web Server Logs:",
    "docker:taillogs": "cross-conf-env docker logs -f $npm_package_config_imageName",
    "docker:open:win": "echo Trying to launch on Windows && timeout 2 && start http://localhost:%npm_package_config_imagePort%",
    "docker:open:mac": "echo Trying to launch on MacOS && sleep 2 && URL=http://localhost:$npm_package_config_imagePort && open $URL",
    "docker:debugmessage": "echo Docker Debug Completed Successfully! Hit Ctrl+C to terminate log tailing.",
    "predocker:debug": "run-s docker:build docker:run",
    "docker:debug": "run-s -cs docker:open:win docker:open:mac docker:debugmessage docker:taillogs"
  },

You can customize the build command to run your tests before building the image like:

    "predocker:build": "npm run build -- --prod && npm test",

Running

You're done. Now run your scripts. To build and publish an image you only need to use two of the commands frequently. 0. npm run docker:build: Builds and Tags the image. After first run, you can just use npm run docker:debug.

  1. npm run docker:debug: Test (optional), Build, Tag, Run, Tail and launch your app in a browser to test.
  2. npm run docker:publish: Voila, you results are published on the repository you've defined.

Publish on the Internet

You've two options, easy and hard.

  1. Easy: Use now.sh After you install the cli tools and login. You'll need to run the following command on the same folder as your Dockerfile:
$ now

That's it!

  1. Hard: Use AWS ECS This is Amazon's Elastic Container Service and it's pretty excellent to use with Docker. However, it is complicated to setup. But worry not for step-by-step instructions head over to npm scripts for AWS ECS.
@ansongoldade

This comment has been minimized.

ansongoldade commented Mar 24, 2018

Very helpful. Thanks for sharing!

@AmreeshTyagi

This comment has been minimized.

AmreeshTyagi commented Apr 13, 2018

Thanks. It is really helpful.

postdocker:build or predocker:build are not used in any other command.

Please help me to understand, how to use them?

@duluca

This comment has been minimized.

Owner

duluca commented Apr 15, 2018

@AmreeshTyagi with npm scripts, the keywords pre and post are used to execute helper scripts, respectively before or after the execution of a given script. So when docker:build is executed, predocker:build executes before hand and postdocker:build afterwards.

@AmreeshTyagi

This comment has been minimized.

AmreeshTyagi commented Apr 16, 2018

@duluca Thanks a lot.
I was not aware about pre & post. It will solve lots of my issues.

@AmreeshTyagi

This comment has been minimized.

AmreeshTyagi commented Apr 16, 2018

One more thing about docker-compose. Is it good to use docker-compose up instead of docker run?
I have three docker-compose files docker-compose.debug.yml for development, docker-compose.test.yml for test environment & docker-compose.yml for production.

Please suggest, if I should use three different docker compose files or environments can be handled using docker only in package.json file.

@guillermoarellano

This comment has been minimized.

guillermoarellano commented Jun 29, 2018

I am following the instructions in your eBook for Angular 6 Enterprise-Ready Web Applications.

npm run docker:clean is failing on me. It is saying that my container imageName doesn't exist.

But looking at the Docker images in my computer, I see 2 images with the imageName plus colon (:) 0.1.0 and latest. What could I be doing wrong?

@guillermoarellano

This comment has been minimized.

guillermoarellano commented Jun 29, 2018

Never mind. I just had to run the command again and then it worked.

First time working with Docker and with some of these dev dependency libraries.

@PhilJobCloub

This comment has been minimized.

PhilJobCloub commented Oct 2, 2018

Thanks for sharing.
I have a quick question, I have my docker-compose in a sub-directory and from a npm command I'd like to point to this directory
in my scripts

 "docker": "docker-compose up -d --build && docker run -d my-image "
```
but How do I point to my docker directory where sit my docker-compose file ?

thanks for your help
@iuviene

This comment has been minimized.

iuviene commented Nov 7, 2018

I am also new to Docker and following along in your Angular 6 for Enterprise apps book. When running 'npm run docker:build'
on a macOS, I'm getting the error 'Can't connect to the Docker daemon.' I understood that I shouldn't need to manually start the docker daemon. Any thoughts on what is likely causing this problem would be appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment