Md Obydullah Follow I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and web development.

Build and Run Vue.js Application with Docker

Published on October 23, 2019 1 min read

In this article, I’m going to dockerize Vue application. We know that Docker is a set of platform-as-a-service (PaaS) products that use OS-level virtualization to deliver software in packages called containers. Let’s build and run app with Docker.

Table of Contents

  1. Create a Vue Project
  2. Create Dockerfile
  3. Make .dockerignore File
  4. Build and Run Container
  5. Some Commands

Step 1 : Create a Vue Project

You need to install Vue CLI if not installed on your PC.

npm install -g @vue/cli

Then run this command to create a Vue app:

# create project
vue create hellovue
# go to project folder
cd hellovue

Step 2 : Create Dockerfile

A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Create a file named Dockerfile at the root of your project. Now we’re are going to write some commands in the Dockerfile to run our project.

Dockerfile
# develop stage
FROM node:alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

# build stage
FROM develop-stage as build-stage
RUN npm run build

# production stage
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 90
CMD ["nginx", "-g", "daemon off;"]

FROM node:alpine means, Docker will pull nodejs alpine version from Docker Hub. Alpine makes a great docker container, because it is so small and optimized to be run in RAM.

Step 3 : Make .dockerignore File

.dockerignore is to prevent files from being added to the initial build context that is sent to the Docker daemon when we do docker build. Here’s an example:

.dockerignore
.git
.DS_Store
node_modules
dist

Step 4 : Build and Run Container

We’ll build the project as a Docker container with this command:

docker build -t hellovue .

Now let’s run the container at port 90:

docker run -p 90:80 hellovue

Visit http://localhost:90 and see the output like this:

We can also run the container with some attributes. Have a look at this page.

Step 5 : Some Commands

List of docker images:

docker images

List of running containers:

docker ps

Stop a container:

docker stop [conatiner name/ID]

Delete docker image:

docker rmi -f [image name/ID]

Stop and remove all of the Docker containers:

# stop all
docker stop $(docker ps -a -q)
# delete all
docker rm $(docker ps -a -q)
The tutorial is over. You can download this project from GitHub. Thank you. 🙂

You're welcome to suggest any article to write!

Md Obydullah Follow I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and web development.

Leave a Reply

Your email address will not be published. Required fields are marked *