Topic: Can't Deploy Vue App - production dependencies must match devDependencies?
I'm trying to deploy my app to Heroku to test live while I continue to build locally as well, and I will eventually launch it and continue to add features as time goes on.
Whenever I try and deploy the app to Heroku, I got the following errors:
Dec 13 07:06:41 - protected-reef-57448 heroku/router: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=protected-reef-57448.herokuapp.com request_id=438d11d7-b6a0-49b1-850c-cd81aef8284f fwd="86.156.253.181" dyno= connect= service= status=503 bytes= protocol=https
Dec 13 07:06:45 - protected-reef-57448 heroku/router: at=error code=H10 desc="App crashed" method=GET path="/" host=protected-reef-57448.herokuapp.com request_id=733f1457-7ea0-428a-8b4f-bb8f996b2a88 fwd="86.156.253.181" dyno= connect= service= status=503 bytes= protocol=https
I've downloaded a new version from scratch, set up a Heroku remote, built into dist without making any edits, pushed to Heroku, tried to launch and still get the same errors. Others have had the same issue when deploying to Heroku, but all suggestions suggest updating the code (see here for an example of a fix).
However, I am not sure where to put this code!! Any help would be appreciated.
Cheers :)
EDIT - It seems that the VueJs MDBootstrap package doesn't come with a production server build - the build.js doesn't build a production server at all, so it seems that the production dependencies must match the devDependencies in order for the app to run, which doesn't seem right?
Can this be looked at ASAP please?
Kind regards
Craig Donovan
{
"name": "whatevernameisneeded",
"version": "1.0.0",
"description": "Website using MDBoostrap and Vue.js",
"author": "Craig Donovan",
"private": true,
"scripts": {
"postinstall": "npm install express",
"start": "node server.js"
},
"dependencies": {
"bootstrap": "4.0.0-beta.2",
"bootstrap-vue": "^1.0.2",
"classnames": "^2.2.5",
"each-async": "^1.1.1",
"express": "^4.14.1",
"font-awesome": "^4.7.0",
"indent-string": "^3.2.0",
"mdbootstrap": "^4.4.3",
"npm": "^5.5.1",
"pug": "^2.0.0-rc.4",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
I have also added in a server.js:
// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
var app = express();
var port = process.env.PORT || 5000
app.listen(port);
console.log('starting project at ' + port);
app.engine('pug', require('pug').__express);
app.set('views', '/');
app.set('view engine', 'pug');
//Look for statics first
app.use(serveStatic(path.join(__dirname, '/')));
//Return the index for any other GET request
app.get('/*', function (req, res) {
res.sendFile('index.html', {root: path.join(__dirname, '/')});
});
This does work locally if I run from the dist folder, but not on Heroku, so I've re-opened the ticket with them. Will keep you posted.
Feel free to add the above into the github if needed though for others to use!
Kind regards
Craig Donovan
Mikołaj Smoleński staff commented 6 years ago
Thanks for that helpfull news. Kind RegardsCraig Donovan free commented 6 years ago
I merged the above code into the package.json file in the root and moved the server.js into the root, then changed the Procfile required by Heroku to point to the server.js file and it worked. So all sorted at last.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Nithya Nagasekar free commented 6 years ago
Hi Craig I'm too facing that same problem when deployed this into Heroku. Even after I tried your solution Like created the server.js file with your content in the root directory. Also merged the package.json file in root based on you suggestion. When I run locally, It's start with server.js & open this port in local http://localhost:5000/. There Vue.js doesn't work & just display the normal content of index.html page. Another important thing Still I'm getting that same application error while run in heroku. Can you help me out plzzz? Here is my build logs in Heroku: -----> Node.js app detected -----> Creating runtime environment NPM_CONFIG_LOGLEVEL=error NODE_VERBOSE=false NODE_ENV=production NODE_MODULES_CACHE=true -----> Installing binaries engines.node (package.json): >= 4.0.0 engines.npm (package.json): >= 3.0.0 Resolving node version >= 4.0.0... Downloading and installing node 9.8.0... Bootstrapping npm >= 3.0.0 (replacing 5.6.0)... npm 5.7.1 installed -----> Restoring cache Loading 2 from cacheDirectories (default): - node_modules (exists - skipping) - bower_components (not cached - skipping) -----> Building dependencies Prebuild detected (node_modules already exists) Rebuilding any native modules express@4.16.3 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/express pug@2.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug pug-code-gen@2.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-code-gen constantinople@3.1.2 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/constantinople @types/babel-types@7.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/@types/babel-types @types/babylon@6.16.2 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/@types/babylon doctypes@1.1.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/doctypes js-stringify@1.0.2 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/js-stringify pug-attrs@2.0.3 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-attrs pug-runtime@2.0.4 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-runtime pug-error@1.3.2 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-error void-elements@2.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/void-elements with@5.1.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/with acorn@3.3.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/with/node_modules/acorn acorn-globals@3.1.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/acorn-globals acorn@4.0.13 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/acorn-globals/node_modules/acorn pug-filters@3.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters clean-css@3.4.28 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters/node_modules/clean-css commander@2.8.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters/node_modules/commander graceful-readlink@1.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/graceful-readlink source-map@0.4.4 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters/node_modules/source-map amdefine@1.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/amdefine jstransformer@1.0.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/jstransformer pug-walk@1.1.7 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-walk uglify-js@2.8.29 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters/node_modules/uglify-js source-map@0.5.7 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters/node_modules/uglify-js/node_modules/source-map yargs@3.10.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-filters/node_modules/yargs pug-lexer@4.0.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-lexer character-parser@2.2.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/character-parser is-expression@3.0.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/is-expression acorn@4.0.13 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/is-expression/node_modules/acorn pug-linker@3.0.5 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-linker pug-load@2.0.11 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-load pug-parser@5.0.0 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-parser token-stream@0.0.1 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/token-stream pug-strip-comments@1.0.3 /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/pug-strip-comments Installing any new modules (package.json) > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js > bootstrap-vue@1.5.1 postinstall /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986/node_modules/bootstrap-vue > opencollective postinstall || exit 0 *** Thank you for using bootstrap-vue! *** Please consider donating to our open collective to help us maintain this package. https://opencollective.com/bootstrap-vue/donate *** > vu-dev@1.0.0 postinstall /tmp/build_01265c6699303a9636bcb8cc01dbef21/niti15-vue-mb-39af986 > npm install express removed 3 packages in 13.915s added 1684 packages from 1306 contributors in 42.593s -----> Caching build Clearing previous node cache Saving 2 cacheDirectories (default): - node_modules - bower_components (nothing to cache) -----> Pruning devDependencies added 3 packages from 1 contributor and removed 1067 packages in 14.851s -----> Build succeeded! -----> Discovering process types Procfile declares types -> web -----> Compressing... Done: 34.3M -----> Launching... Released v8 https://cryptic-lowlands-12457.herokuapp.com/ deployed to Heroku