After spending many hours trawling through web results for how to achieve such a task and contacting several of my developer friends, comrades and acquaintances Im happy to say that together we have found a viable solution.

Time for the solution:

Items covered in this post include;

  1. Creating a Vue scaffold.
  2. Generating a Heroku project.
  3. This will allow you to configure and serve up your vue code in an online environment.
  4. GIT init & Heroku repository addition
  5. Push to deploy.

This tutorial also assumes that you already have VueJS installed along with the VueCLI. If you haven’t done already I suggest that you generate a project. You can do this through the CLI using either npm or yarn.

Just substitute the npm command for the yarn command instead throughout the rest of this tutorial.

npm install --global vue-cli
vue init webpack <YOUR-PROJECT-NAME-HERE>
cd <YOUR-PROJECT-NAME-HERE>
npm install
npm run dev

The last part of this step is to make sure your browser launches the default project. To do this visit link that will be provided in your terminal window.

2. Time to create your Heroku app.

Heroku is the platform of choice that will let you deploy and host your VueJS application. If you haven’t done so already you will need to have a valid Heroku login so sign up for an account here before continuing further.

Once you have completed those previous steps all that is left to do is install the Heroku CLI on your machine. To do this follow their documentation with can be found here on their website.

Let’s create our first Heroku app.

heroku create <YOUR-PROJECT-NAME-HERE>

When your project has finished compiling head over to the link provided in your terminal window, you’ll get a fresh URL to your project, i.e. https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com. Make sure you head over to the URL and see a temporary Heroku landing page there.

Lastly in order for Heroku to refrain from installing pointless additional dependancies when deploying later go ahead and set the NODE_ENV setting to production.

heroku config:set NODE_ENV=production --app <YOUR-PROJECT-NAME-HERE>

3. Create a simple server

Its time to create a simple script that will allow Heroku to serve up the VueJS assets as Vue is only a front-end library. The quickest and easiest way for us to do this is to generate a mini web server utilising Express. Use the following command to get started with installing Express.

npm install express --save

Now for the hard-code of the simple server. Its time to generate a server.js file and add it to your project root directory.

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;

The above command generates and serves up a /dist directory which is used by Heroku to create a minified version of your project. We’ll build this and then tell Heroku to run server.js so Heroku hosts up this dist directory:

npm run build

The dist directory should now be visible to you and if so now lets test out our server.js file by running it:

node server.js

Now go to http://localhost:5000 and make sure your app loads. This is the actual site Heroku will serve up.

Lastly, we’ll have to edit our start script in package.json to start our node server, as Heroku will automatically look for this script when looking for how to run a node.js app.<article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors u-marginBottom40" lang="en">

// package.json
{
  "name": "<YOUR-PROJECT-NAME-HERE>",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "start": "node server.js",   <--- EDIT THIS LINE HERE 
...

4. Git init & add to Heroku. 

Heroku allows us to push to a remote repository so we’ll first need to create our own git repository:

git init

Now let’s add our Heroku remote repository:

heroku git:remote --app <YOUR-PROJECT-NAME-HERE>

Let’s keep our generated dist directory so that we can always keep a pristine copy of what we’ve deployed to Heroku by removing dist/ from .gitigore

.DS_Store
node_modules/
dist/  <--- REMOVE THIS LINE
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

Now, most importantly, let’s add and commit our code files:

git add . && git commit -a -m "Adding files."

5. Push your code to deploy

Now all we need to deploy to Heroku is:

git push heroku master

This will take our committed code, push it to Heroku’s remote repository, run our start command in package.json which will serve up our freshly built dist directory.

If you come across any issues, you can always run heroku logs to troubleshoot.

If deployment is successful, test out your project’s URL https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com and you’re done!