Deploying MEAN stack application to Heroku

Question

I am trying to deploy an application I am building with the MEAN stack to Heroku and am having some trouble. I think the issue is with the structure of my application. I have all my server code in a folder called server, which has its own package.json and src folder that contains the actual server code.

Right now I am simply trying to get Heroku to deploy the client side of the application. I am only getting an error... I know that the database and server are not running but I cannot even get past the initial displaying of the app. I have one web dyno set up to run ng serve (npm start) on the app.

If someone would be willing to look at the structure of my application and sees why I am unable to deploy to Heroku without really digging into the code, that would be much appreciated.

Here is the code

Please note that it is on the deploy branch, and this is on purpose. I do not want to push anything to the master until I am sure it is working.

Answer 1

The Angular web server targets localhost:4200 by default. That can be changed with a couple command-line options. --port accepts a port and --host accepts a host IP address.

So you could modify the ng serve script as follows: ng serve --host [host-ip] --port [port-number] --disableHostCheck . That last flag ( --disableHostCheck ) tells the dev server to bypass host checking when normally ng serve fails on anything except localhost. Terrible idea if meant for anything except private development/testing.

Another issue: Heroku runs off web dynos and from what I understand about them, they use a random port and IP each time. While the random port is stored under the variable $PORT, the IP does not seem to have a similar variable. Web dynos keep that information to themselves.

Heroku does offer this command: heroku local web . It runs your application on localhost:5000. That means ng serve --port 5000 works perfectly with this command. This should tell you how your front-end will run on Heroku. Your angular dev server will function as expected too.

For actual deployment to Heroku, use that express server of yours. Run ng build from your file system and it will spit out an index.html in the dist folder. This file holds your entire front-end application. You can then upload that file into your browser from the server.

For express that usually breaks down into:

app.get('*', function(req, res) {
    res.sendFile('path/to/index.html');
});

Hopefully this helps! Let me know if I missed the mark anywhere.