I'm trying to publish my Quasar app on Heroku. I'm using Express to serve my front.
I succeed to publish my app on Heroku with that link: https://quasar.dev/quasar-cli/developing-spa/deploying. My application is deployed on https://coronavirus-statistics-app.herokuapp.com/ but when I try to access it, I got an error "Cannot GET /".
My server file:
const
express = require('express'),
serveStatic = require('serve-static'),
history = require('connect-history-api-fallback'),
port = process.env.PORT || 5000
const app = express()
app.use(history())
app.use(serveStatic(__dirname + '/dist/spa'))
app.listen(port)
In local, I can access to my application at http://localhost:5000/#/home and my different views http://localhost:5000/#/table, http://localhost:5000/#/about ...
My log from Heroku deployement:
-----> Building on the Heroku-20 stack
-----> 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): >= 10.18.1
engines.npm (package.json): >= 6.13.4
engines.yarn (package.json): >= 1.21.1
Resolving node version >= 10.18.1...
Downloading and installing node 15.11.0...
Bootstrapping npm >= 6.13.4 (replacing 7.6.0)...
npm >= 6.13.4 installed
Resolving yarn version >= 1.21.1...
Downloading and installing yarn (1.22.10)
Installed yarn 1.22.10
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules
added 1377 packages, and audited 1378 packages in 43s
1 high severity vulnerability
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build
Detected both "build" and "heroku-postbuild" scripts
Running heroku-postbuild
> [email protected] heroku-postbuild
> yarn && yarn build
yarn install v1.22.10
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
warning [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
warning @quasar/app > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @quasar/app > chokidar > [email protected]: "Please update to latest v2.3 or v2.2"
warning @quasar/app > webpack-dev-server > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @quasar/app > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @quasar/app > stylus > css-parse > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @quasar/app > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @quasar/app > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
[3/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
Done in 35.33s.
yarn run v1.22.10
$ yarn
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
success Already up-to-date.
Done in 1.44s.
-----> Caching build
- node_modules
-----> Pruning devDependencies
added 7 packages, removed 6 packages, and audited 70 packages in 4s
1 high severity vulnerability
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 44.9M
-----> Launching...
Released v8
https://coronavirus-statistics-app.herokuapp.com/ deployed to Heroku
My logs from Heroku when I try to reach my app:
2021-03-07T10:10:06.024914+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/dist/spa/index.html'
2021-03-07T10:10:06.025410+00:00 heroku[router]: at=info method=GET path="/" host=coronavirus-statistics-app.herokuapp.com request_id=86909de1-ee05-4c15-ae11-16a2f0bab822 fwd="183.182.112.106" dyno=web.1 connect=0ms service=8ms status=404 bytes=380 protocol=https
How to solve the problem? Thanks for your help 🙂
You need to server the index.html file from your express server.
const
express = require('express'),
path = require('path'),
serveStatic = require('serve-static'),
history = require('connect-history-api-fallback'),
port = process.env.PORT || 5000
const app = express()
app.use(history())
app.use(serveStatic(__dirname + '/dist/spa'))
app.get('/*', function(req,res) {
//res.sendFile(path.join(__dirname+'/dist/spa/index.html'));
res.sendFile(path.join(__dirname, 'dist/spa', 'index.html'));
});
app.listen(port);
Make sure 'dist/spa' folder exist in Heroku and you've haven't added it to your .gitignore file or haven't checked it into git.
Finally, the reason ENOENT says /app/dist is just because your root/home directory on Heroku is /app. Never build apps that are locked into an absolute file structure; just use relative paths as below.
res.sendFile(path.join(__dirname, 'dist/spa', 'index.html'));
OR
res.sendFile('index.html', {root: path.join(__dirname, 'dist/spa')});
Note: __dirname returns the directory that the currently executing script is in.