0👍
Heroku requires that you set up an app server (HTTP server) to serve you static files. weekly-todo-vue doesn’t do this.
I can offer 3 solutions: add a web server and change build process, extract the app build and deploy it separately with a server, use webpack-dev-server as your server on Heroku.
Add a server and tweak the build process
Move build into postinstall script
// package.json
scripts: {
// omited ...
"postinstall": "yarn run build",
// omitted...
},
Change start npm script
// package.json
scripts: {
// omited ...
"start": "node server.js",
// omitted...
},
Some packages should be moved from devDependencies to dependencies since we going to build an app on Heroku and Heroku did this in the production environment.
This is quite tedious so you can move devDependencies into dependencies. But it will add unnecessary deps. into your build.
Install Express.JS dependency:
$ yarn add express
In the root of the repo create server.js file with the app server code that will serve the app static files:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
Commit all the changes and push it to Heroku
$ git push heroku master
Extract build
Make build from the repo:
$ yarn run build
Create new repo and copy the dist directory. Don’t forgot to add node_modules/ into .gitignore.
Init new package.json:
$ npm init -y
Add start npm script;
// package.json
scripts: {
"start": "node server.js",
// omitted...
},
Install Express.JS dependency:
$ yarn add express
In the root of the repo create server.js file with the app server code that will serve the app static files, same server as in previous solution:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
You should have the project structure like this:
.
├── dist
│ ├── index.html
│ └── static
│ ├── css
│ │ ├── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css
│ │ └── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css.map
│ ├── fonts
│ │ ├── icons.674f50d.eot
│ │ ├── icons.af7ae50.woff2
│ │ ├── icons.b06871f.ttf
│ │ └── icons.fee66e7.woff
│ ├── img
│ │ ├── flags.9c74e17.png
│ │ └── icons.912ec66.svg
│ └── js
│ ├── app.88670f817a4b11e940e6.js
│ ├── app.88670f817a4b11e940e6.js.map
│ ├── manifest.304e67c5c14ed63ee160.js
│ ├── manifest.304e67c5c14ed63ee160.js.map
│ ├── vendor.434b5723496264d2da17.js
│ └── vendor.434b5723496264d2da17.js.mapo
├── package-lock.json
├── package.json
└── server.js
Commit the code and push it to Heroku.
Use webpack-dev-server
As stated here you can use webpack-dev-server to serve your app. But this is highly not recommended for production applications.
Add webpack dev server config to webpack.prod.conf.js:
// ..omitted
devtool: config.build.productionSourceMap ? config.build.devtool : false,
+ devServer: {
+ disableHostCheck: true,
+ clientLogLevel: 'warning',
+ historyApiFallback: true,
+ hot: false,
+ host: '0.0.0.0',
+ port: process.env.PORT || config.dev.port,
+ open: false,
+ overlay: false,
+ publicPath: config.dev.assetsPublicPath,
+ proxy: config.dev.proxyTable,
+ quiet: true // necessary for FriendlyErrorsPlugin
+ },
output: {
// ..omitted
Change start npm script:
// package.json
scripts: {
// omited ...
"start": "webpack-dev-server --port $PORT --host 0.0.0.0 --config build/webpack.prod.conf.js",
// omitted...
},
Some packages should be moved from devDependencies to dependencies since we going to build an app on Heroku and Heroku did this in the production environment.
This is quite tedious so you can move devDependencies into dependencies. But it will add unnecessary deps. into your build.
Commit the change and push to Heroku.
Node/npm version issue with Heroku
Heroku loves strict engine specs in package.json. I would recommend that you specify explicit versions of Node.JS and NPM:
"engines": {
- "node": ">= 8.0.0",
- "npm": ">= 5.0.0"
+ "node": "8.11.4",
+ "npm": "5.6.0"
},