Dockerising a Vue.js based SPA, ship and run on Oracle Container Cloud Service

In this post, I am going to show how to build and containerize a Vue.js application and let it run on Container Cloud Service (OCCS) using the following steps:

• Build a Vue.js Web App
• Build Docker image based on the above Vue.js SPA
• Push it on Docker-Hub
• Create a Service in Oracle Container Cloud Service (OCCS)
• Deploy Service (the vue.js app)

Pre-Requisites :

• You have docker installed on your development machine . Info: I have done this on Win 10 and docker 1.27
• You have Node.js (Version 6 and above ) installed on your development machine.
• You have an account with Docker Hub
• You have an access to a trial service with Oracle Container Cloud Service.

Background :

SPA (Single Page Applications ) joins two parallel worlds together: Traditional Desktop based applications and Websites. You can learn more about SPA from Wikipedia.   SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. There are several frameworks available in the Market Place to build SPA’s. One particular javascript framework that caught my attention is Vue.js. To begin with, it is a very simple framework.

For a Vue.js-based SPA, here are the tools and libraries that make up the client side structure :

• View Layer: Vue.js
• Routing: vue-router, the official router for Vue.js.
• State Management: vuex, a state-management solution inspired by Flux/Redux, but designed specifically for Vue.
• Server Communication: vue-resource, plugin for interfacing with a RESTful backend.
• Build Tool: Webpack + vue-loader for modules, hot-reloading, ES2015, pre-processors and most importantly, single-file Vue components. The entire build tool chain relies on Node.js, and we will be managing all our library and tool dependencies using NPM

Build a Vue.js Web App

Let’s build a quick Vue.js sample app. I was pretty amazed by vue-cli  that helps to bootstrap a SPA in little to no time and this command line interface makes the vue.js build tasks pretty trivial.

From your Node.js prompt window execute the below commands:

npm install -g vue-cli

vue init webpack HelloWorld

Key in the prompts and the CLI will scaffold a project with all the above features working out of the box.

cd HelloWorld
npm install # install dependencies
npm run dev # start dev server at http://localhost:8080

For full details on what is included in the generated project, check out the project template documentation. You should have a sample vue.js application accessible from the browser.  I explored this framework further, reading few tutorials and samples, tracking some git hub projects, I was able to build a full-fledged Vue.js application that leverages bootstrap theme, communicates with back-end REST API’s and renders the information on the web page. You can access working  sample project from my github.

Build Docker image based on the above Vue.js SPA

Now that we built our sample application, let’s dockerise this SPA.

• Create a Dockerfile in the Web App root folder as below (Refer the Dockerfile from the above  github project).

• FROM node:boron
  # Create app directory
  RUN mkdir -p /usr/src/app
  WORKDIR /usr/src/app
  # Install the app dependencies
  COPY package.json /usr/src/app/
  RUN npm install
  
  # Bundle app source
  COPY . /usr/src/app
  
  EXPOSE 8080
  CMD ["npm", "run", "dev"]

•  Create the .dockerignore file at the same location and add the below entries.

node_modules
npm-debug.log

• Create a Docker Container: Execute this docker command from the application path.

docker build -t <Image_Name> .

• List and  run the Docker Image and grab the container id:

list the images : docker images

docker run -p 49160:3000 -d <Image_Name>

docker ps

Push it on Docker Hub

• Register on docker hub with the repository name
• connect to docker hub

docker login --username=<dockerhubusername> --email=<dockerhubemail>

• Tag your image

docker tag <image_id> image_name:latest

• Push the image to the Docker Hub

docker push yourhubusername/image_name

Deploy and Run it on Oracle Container Cloud Service (OCCS)

 

• Register your Docker Hub Account with OCCS from the container console
• Create a Service in OCCS from the container console, fill in the Service name, Image details and the ports configuration.

• Save the changes

• Once the service is defined, just hit the deploy button.

• Check the docker image being pulled from the registry to OCCS.
• Once deployment is completed, click on the deployed container and check the host details.
• Access the application : http://host-ip:8080

You now have a dockerised Vue.Js application shipped and deployed on Oracle Container Cloud service and is available for public access.

Thank you for your time.