Being Yourself
Being Yourself
  • Home
  • Home
  • Home
  • /
  • Angular2
  • /
  • Express
  • /
  • github
  • /
  • MEAN Stack
  • /
  • Mongo DB
  • /
  • Nodejs
  • /
  • Web Development

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 🙂

Posted on May 16, 2017 by kashif. This entry was posted in Angular2, Express, github, MEAN Stack, Mongo DB, Nodejs, Web Development and tagged angular, angular-cli, angular2, github, heroku, MEAN Stack, mLab, Node.js, web. Bookmark the permalink.
Working with github
Unit Test errors for Karma test runner with Jasmine

Leave a Reply Cancel reply

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

    Recent Posts

    • Estimate and plan Human Resources for Projects
    • Unit Test errors for Karma test runner with Jasmine
    • Deploy MEAN App with Heroku
    • Working with github
    • Adding Angular2 to MEAN App

    Categories

    • Angular2
    • Express
    • github
    • Life Coach
    • Linux
    • MEAN Stack
    • Mobile Applications
    • Mongo DB
    • Nodejs
    • Popluar
    • Project Management
    • Swift – iOS Programming
    • Uncategorized
    • Unit Test
    • Web Development

    Tag Cloud

    aborting process actionsheet angular angular-cli angular2 beauty estimate Fay food delivery app github gratitude heroku HR Management ios ipad karma kashif life caoch life coach Linux MEAN Stack Memory allocation failed memory management mLab Mobile application Node.js order online plan Project Management restaurant swap swift uiactionsheet unit test web xcode

Tags

aborting process actionsheet angular angular-cli angular2 beauty estimate Fay food delivery app github gratitude heroku HR Management ios ipad karma kashif life caoch life coach Linux MEAN Stack Memory allocation failed memory management mLab Mobile application Node.js order online plan Project Management restaurant swap swift uiactionsheet unit test web xcode

Recent Posts

  • Estimate and plan Human Resources for Projects
  • Unit Test errors for Karma test runner with Jasmine
  • Deploy MEAN App with Heroku
  • Working with github
  • Adding Angular2 to MEAN App
Powered by
Skip to toolbar
  • About WordPress
    • WordPress.org
    • Documentation
    • Support Forums
    • Feedback
  • Log in
  • Register