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 https://kids-play.herokuapp.com/

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 🙂