Hi, I am trying to host my Ionic app on Heroku and I am having trouble. Here is what I have tried:
-
I followed Simon Grimms YouTube video “How to Deploy Your Ionic App as Website to Heroku” and I did the following steps:
-
Made a server.js file at the top level of my Ionic app. Added the following code:
var express = require('express');
var app = express();
var morgan = require('morgan');
var bodyParser = require('body-parser');
var cors = require('cors');
app.use(morgan('dev'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(cors());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(express.static('dist'));
const port = process.env.PORT || 5000;
console.log(port);
app.listen(port, () => console.log(`Server started on port ${port}`));
And installed the packages in the project obviously. Here I changed from “www” to “dist” as that is now name of the build folder.
3. Move the contents of devDependencies into dependencies in package.json
4. Made Procfile with the content: web: npm run build && npm start
5. I had already created the Heroku app, initialized repo and had everything set up
6. Standard Heroku procedure of git add ., git commit -m “”, and then git push heroku master
This builds and deploys my app, but when I go to /login (where I start) or any other route it doesn’t know what I am talking about and I get the following error:
2021-03-09T21:04:03.203199+00:00 heroku[router]: at=info method=GET path="/login" host=quiz-app-client.herokuapp.com request_id=53a308e2-72ce-40df-a758-6315af4b5399 fwd=“212.10.104.241” dyno=web.1 connect=1ms service=3ms status=404 bytes=541 protocol=https
And the same behavior happens when I run it with heroku local on the 5000 port.
Here is what my dependencies look like:
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“test:unit”: “vue-cli-service test:unit”,
“test:e2e”: “vue-cli-service test:e2e”,
“lint”: “vue-cli-service lint”
},
“dependencies”: {
“@capacitor/android”: “^2.4.5”,
“@capacitor/core”: “2.4.5”,
“@ionic/vue”: “^5.4.0”,
“@ionic/vue-router”: “^5.4.0”,
“axios”: “^0.21.1”,
“body-parser”: “^1.19.0”,
“core-js”: “^3.6.5”,
“cors”: “^2.8.5”,
“express”: “^4.17.1”,
“firebase”: “^8.2.2”,
“ionicons”: “^5.4.0”,
“mongoose”: “^5.11.11”,
“morgan”: “^1.10.0”,
“vue”: “^3.0.0-0”,
“vue-router”: “^4.0.0-0”,
“vuex”: “^4.0.0-rc.2”,
“@capacitor/cli”: “2.4.5”,
“@vue/cli-plugin-babel”: “~4.5.0”,
“@vue/cli-plugin-e2e-cypress”: “~4.5.0”,
“@vue/cli-plugin-eslint”: “~4.5.0”,
“@vue/cli-plugin-router”: “~4.5.0”,
“@vue/cli-plugin-unit-jest”: “~4.5.0”,
“@vue/cli-service”: “~4.5.0”,
“@vue/compiler-sfc”: “^3.0.0-0”,
“@vue/test-utils”: “^2.0.0-0”,
“eslint”: “^6.7.2”,
“eslint-plugin-vue”: “^7.0.0-0”,
“vue-jest”: “^5.0.0-0”
},
Everything works perfectly fine if I use ionic serve and use the 8100 port. I don’t know if it has something to do with the router in Vue and setting up routes in the server.js?
I’m hoping you can help figure out what is wrong. Any help or any attempts to help are greatly appreciated. Thank you.
1 post - 1 participant
Read full topic
