Vue + Vuetify + Nuxt + Heroku

I want to learn how to build a SSR front-end application in Vue and have been playing around with Vuetify, Nuxt.js and Heroku. These are the steps I followed to get the Vuetify Nuxt.js starter template deployed to Heroku.

Create GitHub repository

I created a GitHub repository and cloned it to a directory on my local computer.

Initialise starter template

• Before you begin make sure you have Node.js and vue-cli installed
• Open a command prompt and change into the directory of your git project
• Follow the instructions on the vuetify/nuxt github project

Install Heroku CLI

The Heroku Command Line Interface (CLI), formerly known as the Heroku Toolbelt, is a tool for creating and managing Heroku apps from the command line / shell of various operating systems.

Follow these instructions to install the Heroku CLI to your computer. 

Create an Heroku App

Heroku manages app deployments with Git. You can create an Heroku App online or through the Command Line Interface with or without an existing Git repository.

Create an Heroku App without an existing Git repository

Follow these instructions to create your Heroku app.

Create an Heroku App with an existing Git repository

Follow these instructions to create your Heroku app from an existing Git repository.

Heroku Deployment Configuration

I followed the steps outlined in the Nuxt.js support web page for Heroku apps. Although it didn't quite work on deployment as npm start was not building the application. I changed the package.json script section to build and then run on start. Not sure if this is correct but it worked for me.

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt build && nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run build"
  }

But I made sure to run all the other commands mentioned in their instructions:

 $ heroku config:set NPM_CONFIG_PRODUCTION=false
 Setting NPM_CONFIG_PRODUCTION and restarting my-app-123... done, v3
 NPM_CONFIG_PRODUCTION: false

 $ heroku config:set HOST=0.0.0.0
 Setting HOST and restarting my-app-123... done, v4
 HOST: 0.0.0.0

 $ heroku config:set NODE_ENV=production
 Setting NODE_ENV and restarting my-app-123... done, v5
 NODE_ENV: production

Heroku Deployment 

To deploy your application (via Git) to Heroku you should run the following command:

• git push heroku master

If you want to deploy code to Heroku from a non-master branch of your local repository use the following syntax to ensure it is pushed to the remote’s master branch, example:

• git push heroku mybranch:master

Heroku apps expect the app directory structure at the root of the repository. If your app is inside a subdirectory in your repository, it won’t run when pushed to Heroku. Git allows you to push a subtree of your repository, example:

 git push heroku `git subtree split --prefix appsubdirectory mybranch`:master

I got the following error when doing this:

error: unable to push to unqualified destination: master The destination refspec neither matches an existing ref on the remote nor begins with refs/, and we are unable to guess a prefix based on the source ref.

In order for me to resolve this I changed the push command to the following (this only needed to be done once):

 git push heroku `git subtree split --prefix appsubdirectory mybranch`:refs/heads/master

Heroku Local

In order to troubleshoot your application you can use the following command to run locally:

• heroku local

Node.js Support

The following page has some useful information for Node.js application running on Heroku. 

Example would be to always specify the node version as outlined in this page

Vue + Webpack + Bootstrap

I created a simple Vue, Webpack and Bootstrap template to showcase how to integrate Bootstrap with Vue using Webpack.

Dependencies 

Required Dependencies

• bootstrap
• css-loader
• file-loader

Optional Dependencies 

• jquery
• popper.js

 package.js

{
  "name": "vue-webpack-bootstrap-template",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap": "4.0.0-beta",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Webpack Configuration

Loaders

The following loaders need to be added to the webpack.config.js

 
 {
   test: /\.(png|jpg|gif|svg)$/,
   loader: 'file-loader',
   options: {
     name: '[name].[ext]?[hash]'
   }
 },
 {
   test: /\.css$/,
   loaders: ['style-loader','css-loader']
 },
 {
   test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=application/font-woff'
 },
 {
   test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
 },
 {
   test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader'
 }

Provide Plugin

If you optionally want to use Bootstrap for the components that make use of JQuery and Popper.js you will need to add the following plugin:

 new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
  'window.jQuery': 'jquery',
   Popper: ['popper.js', 'default'],
   // In case you imported plugins individually, you must also require them here:
   Util: "exports-loader?Util!bootstrap/js/dist/util",
   Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
 })

Main.js

require('bootstrap/dist/css/bootstrap.css')

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap'

new Vue({
  el: '#app',
  render: h => h(App)
})

BootstrapVue

Instead of doing the above you could use BootstrapVue dependency that is a library that creates Vue Bootstrap components. The following GitHub project is a simple bootstrap-vue template.