From Idea to Product – With Heroku and Mlab
As a developer we get a lot of ideas, we implement few and we ignore some. We ignore thinking about what will I do after I have built my idea! And how will I improve it? Well for the improvement of any product feedback is key. And it’s not possible to get multiple people to get to your desk to give you feedback.
So here we will see how to convert your idea into a live product that can be shared along with others to get feedback. We will focus more on moving our code from dev machine to prod and hosting it. When we talk about hosting, the first thing that comes in our mind is cost and that stops us to move forward. But when this part becomes easy and free, every idea gets a chance.
So, let us start.
Tools and technology used:
Heroku – Free Web Hosting Platform (Limited)
MLab – Free MongoDB cloud database (Limited)
GIT – Source control
For App :
Node js- Server side
Angular 7 – client side
In this post, we will see only about Heroku and Mlab. First what we need is to create a solution for our idea. I have a solution ready which I will use to explain the complete process.
Now once you have your solution ready in a git repo, first create a Heroku and Mlab account. Heroku provides 5 free URL hosting, CI/CD and other monitoring features. Mlab provides a 500 MB cloud MongoDB database.
Setting up a database:
Login into mlab and click on create new, select free plan, database name and create.
Once it is created, you can see in the list.
Now click on the newly created database and in the next screen click on the user tab and add a user that can access this database instance.
Once created you will see instructions on how to form a database connection string to connect. Now, our database is ready. Let’s look into Heroku. But before that, it has a prerequisite, we should make sure a file named ‘Procfile’, without any extension, should be present in the root folder. This Procfile guides Heroku to find the entry point. In my example, you will see how to provide an entry point for node js apps.
CI/CD setup and web hosting:
Create a Heroku account. Then create a new app.
You can check the URL availability and select the server region to create an app.
Once the app is created it will be listed in the dashboard. In my case, the app is angular-event-manager.
Click on the app name and you will see lots of options.
The first step is to connect the GIT repository where the code to be deployed resides.
Click on Deploy tab and connect to your GitHub repository, then search for the repository and connect.
On a successful connection, you will see options automatic deploy option. In this section, select a branch from which you want to enable CD. And for the first time, you can use a manual deploy option. This option can also be used to deploy a specific branch.
If you wish to go to a specific version, you can navigate to the Activity tab and rollback to any previous version.
This is the main part, apart from this, you have more options like logs, webhooks, console, etc.
And that is it. If you have code ready just deploy it. You can check my deployed app Event Manager.