Deploying a MEAN stack app to Heroku not loading any files?

Question

I'm setting up my web app in progress to be deployed onto Heroku. The builds succeed, but no files are loaded and I'm met with a blank page and a cannot GET/ error message.

I have tried both of the guides/solutions below but have found no luck with either of them. https://medium.com/@BaaniLeen/deploying-mean-stack-app-to-heroku-tips-and-tricks-5bd43a967f8c

https://devcenter.heroku.com/articles/mean-apps-restful-api

I have tried changing around my PROCFILE, my Server.js and my /bin/www.js file to try and get heroku to actually load the angular side of things, but to no avail.

https://www.github.com/jaredana/crud there is a link to the repo, which is up to date with my local files, so the file structure is pretty much the same minus my .gitignores

Here is an image of my last "heroku logs --tail" https://imgur.com/btdp0sE

I have also included the lines in my app.js file(where express() is declared):

var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

because I know that when ng build is ran, it builds your angular app into the /dist/ directory.

All of this works on my local machine. I run npm start on the angular side which would normally run ng serve --proxy-config proxy.config.json , and I ran npm start on the node side of things to call node ./bin/www . I have them set to node ./node/server.js for the angular side "start" script and node ./node/bin/www on the node side "start" script as well as my procfile containing web: npm start

I clearly need to change what is being ran by heroku as the app is being deployed so that not only the node side of things get initialized. But I'm having a hard time clarifying what needs to be loaded by heroku and what doesn't

If more information is needed or more pictures I'd be happy to provide since it doesn't seem I can find an answer very easily. Thanks for your time.

Answer 1

I'm not sure which files you actually use, because your repo is different from what you you wrote here.

You don't need a Procfile if you write "npm start" in it, npm start will be used by heroku if you don't have a Procfile. So write the correct start command in the Procfile, like:

web: node ./node/server.js"

Then you can use the "npm start" for your development machine.

The obvious mistake is the path to your dist-folder, because the express-server is starting according to the logs. If you start your express server with the command we see in the logs:

node ./node/server.js"

You need a path like "../dist/" because you started the express-server in the node-folder and relative from that you need to get out of it, because the dist-folder will be on the same level as the node-folder.

var distDir = "../dist/";
app.use(express.static(distDir));

Another problem could be the postinstall script. This script will be run after npm install on heroku, but before npm run build. Replace the postinstall with heroku-postbuild. This will replace the "npm build" on heroku.

"postinstall": "ng build --output-path dist --prod" // replace that line with the next
"heroku-postbuild": "ng build --output-path dist --prod"