Vue Express Node Mysql (Venomy) to Docker

Venomy my mnemonic for vue-express-node-mysql. After building several vuejs projects, I wanted a way to scaffold SPAs faster. I built this boilerplate for deployment of my apps to docker fast. This post will focus more on the deployment of the stack than on the actual application code. At the end of this post I will provide links to the github repository.

Generating the node app

Lets do quick run of how the application code was generated : The application code is made up of the server app (nodeapp) which will be hosted on production and the client vuejs app. The server app was generated with yoeman express generator. The commands to get yeoman and generate the app as follows

npm install -g yo
npm install -g generator-express
yo nodeapp

The client app was generated with using vue-cli. Commands to get vue-cli and generate the app :

npm install -g @vue/cli
vue create client

The client vue app will be making api calls to the nodeapp(server) over cors. You can client app by running

cd client
npm run serve

which will lister on port 8080. With hot reloading any changes made to the client app reflects immediately. To run the server app :

cd nodeapp
npm start ## listening on port 3000

So we have an expressjs backend and a vuejs frontend working together. Cool!! but we can’t host the 2 apps separately so we have to merge them for production.

Merging the apps for production

To prepare the app for production we are going to merge the client app into the server backend. By default when you run npm run build in the client directory it publishes into a dist folder. We are going to configure the client to publish into the public directory of our server app. In vuejs you can create a vue.config.js file to handle this kind of configurations, you learn more about this here https://cli.vuejs.org/config/#vue-config-js. Create a vue.config.js file and paste the following code :

const path = require('path');
    module.exports = {
        outputDir: path.resolve(__dirname,'../nodeapp/public'),
        devServer:{
            proxy:{
                '/api':{
                    target: 'http://localhost:3000'
                }
            }
        }
    }

The path configuration allows the client to call the server backend on a seprate port only on development machine.

Deploying the app with docker.

Now to the meat of matter. How do we dploy to a docker container. Lets create a docker file in the root of our application. Structure of project as follows:venomy directory

Dockerfile
    -nodeapp
        -app
        -config
        -public
        -app.js
        -package.json
     -client
        -public
        -src
        -package.json
     -node.dockerfile
     -docker-compose.yml

By default docker files should be name Dockerfile to be automatically loaded by docker compose but we are ninjas we can choose any name and specify that in the compose file so lets call the compose file node.dockerfile. Our docker file will contain definitions for building the node app into a container. Lets go over our node.dockerfile explaining each line in a comment. Comments in docker file begin with #

FROM node:12.18.3-alpine3.10   #using node version 12 from alpine image. Tip:alpine images and smaller in size recommended
LABEL author="brudex:Penrose"  #Specifying the author. Yours truly
    ENV NODE_ENV=production        #Setting or node environment to production. To be read in the nodeapp
    ENV PORT=3000                  #Set the port environment variable to 3000. To be read in the nodeapp
    COPY      nodeapp /var/www     #Copying the contents of nodeapp our application to /var/www in the container
    WORKDIR   /var/www/            #Set our workding directory to /var/www, Context to run subsequent commands
    RUN       npm install          #Install npm modules
    EXPOSE $PORT                   #Expose port 3000 defined above
    ENTRYPOINT ["npm", "start"]    # Run the app

Next up we create our docker-compose file. Our docker compose file will contain definitions for building our node service, adding a mysql database and a phpmyadmin server for administering our mysql database. I know phpmyadmin is old school but it works with mysql better than any web database administrator.

version: '3.3'
    services:
    node:
        container_name: nodeapp
        build:
            context: .
            dockerfile: node.dockerfile
        ports:
          - "3000:3000"
        networks:
          - nodeapp-network
        depends_on:
          - mysql
    mysql:
        image: mysql/mysql-server:5.7
        container_name: mysql
        networks:
          - nodeapp-network
        environment:
            MYSQL_DATABASE: nodeapp
            MYSQL_USER: admin
            MYSQL_PASSWORD: pass
            MYSQL_ROOT_PASSWORD: my@secret-root
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        container_name: pma
        links:
          - mysql
        external_links:
          - db_server:mysql
        ports:
          - "8183:80"
        networks:
          - nodeapp-network
        environment:
            PMA_HOST: mysql
            PMA_HOSTS: mysql
            PMA_PORT: 3306
            PMA_ARBITRARY: 1
    networks:
      nodeapp-network:
        driver: bridge

We are using version 3.3 of docker compose, every compose file must choose from a range of versions 1.0 to 3.8 more about that here. There are 3 services defined in our docker compose file : node (our node app), mysql (our database), phpmyadmin (web db admin).

node service

The node service is built from the `node.dockerfile`. The container is given a name `nodeapp`. Port 3000 is exposed to be accessible from outside the container. All 3 services is joined to nodeapp-network using a bridge driver.

mysql service

The mysql servic is the database service. It is pulled from the official mysql service version 5.7 on docker hub.
  MYSQL_DATABASE: nodeapp # Creates and initial database when the container starts
  MYSQL_USER: admin       # Creates an initial user when the database starts
  MYSQL_PASSWORD: pass    # Creates a password for the admin user
  MYSQL_ROOT_PASSWORD: my@secret-root # Create a password for the root user

phpmyadmin service

Phpmyadmin is used as the web admin service, built from the official phpmyadmin service on docker hub. It opens a login  page on launch. You can enter the followign values to login base on our mysql service configuration.
  `Server : mysql
  `Username : admin
  `Password : pass

We are now set to host our service in docker. This tutorial did not focus on installing and setting up docker but there many resources on the web that teach that. To lauch our service, on the command line in the venomy directory type :

`docker-compose up`

The will build the service and lauch all containers simultaneosly. If you have issues with your node app conncecting to the mysql service. Stop the service with control + c and rerun docker-compose up again. This is an issue with docker starting all services at once so mysql does not finish initializing before the node app tries to connect. You can do a setTimeout to launch the node server after 30 seconds to subvert this. The code for this tutorial is hosted on github : https://github.com/brudex/venomy