Problem hosting Ionic app on Heroku (Ionic Vue)

Hi, I am trying to host my Ionic app on Heroku and I am having trouble. Here is what I have tried:

  1. I followed Simon Grimms YouTube video “How to Deploy Your Ionic App as Website to Heroku” and I did the following steps:

  2. 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”,
“start”: “node server.js”,
“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.

take a look at this project here, I just tested it with heroku and it works/ran fine

this is my index.js

/* eslint-disable @typescript-eslint/no-var-requires */
const servestatic = require('serve-static')
const path = require('path')
const express = require('express')
const port = process.env.PORT || 3000;
const app = express();
app.use(servestatic(path.join(path.resolve(), 'dist')));
app.listen(port, () => {console.log("API server started on " + port);});

I only made one change to my package.json

"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",
  "start": "node index.js" //<== ADDED
},
1 Like

Hi Aaron, thank you for taking the time to help me. I love your YouTube videos and am a subscriber. They are very helpful. I reverted the changes I had made and tried your approach. I replaced my server.js code with the stuff in your index.js and added the start script in my package.json, but I still get the same thing:

2021-03-10T13:41:38.020143+00:00 heroku[router]: at=info method=GET path="/login" host=quiz-app-client.herokuapp.com request_id=06337437-a206-4094-aeaf-e181793c24c6 fwd=“212.10.104.241” dyno=web.1 connect=1ms service=2ms status=404 bytes=388 protocol=https

I cloned your repo and tried deploying it to Heroku and worked perfectly fine.

you have your client and server set as completely seperate projects, not sure if that is what you are looking to really do.

When i run your client project locally with the following commands, it works fine

cd MEVN\ Stack\,\ Ionic\ Framework\,\ Firebase\ Auth/QuizAppClient/
npm install
npm run build
heroku local

Yeah this is intentional. The server project runs in Heroku also. You’re saying it works for you to run:

  1. npm install
  2. npm run build
  3. heroku local

And then going to the localhost port 5000 and running the app for the client project? Once again thank you so much for your help.

Thank you so much, I had same issue,

based on this solution, I’ve added index.js to root of my app, and added “start”: “node index.js” //<== ADDED to package.json AND “express”: “^4.17.1”,
“serve-static”: “^1.14.1”, as dependencies in compare of your github repository.