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:
- 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
- Heroku: It directly communicates with GitHub or relates services to deploy code. Instead of GitHub, you may use Heroku Git or Dropbox.
- 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 🙂