How to deploy a Vue.js 2.0 with PWA project on Heroku
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
static
.gitignore
.htaccess
LICENSE
README.md
index.html
lighthouse-score.png
package-lock.json
package.json
server.js
service-worker.js

README.md

How to deploy a Vue.js 2.0 with PWA project on Heroku

Lighthouse score:

Demo

Features

  • http redirects to https
  • Hashbang(#) removed from url

Getting Started

The source code used in this project can be found at https://github.com/ijklim/pingshuai.

The files in this project are produced from running the following command in the source folder.

npm run build

This project contains files from the dist folder after the build command.

Files that are NOT generated by the npm run build command:

  • LICENSE - github standard MIT license
  • lighthouse-score.png - Screenshot for README
  • package.json - Contains additional packages needed for Heroku
  • README.md - The file you are reading now
  • server.js - Express server deployment script
  • .gitignore - git version control ignore file
  • .htaccess - Configuration file for use on web servers

Note: The LICENSE, lighthouse-score.png, README.md and .gitignore files are not required for the Vue.js app to work. Skipping them during upload is acceptable.

Step #1: Create server.js

server.js:

var express = require("express");
var serveStatic = require("serve-static");
var history = require("connect-history-api-fallback");

var app = express();

var https_redirect = function(req, res, next) {
  if (process.env.NODE_ENV === "production") {
    if (req.headers["x-forwarded-proto"] != "https") {
      return res.redirect("https://" + req.headers.host + req.url);
    } else {
      return next();
    }
  } else {
    return next();
  }
};

app.use(https_redirect);
app.use(history());
app.use(serveStatic(__dirname));

var port = process.env.PORT || 5000;
app.listen(port);

console.log("server started " + port);

Step #2: Create package.json

npm init
npm install express --save
npm install connect-history-api-fallback --save

Step #3: Set up Heroku

  1. Sign in to https://heroku.com
  2. Select New > Create new app to create a new app
  3. Enter an App name (e.g. in my case pingshuai)
  4. Install the Heroku CLI
npm install -g heroku-cli
  1. Login to Heroku
heroku login

Note: If the heroku command is throwing an error (e.g. incompatible Node version), other methods of installing Heroku CLI can be found here.

Step #4: Set up git

Note: Most likely git version control has already been used on the main project. By default it does not include the dist folder, and it should be kept that way. Here we are setting up git within the dist folder.

git init
heroku git:remote -a pingshuai
git add .
git commit -am "Create Vue project"
git push heroku master

That's it. Your Vue site is now live at https://<AppName>.herokuapp.com

Author

License

This project is licensed under the MIT License - see the LICENSE file for details