Dockerizing a Vue Application

Dockerizing a Vue Application

This tutorial looks at how to Dockerize a Vue app, built with the Vue CLI, using Docker along with Docker Compose and Docker Machine for both development and production. We’ll specifically focus on

This tutorial looks at how to Dockerize a Vue app, built with the Vue CLI, using Docker along with Docker Compose and Docker Machine for both development and production. We’ll specifically focus on-

  1. Setting up a development environment with code hot-reloading
  2. Configuring a production-ready image using multistage builds

We will be using:

  • Docker v18.09.2
  • Vue CLI v3.7.0
  • Node v12.2.0
Project Setup

Install the Vue CLI globally:

$ npm install -g @vue/[email protected] 

Generate a new app, using the default preset:

$ vue create my-app --default 
$ cd my-app 
Docker

Add a Dockerfile to the project root:

# base image
FROM node:12.2.0-alpine
set working directory

WORKDIR /app

add /app/node_modules/.bin to $PATH

ENV PATH /app/node_modules/.bin:$PATH

install and cache app dependencies

COPY package.json /app/package.json
RUN npm install
RUN npm install @vue/[email protected] -g

start app

CMD ["npm", "run", "serve"]

Add a .dockerignore as well:

node_modules
.git
.gitignore

This will speed up the Docker build process as our local dependencies and git repo will not be sent to the Docker daemon.

Build and tag the Docker image:

$ docker build -t my-app:dev .

Then, spin up the container once the build is done:

$ docker run -v ${PWD}:/app -v /app/node_modules -p 8081:8080 --rm my-app:dev

What’s happening here?

  1. The docker run command creates a new container instance, from the image we just created, and runs it.
  2. -v ${PWD}:/app mounts the code into the container at “/app”.
{PWD} may not work on Windows. See this Stack Overflow question for more info.

3. Since we want to use the container version of the “nodemodules” folder, we configured another volume: -v /app/nodemodules. You should now be able to remove the local “node_modules” flavor.

4. -p 8081:8080 exposes port 8080 to other Docker containers on the same network (for inter-container communication) and port 8081 to the host.

For more, review this Stack Overflow question.

5. Finally, --rm removes the container and volumes after the container exits.

Open your browser to http://localhost:8081 and you should see the app. Try making a change to the App component (src/App.vue) within your code editor. You should see the app hot-reload. Kill the server once done.

What happens when you add -it?
$ docker run -it -v ${PWD}:/app -v /app/node_modules -p 8081:8080 --rm my-app:dev
Check your understanding and look this up on your own.

Want to use Docker Compose? Add a docker-compose.yml file to the project root:

version: '3.7'

services:

 my-app:
  container_name: my-app
  build:
   context: .
   dockerfile: Dockerfile
  volumes:
   - '.:/app'
   - '/app/node_modules'
  ports:
   - '8081:8080'

Take note of the volumes. Without the anonymous volume ('/app/node_modules'), the node_modules directory would be overwritten by the mounting of the host directory at runtime. In other words, this would happen:

  • Build - The node_modules directory is created in the image.
  • Run - The current directory is mounted into the container, overwriting the node_modules that were installed during the build.

Build the image and fire up the container:

$ docker-compose up -d --build

Ensure the app is running in the browser and test hot-reloading again. Bring down the container before moving on:

$ docker-compose stop
Windows Users: Having problems getting the volumes to work properly? Review the following resources:
Docker on Windows–Mounting Host Directories
Configuring Docker for Windows Shared Drives
You also may need to add COMPOSE_CONVERT_WINDOWS_PATHS=1 to the environment portion of your Docker Compose file. Review the Declare default environment variables in file guide for more info.
Docker Machine

To get hot-reloading to work with Docker Machine and VirtualBox you’ll need to enable a polling mechanism via chokidar (which wraps fs.watchfs.watchFile, and fsevents).

Create a new Machine:

$ docker-machine create -d virtualbox my-app
$ docker-machine env my-app
$ eval $(docker-machine env my-app)

Grab the IP address:

$ docker-machine ip my-app

Then, build the images:

$ docker build -t my-app:dev .

And run the container:

$ docker run -it -v ${PWD}:/app -v /app/node_modules -p 8081:8080 --rm my-app:dev

Test the app again in the browser at http://DOCKER_MACHINE_IP:8081 (make sure to replace DOCKER_MACHINE_IP with the actual IP address of the Docker Machine). Also, confirm that auto reload is not working. You can try with Docker Compose as well, but the result will be the same.

To get hot-reload working, we need to add an environment variable: CHOKIDAR_USEPOLLING=true.

$ docker run -it -v ${PWD}:/app -v /app/node_modules -p 8081:8080 -e CHOKIDAR_USEPOLLING=true --rm my-app:dev

Test it out again. Then, kill the server and add the environment variable to the docker-compose.yml file:

version: '3.7'

services:

 my-app:
  container_name: my-app
  build:
   context: .
   dockerfile: Dockerfile
  volumes:
   - '.:/app'
   - '/app/node_modules'
  ports:
   - '8081:8080'
  environment:
   - CHOKIDAR_USEPOLLING=true

Production

Let’s create a separate Dockerfile for use in production called Dockerfile-prod:

# build environment
FROM node:12.2.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install @vue/[email protected] -g
COPY . /app
RUN npm run build

production environment

FROM nginx:1.16.0-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Here, we take advantage of the multistage build pattern to create a temporary image used for building the artifact – the production-ready Vue static files – that is then copied over to the production image. The temporary build image is discarded along with the original files and folders associated with the image. This produces a lean, production-ready image.

Check out the Builder pattern vs. Multi-stage builds in Docker blog post for more info on multistage builds.

Using the production Dockerfile, build and tag the Docker image:

$ docker build -f Dockerfile-prod -t my-app:prod .

Spin up the container:

$ docker run -it -p 80:80 --rm my-app:prod

Assuming you are still using the same Docker Machine, navigate to http://DOCKER_MACHINE_IP/ in your browser.

Test with a new Docker Compose file as well called docker-compose-prod.yml:

version: '3.7'

services:

 my-app-prod:
  container_name: my-app-prod
  build:
   context: .
   dockerfile: Dockerfile-prod
  ports:
   - '80:80'

Fire up the container:

$ docker-compose -f docker-compose-prod.yml up -d --build

Test it out once more in your browser.

If you’re done, go ahead and destroy the Machine:

$ eval $(docker-machine env -u)
$ docker-machine rm my-app
Vue Router and Nginx

If you’re using Vue Router, then you’ll need to change the default Nginx config at build time:

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

Add the changes to Dockerfile-prod:

# build environment
FROM node:12.2.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install @vue/[email protected] -g
COPY . /app
RUN npm run build

production environment

FROM nginx:1.16.0-alpine
COPY --from=build /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Create the following folder along with a nginx.conf file:

└── nginx
└── nginx.conf

nginx.conf:

server {

 listen 80;

 location / {
  root  /usr/share/nginx/html;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
 }

 error_page  500 502 503 504 /50x.html;

 location = /50x.html {
  root  /usr/share/nginx/html;
 }

}

Thank you for taking the time to read my article. If you liked this post, share it with all of your programming buddies!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Top Node.js Development Companies and Expert NodeJS Developers

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world.
List of Leading Node.js development Service Providers & Developers...

Top Vue.js Developers in USA

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

We, at HireFullStackDeveloperIndia, implement the right strategic approach to offer a wide variety through customized Vue.js development services to suit your requirements at most competitive prices.

Vue.js is an open-source JavaScript framework that is incredibly progressive and adoptive and majorly used to build a breathtaking user interface. Vue.js is efficient to create advanced web page applications.

Vue.js gets its strength from the flexible JavaScript library to build an enthralling user interface. As the core of Vue.js is concentrated which provides a variety of interactive components for the web and gives real-time implementation. It gives freedom to developers by giving fluidity and eases the integration process with existing projects and other libraries that enables to structure of a highly customizable application.

Vue.js is a scalable framework with a robust in-build stack that can extend itself to operate apps of any proportion. Moreover, vue.js is the best framework to seamlessly create astonishing single-page applications.

Our Vue.js developers have gained tremendous expertise by delivering services to clients worldwide over multiple industries in the area of front-end development. Our adept developers are experts in Vue development and can provide the best value-added user interfaces and web apps.

We assure our clients to have a prime user interface that reaches end-users and target the audience with the exceptional user experience across a variety of devices and platforms. Our expert team of developers serves your business to move ahead on the path of success, where your enterprise can have an advantage over others.

Here are some key benefits that you can avail when you decide to hire vue.js developers in USA from HireFullStackDeveloperIndia:

  • A team of Vue.js developers of your choice
  • 100% guaranteed client satisfaction
  • Integrity and Transparency
  • Free no-obligation quote
  • Portal development solutions
  • Interactive Dashboards over a wide array of devices
  • Vue.js music and video streaming apps
  • Flexible engagement model
  • A free project manager with your team
  • 24*7 communication with your preferred means

If you are looking to hire React Native developers in USA, then choosing HireFullStackDeveloperIndia would be the best as we offer some of the best talents when it comes to Vue.js.

Develop this one fundamental skill if you want to become a successful developer

Throughout my career, a multitude of people have asked me&nbsp;<em>what does it take to become a successful developer?</em>

Throughout my career, a multitude of people have asked me what does it take to become a successful developer?

It’s a common question newbies and those looking to switch careers often ask — mostly because they see the potential paycheck. There is also a Hollywood level of coolness attached to working with computers nowadays. Being a programmer or developer is akin to being a doctor or lawyer. There is job security.

But a lot of people who try to enter the profession don’t make it. So what is it that separates those who make it and those who don’t? 

Read full article here