Deploying VueJS SPA on Heroku

When we are working on scalable application no one really wants to worry about infrastructure in regards of deployment all the time. We really want to focus on application development by setting up the deployment on day one! So in this post we will create and deploy VueJs app on Heroku. Heroku is a cloud platform as a service which is scalable server solution that allows us to easily manage the deployment of your applications. The reason behind its simplicity is it gives us ready runtime environment and application servers. Even we can write scripts to automate our deployments. Build of our application is performed by Heroku using our build scripts. Heroku makes the processes of deploying, configuring, scaling, tuning, and managing applications written in Ruby, Node.js, Java, Python, Clojure, Scala, Go and PHP. as simple and straightforward as possible, so that developers can focus on what’s most important: building great apps.

Heroku is web hosting services with Git enabled, so we only need to push application to Heroku using Git. When you create an application on Heroku, it associates a new Git remote, typically named heroku, with the local Git repository for your application.
Only by a git push to the heroku remote, an automated process will build the project and upload any new files to heroku with the appropriate caching headers. Thats what we will learn in this post. For this we will first create a Vue Project, later on we will move to Heroku by creating Heroku project and configure our Vue project so that Heroku can serve our app then we will push and deploy.

1) Creating Vue project
We will use vue-cli basically CLI allows us to use template suits you as the boilerplate while generating a new project using the CLI’s new command. we can create our new templet or use existing one.
Let’s Install vue-cli by using following command.

$ npm install --global vue-cli

we will setup our vue project with the nuxt starter template using vue-cli.

$ vue init nuxt-community/starter-template <YOUR-PROJECT-NAME>  
$ cd <YOUR-PROJECT-NAME> 

Install all dependency and run the application.

$ npm install
$ npm run dev

Now we can check our application on localhost:3000 in browser and check it displays the starter project.

2) Create Your Heroku App
If you haven’t already signup to Heroku you can create your new account here. To create a new app, install the install the Heroku CLI and run the following command:

$ heroku create <YOUR-PROJECT-NAME>

The output of this command returns 2 urls first one is URL to your project http://<YOUR-PROJECT-NAME>.herokuapp.com, this is the url on which your app available, and second one https://git.heroku.com/<YOUR-PROJECT-NAME>.git is the remote git repository URL; by default, the heroku create command automatically adds a git remote named “heroku” pointing at this URL.
While deployment we dont need to install unnecessary development dependencies. for that we will set NODE_ENV to production :

$ heroku config:set NODE_ENV=production --app 

3) Build our project

$ npm install express --save

Here we are installing the Express.Express.js is a web application framework for Node.js. It provides various features that make web application development fast and easy which otherwise takes more time using only Node.js.
It makes Node.js web application development fast and easy. It makes easy to serve static files and resources of your application.
Letter on we will create server.js file in 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 || 7000;
app.listen(port);
console.log('server has been started '+ port);

so What we will do? we will build our project and tell Heroku to run the server.js. You might have notice that our server.js serve dist directory. So dist stand for “distribution”, it contains the built content that will be deployed. Built content files can be directly used by others without the need to compile or minify the source code that is being reused.

$ npm run build

Now we have build and we can see dist directory in project.

We can check our server.js by running it.

$ node server.js

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

Heroku will look package.json to script to check how to run this node.js application.so now we will edit our package.json and change start script to start our node server.

 "name": "<YOUR-PROJECT-NAME>",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "node server.js", <--- UPDATE THIS LINE HERE
    ...
  },

4) Git Init and committing our project.
Heroku manages app deployments with Git, the popular version control system. Before we can deploy our app to Heroku, we need to initialize a local Git repository and commit your application code to it.

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

Our app’s code is now tracked in a local Git repository. It has not yet been pushed to any remote servers.
We have already created your Heroku app, Now we can easily add a remote to your local repository with the heroku git:remote command. All you need is your Heroku app’s name:

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

5) Push Our Project to Deploy!
To deploy your app to Heroku, you typically use the git push command to push the code from your local repository’s master branch to your heroku remote, like so:

$ git push heroku master

Use this same command whenever you want to deploy the latest committed version of your code to Heroku and run our start command in package.json which will serve up our freshly built dist directory.

Note that Heroku only deploys code that you push to the master branch of the heroku remote. Pushing code to another branch of the remote has no effect.

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

References:
How Heroku Works

Deploying with Git

Announcing vue-cli

Deploy a NUXT app to S3 in 5 minutes

 



Leave a Reply