Deploy MEAN App with Heroku

Heroku (Platform as a service)

Based on previous posts for creating Restful APIs using MEAN Stack + using Angular / Angular2 for front-end development and usage of MongoDB for data storage, we have finally developed a working application that is ready to deploy.

For this testing purpose, I developed small app targeting to small kids playing and getting familiar with different objects.

Tools/Services we used to deploy this app:

  1. GitHub: I uploaded the entire project at GitHub for purpose of version control as well as securing the code. Its also a requirement from Heroku
  2. Heroku: It directly communicates with GitHub or relates services to deploy code. Instead of GitHub, you may use Heroku Git or Dropbox.
  3. mLab: MongoDB service is hosted at mLab and application communicates with it directly using provided protocols.
  • Step1: Create an account on Heroku (it can be free or paid one)
  • Step 2: Create an account on GitHub (paid account in case of private repository). We can use public repository for test purpose.
  • Step3: Create account at mLab, again it can be free or paid depending on nature of work
  • Step4: Create DB, user and password at mLab account. Copy the connection string.
  • Step 5: Change the DB Settings in app using information copied at Step4 and provide to application.
  • Step 6: ng build angular app and it should create files in public/dist directory as per angular-cli json file
  • Step 7: Create empty repository at GitHub and populate it with project using instructions in previous post. This step is only required if there is no repository already created.
  • Step 8: Connect Heroku with GitHub and provide information for above defined repository.
  • Step 9: Deploy the selected branch and Test it. Website should be working now.

Possible Error:

There is possibility of one error like: “Web Process failed to bind to $PORT within 60 seconds“, this error usually happens because you have defined a custom port for example 4001 is the port you used in your development environment. In app.js or server.js as per your files structure, just change the listen command like

.listen(process.env.PORT || 4001)

This way, it will work both on your deve environment as well as on Heroku environment.


And website deployed using above process is

Don’t judge me for its design or some links not working as it is a test app, under development and I am not a designer 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *