MDB Vue - Frequently Asked Questions

It is fairly simple. If you are using yarn, just replace npm install with yarn add:

1. First, install Vue, if you have not already.

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

2. Create your Heroku app

heroku create <YOUR-PROJECT-NAME-HERE>

Now, an URL to your project should be created (say, https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com. To ensure that the service does not install any unnecessary dependencies, toggle the NODE_ENV to production:

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

3. Create a server.js: download Express.js:

npm install express --save

...and add a server.js file to project's 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;
              app.listen(port);
              console.log('server started '+ port);

The app will be served from the /dist directory, which gets populated after build process is finished:

npm run build

To see how things stand, type:

node server.js

You should see your project being served at http://localhost:5000. Heroku starts the apps using the start script in project's package.json, so be sure to replace the original one with server.js:

// 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. Create a git repository and set Heroku as its remote:

git init

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

Remove the /dist directory from your .gitignore file and commit the changes:

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

5. Push it and hack on!

git push heroku master

Now, your project should be available at https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com. Create, tweak, commit and have fun! In case of deployment issues, please be sure to check the platform's CLI command:

heroku logs