Vue The Series — Chapter 1: Create a pretty simple app and Dockerfile

Photo by George Bonev on Unsplash

As we know, VueJS is a popular javascript frameworks like ReactJS Angular or Mother of Framework AngularJS. I want to publish this article as series that cover context about Initial app, Testing app, Deploy app with Docker to AWS EC2 or Elastic Beanstalk.

Before creating new VueJS app, I use Node.js version 12.4.0. check your version.

$node -v

and my recommendation use nvm (Node Version Manager) for managing version of Node.js on your machine.

Vue CLI version 4.1.1 . check your cli version

$vue — version

If you have no Vue CLI on your machine, to install use

$npm install -g @vue/cli

Let’s create a simple app with Vue CLI

$vue create poseidon

> Please pick a preset: Manually select features

> Check the features needed for you project: Babel, Router, Vuex, CSS Pre-processors, Linter / Formatter and Unit Testing.

> History mode: Y

> CSS pre-processor: Sass/SCSS (with node-sad JKD! node-sass)

> lint: Lint on save

> Testing: Jest

> Config: In package.json

> Save preset: N

Gotcha! We have a simple app from CLI then I want to clean it up and change a bit of code then write a simple unit test.

Write test / change code

First, We have component HelloWorld.vue that received msg type string and show in h1 tag and sample test.

HelloWorld.vue

example.spec.js

and then run test

$yarn test:unit

Everything looks good. I want to change a bit, show “Hi, ” before text that we pass.

Let’s write a test.

then run test again

test failed then change our code to pass this test.

Our code looks like this we pass “Poseidon” and it will show “Hi, Poseidon”.

Next, We will build this app for deployment.

$yarn build

Every file we need to deploy stored in /dist.

Wanna try ? I use http-server for start a simple http server.

and it will look like this…

Now our app is ready to deploy on http server like NGINX and I want to use Containerization concept for easier deployment. I choose Docker.

To create container, we have to create a Dockerfile that uses to be a footprint of container image.

Let’s create a Dockerfile

First of all create a file

$touch Dockerfile

Let me explain some concept that would be a footprint of image.

> Before building this app, I want to test it first.

> I build app on actual environment (I didn’t build on my machine environment then copy /dist to container)

> I choose NGINX to be http server

> Avoid latest tag

> use multi-stage concept

> ignore node_modules

for best practice Dockerfile: caching/maintainability etc. click here.

I use Multi-Stage Builds concept.

Stage 1 (generator): I refer image node v.13.3-alpine as base image then install necessary packages and copy source files to container.

Stage 2 (unit-tests): after Stage 1 success, I run unit-test. Image is not created when test failed.

Stage 3 (builder): When all tests passed, I run build command to generate files.

Stage 4 : I refer image nginx with specific tag version and copy file that we build from Stage 3 to nginx root path then export port 80

$docker build -t poseidon

for create images name poseidon from Dockerfile.

$docker images

to see image that we’ve just built.

$docker run -p 8080:80 poseidon

(if you want to run in background use -d for detached mode)

Here we go! We have image that can run anywhere with docker.

check out code in my repo

Next Chapter I will explain how to deploy on AWS EC2 and Elastic Beanstalk.

Thanks you :)