Vue-cli: Launch app generated by vue-cli on heroku

[piecioshka]

Hello there! ✋

I'am try launch on Heroku basic application which was generated by vue-cli.
And I occur error. Below I put step by step what I doing:

_Application which should works: https://is-vue-works-on-heroku.herokuapp.com/_

1) I generate application by command:

$ vue-cli init webpack is-vue-works-on-heroku

? Generate project in current directory? Yes
? Project name is-vue-works-on-heroku
? Project description A Vue.js project
? Author Piotr Kowalski <XXX>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "is-vue-works-on-heroku".

   To get started:

     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

2) Next create app on Heroku by command:

$ heroku create is-vue-works-on-heroku

3) Next connect local repository with Heroku:

$ heroku git:remote -a is-vue-works-on-heroku

4) And try deploy my app by command:

$ git push heroku master

Add this error occurs

/tmp/is-vue-works-on-heroku [master] > git push heroku master
Counting objects: 52, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (43/43), done.
Writing objects: 100% (52/52), 23.09 KiB | 0 bytes/s, done.
Total 52 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  >= 4.0.0
remote:        engines.npm (package.json):   >= 3.0.0
remote:
remote:        Resolving node version >= 4.0.0...
remote:        Downloading and installing node 9.1.0...
remote:        Bootstrapping npm >= 3.0.0 (replacing 5.5.1)...
remote:        npm 5.5.1 installed
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        WARNING: You are likely using a version of node-tar or npm that is incompatible with this version of Node.js.
remote:        Please use either the version of npm that is bundled with Node.js, or a version of npm (> 5.5.1 or < 5.4.0) or node-tar (> 4.0.1) that is compatible with Node.js 9 and above.
remote:        /tmp/build_ab84e527f577e9a1144aa55221ba2c08/.heroku/node/bin/node[236]: ../src/node_zlib.cc:437:static void node::{anonymous}::ZCtx::Init(const v8::FunctionCallbackInfo<v8::Value>&): Assertion `args.Length() == 7 && "init(windowBits, level, memLevel, strategy, writeResult, writeCallback," " dictionary)"' failed.
remote:        1: node::Abort() [npm]
remote:        2: node::Assert(char const* const (*) [4]) [npm]
remote:        3: 0x12530bf [npm]
remote:        4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) [npm]
remote:        5: 0xb7547c [npm]
remote:        6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*) [npm]
remote:        7: 0x333f2a4842fd
remote: /app/tmp/buildpacks/19862b8792e84bd8421ded4660b92dfd1c41d92e19ac0b38c90301adc8ae3e0bd512fa01998af18fc2f0d31a157e9c82e8fdceba1a05e5d29adb8dc2bfaf08e1/lib/dependencies.sh: line 85:   236 Aborted                 npm install --unsafe-perm --userconfig $build_dir/.npmrc 2>&1
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Dangerous semver range (>) in engines.node
remote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !   Push rejected to is-vue-works-on-heroku.
remote:
To https://git.heroku.com/is-vue-works-on-heroku.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/is-vue-works-on-heroku.git'

5) So I setup Node.js & npm versions to that:

diff --git a/package.json b/package.json
index f1a7033..6c4649d 100644
--- a/package.json
+++ b/package.json
@@ -85,8 +85,8 @@
     "webpack-merge": "^4.1.0"
   },
   "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
+    "node": "8.x",
+    "npm": "5.x"
   },
   "browserslist": [
     "> 1%",

6) And after next deploy which I made by command:

$ git push heroku master

Deploy was finished successful:

Counting objects: 55, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (46/46), done.
Writing objects: 100% (55/55), 24.01 KiB | 0 bytes/s, done.
Total 55 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  8.x
remote:        engines.npm (package.json):   5.x
remote:
remote:        Resolving node version 8.x...
remote:        Downloading and installing node 8.9.1...
remote:        Bootstrapping npm 5.x (replacing 5.5.1)...
remote:        npm 5.5.1 installed
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        added 2 packages in 0.622s
remote:
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 18.1M
remote: -----> Launching...
remote:        Released v3
remote:        https://is-vue-works-on-heroku.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/is-vue-works-on-heroku.git
 * [new branch]      master -> master

But in logs I see that application didn't start:

2017-11-12T08:15:01.067551+00:00 heroku[web.1]: State changed from crashed to starting
2017-11-12T08:15:04.872324+00:00 heroku[web.1]: Starting process with command `npm start`
2017-11-12T08:15:06.529406+00:00 app[web.1]:
2017-11-12T08:15:06.529420+00:00 app[web.1]: > [email protected] start /app
2017-11-12T08:15:06.529421+00:00 app[web.1]: > npm run dev
2017-11-12T08:15:06.529421+00:00 app[web.1]:
2017-11-12T08:15:06.801525+00:00 app[web.1]:
2017-11-12T08:15:06.801543+00:00 app[web.1]: > [email protected] dev /app
2017-11-12T08:15:06.801545+00:00 app[web.1]: > node build/dev-server.js
2017-11-12T08:15:06.801545+00:00 app[web.1]:
2017-11-12T08:15:08.000985+00:00 app[web.1]: > Starting dev server...
2017-11-12T08:15:09.827618+00:00 app[web.1]:  ERROR  Failed to compile with 2 errors08:15:09
2017-11-12T08:15:09.827697+00:00 app[web.1]:
2017-11-12T08:15:09.828511+00:00 app[web.1]:  error  in ./src/App.vue
2017-11-12T08:15:09.828568+00:00 app[web.1]:
2017-11-12T08:15:09.828616+00:00 app[web.1]: Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
2017-11-12T08:15:09.828617+00:00 app[web.1]:     at Object.pitch (/app/node_modules/extract-text-webpack-plugin/dist/loader.js:57:11)
2017-11-12T08:15:09.828683+00:00 app[web.1]:
2017-11-12T08:15:09.828684+00:00 app[web.1]:  @ ./src/App.vue 2:2-376
2017-11-12T08:15:09.828684+00:00 app[web.1]:  @ ./src/main.js
2017-11-12T08:15:09.828684+00:00 app[web.1]:  @ multi ./build/dev-client ./src/main.js
2017-11-12T08:15:09.828729+00:00 app[web.1]:
2017-11-12T08:15:09.828773+00:00 app[web.1]:  error  in ./src/components/HelloWorld.vue
2017-11-12T08:15:09.828829+00:00 app[web.1]:
2017-11-12T08:15:09.828861+00:00 app[web.1]: Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
2017-11-12T08:15:09.828862+00:00 app[web.1]:     at Object.pitch (/app/node_modules/extract-text-webpack-plugin/dist/loader.js:57:11)
2017-11-12T08:15:09.828904+00:00 app[web.1]:
2017-11-12T08:15:09.828904+00:00 app[web.1]:  @ ./src/components/HelloWorld.vue 2:2-391
2017-11-12T08:15:09.828905+00:00 app[web.1]:  @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
2017-11-12T08:15:09.828905+00:00 app[web.1]:  @ ./src/App.vue
2017-11-12T08:15:09.828906+00:00 app[web.1]:  @ ./src/main.js
2017-11-12T08:15:09.828906+00:00 app[web.1]:  @ multi ./build/dev-client ./src/main.js
2017-11-12T08:15:09.828946+00:00 app[web.1]:
2017-11-12T08:15:09.861460+00:00 app[web.1]: > Listening at http://localhost:25671
2017-11-12T08:15:09.861462+00:00 app[web.1]:
2017-11-12T08:15:09.964040+00:00 app[web.1]: (node:29) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
2017-11-12T08:15:09.964107+00:00 app[web.1]: (node:29) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
2017-11-12T08:15:10.193937+00:00 heroku[web.1]: State changed from starting to up

What should I do, to launch vue-cli app on Heroku? 😢

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.

---

Unless you have a node server running, you don't need heroku, it's better to have a static hosting service like firebase or surge.sh. What you need to do is npm run build and deploy the dist folder. You can even try running server dist (npm i -g server) to test if it's working correctly