Deploying a Nuxt.js App with Docker

Let’s check out how you can deploy your Nuxt.js app, including server side rendering, with Docker. You can also view this post as a video:

The versions at the time of writing are:

  • nuxt: 2.6
  • Docker 18.09.3

Nuxt.js installation

For this tutorial I’ll create a new nuxt app

npx create-nuxt-app my_app

Hitting ENTER will work for us, but you can customise your app as you wish.

? Project name my_app
? Project description My shining Nuxt.js project
? Use a custom server framework none
? Choose features to install Prettier, Axios
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name Jonathan M. Hethey
? Choose a package manager npm

  To get started:

    cd my_app
    npm run dev

  To build & start for production:

    cd my_app
    npm run build
    npm start

Now let’s verify that our app works with:

    cd my_app
    npm run dev

If we access http://localhost:3000 now we should see:

Which is exactly like it should be.

Nuxt.js Dockerfile

Next, we’re going to write the Dockerfile for your Nuxt.js app.

FROM node:11.13.0-alpine

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY . /usr/src/nuxt-app/
RUN npm install

# build necessary, even if no static files are needed,
# since it builds the server as well
RUN npm run build

# expose 5000 on container
EXPOSE 5000

# set app serving to permissive / assigned
ENV NUXT_HOST=0.0.0.0
# set app port
ENV NUXT_PORT=5000

# start the app
CMD [ "npm", "start" ]

This Dockerfile is based on the node alpine Linux image and then moves on to install git, the npm dependencies and finally builds and starts the Nuxt project.

Note that the NUXT_HOST and NUXT_PORT are set to Bind to any IP at port 5000, this might change depending on how you deploy your docker container.

My .dockerignore file contains the following to prevent using my local dependencies and builds:

node_modules
npm-debug*
.nuxt

Building your docker container can be done with, while in the repository with the Dockerfile present:

docker build -t my_app .

The output should be something along the lines of:

Removing intermediate container 7e9f607fb06e
 ---> c5b57739f412
Step 9/12 : EXPOSE 5000
 ---> Running in a326b4f25052
Removing intermediate container a326b4f25052
 ---> 796e335481fb
Step 10/12 : ENV NUXT_HOST=0.0.0.0
 ---> Running in 9aa3b799df0b
Removing intermediate container 9aa3b799df0b
 ---> 12f905ccb574
Step 11/12 : ENV NUXT_PORT=5000
 ---> Running in d9e9e111a32c
Removing intermediate container d9e9e111a32c
 ---> 0eab950732ab
Step 12/12 : CMD [ "npm", "start" ]
 ---> Running in 211496606e04
Removing intermediate container 211496606e04
 ---> 54779de7e817
Successfully built 54779de7e817
Successfully tagged my_app:latest

Next, to run the container:

docker run -it -p 5000:5000 my_app

Which should show this or similar:

   ╭────────────────────────────────────────────╮
   │                                            │
   │   Nuxt.js v2.6.1                           │
   │   Running in production mode (universal)   │
   │   Memory usage: 20.8 MB (RSS: 54.9 MB)     │
   │                                            │
   │   Listening on: http://172.17.0.2:5000     │
   │                                            │
   ╰────────────────────────────────────────────╯

and also display the app again when accessing the stated listening URL.

Summary

Setting Nuxt.js up with a Dockerfile couldn’t be much easier than it is already, so you know you have a reliable way of distributing your app after writing it.

I’m still new to Nuxt.js, but I suggest you give it a shot, since it’s amazing.

Using Vue.js with Parcel.js Tutorial

Vue.js is ever growing in popularity and even though it has a strong CLI that allows you to kick start projects, you can use other bundlers like the Parcel bundler.

The Parcel bundler excells at simplicity and only requires and entry file like index.html, yet it results in highly optimised builds with its powerful defaults.

Also Parcel, like webpack, works well with all kinds of JavaScript frameworks like React, Preact and of course Vue.

Continue reading “Using Vue.js with Parcel.js Tutorial”

Deploying a Vue.js Single Page App (including Router) with Docker

Creating single page apps has become a more frequently requested task of web developers (like me) and deployment in containers, across zones and under monitoring, seems like a natural step.

In this post we’re going to have a look at how to deploy a Vue.js SPA with docker.

Let’s start off by installing the vue-cli to create a boilerplate project. Make sure you have Docker installed as well.

Continue reading “Deploying a Vue.js Single Page App (including Router) with Docker”

A Comical Guide to Webpack, Vue.js 2, Gulp and WordPress [Tutorial]

Building WordPress themes and plugins is a big market and it gets a lot of people into web development, so I named this post like I did, but it really works for most CMS, no matter if you want to write a theme for WordPress, Drupal, GHOST, Magento or what ever else is out there. I’m going to show a simple webpack config that helps you transpile your JavaScript and develop your themes as usual.

TLDR; Here’s how to do stuff and me rambling in between. Use one of these links to get to your preferred headline:

Continue reading “A Comical Guide to Webpack, Vue.js 2, Gulp and WordPress [Tutorial]”

Custom JavaScript Trigger Functions for Google Tag Manager

In this post we’ll go through how to fire events for the Google Tag Manager with custom JavaScript functions. Most tracking can be done just by using the built in Google Tag Manager tracking, but for developers that want to debug or need events to be recorded on very specific occasions that can not be implemented with the default functionality, JavaScript is the way to go.

Continue reading “Custom JavaScript Trigger Functions for Google Tag Manager”

Building a Singe Page App with Vue.js Tutorial

In this post we’ll create a single page app with Vue.js that shows a random quote or string. We’ll start from scratch and use the default webpack-simple boilerplate provided by the creators of vue through vue-cli.

This again is part of the Making of photographerexcuses.com post series, where I walk you through all parts that were necessary to create the page.

For this tutorial you’ll need to have node.js including npm installed.

Continue reading “Building a Singe Page App with Vue.js Tutorial”