Recently I was reviewing the code for my spotiapp project, based on Spotify API. It is not fully 100% responsive but it is one of the apps I feel more proud of, when I watched it live for the first time I felt so GREAT. Sure can be better but as I say I am proud of it.
My backend was hosted in Heroku. I was pretty happy with the service Heroku was providing me, but when I wanted to make some small changes to the backend code, I found this message:
That means, Heroku offers no more free plans. Of course I can’t blame them: a company is supposed to make money, so I am sure they have good reasons to do that.
But I am workless now. This “spotiapp” is only made with educational purposes, and to include it in my portfolio and show potential employers or clients what I can do; so as you can guess, it is not only enough with a free plan, but I can´t start paying a fee to host every app I build.
Let me state that this is not a “look for some free options then you can avoid paying” tutorial. I think good services must be paid. We are developers and all of us like to be paid, isn´t it? I myself pay for a hosting to include all my projects and my portfolio . It is a reliable provider with an excellent service, where I can host all my apps; but unfortunately, I can´t build Node-based servers there.
In the future, when I build commercial apps which can potentially help me buy money, of course I will upgrade my account, but now, for tests, small apps and learning purposes, as I said, I can´t be paying for each app with a node-based back end I write.
To be honest I only had this app hosted with Heroku. Most of my backends are done in PHP so there is no problem, my actual paid host does the job; but I am a frontend Angular developer and to become a more full-stack dev, I want to start building more node-express backends.
HEROKU DYNOS MODEL
With their model (or so I understood), you have to pay for each “dyno” (containers used by your app). Your app could need one or more dynos depending on size and demands. If you have to pay, for example $7 dyno per month for the Hobby plan, and you have 20 apps running their backend on heroku, maybe now you probably simply can´t afford it, like it is my case.
More info about “dynos” here:
A free option with Render.com
As you can guess, there are many alternatives out there. I will refer you to this excellent article where they will explain better than me. I will focus on teaching you how to move a basic backend from heroku to Render.com, the provider I selected, which still allows a free plan, and is very easy to use and well implemented with GitHub.
Will Render.com charge me?
We can see how Free plan works:
When you exceed your free usage limits (i.e., usage hours and/or bandwidth), free services in your account are automatically suspended and can no longer serve traffic until they are upgraded to a paid plan or when free usage is reset at the end of the calendar month, whichever is sooner.
Free usage is reset on the 1st of every month, and all free services suspended for usage limits are automatically resumed.
So I guess we are safe with it. Also no credit or debit card is required to register, as you can see here, so it definitely gives me some tranquility.
HOW TO MOVE OUR BACKEND FROM HEROKU TO RENDER.COM
So, let´s go with it.
Before you do nothing, when you register in Render.com, I recommend you read the docs , because it will help you a lot and quickly.
If you want to make a small tutorial about how to deploy a node/express backend, on the doc´s Quickstart section, we will choose this:
This will prompt us to a super easy tutorial where you can fork an existing repo, with all the needed steps to deploy:
This doesn´t mean you have to use the exact same commands for all your projects. For example, in my backend you can see I have package.json files, that means our dependencies will be installed with npm install and not with yarn . Both are two different package managers and you can read more about them here.
So ok, I assume you have a GitHub or GitLab profile, and you have registered on Render.com.
Whether you make the tutorials or not, the first thing after registering is to connect your GitHub account with your profile. There you will be able to choose if you give access to all your repos or only selected ones.
So, we go to the setting and connect to GitHub
Once you are connected, it will ask you for permissions or which repos you want to give access to. However, you can control it form your own GitHub Profile:
Go to your GitHub settings and click integrations/applications
There you can configure your render app:
This option will allow us to grant permissions for one or more repos. Of course before we do it, in this case we have to push our backend code to GitHub if we haven´t already there.
This is my Heroku backend. It is very simple:
- A .js file with all the logic needed to make connections to the spotify API and such.
- json and package-lock.json files, to help you install the required dependencies your backend needs.
- Procfile. This is one Heroku exclusive file which executes commands by the app on startup. This won´t be needed on Render.com, of course.
In my case, I will delete the Procfile since, as I said, it is no longer needed as it is one Heroku file.
Ok, let´s go back to configure our Render installed app in GitHub
Now you can manage Render´s access to your repos. In my case I only gave permission to the repo of this backend and the one for the tutorial I did before:
Now we save, and go back to Render´s page, to our dashboard.
We can choose there “New”, and then “Web Service” option, or just click directly on “Web Services”. Both will do the same.
Now it will ask you to connect one of the repositories you granted permissions before, on GitHub. We will choose our node back end server for render
Now it will ask us to provide some data
- The name is not mandatory to be the same as your GitHub repo’s, I will simply write “spotiapp-backend”
- Root Directory will be left as it is
- Environment will be Node
Leave region and branch as they are. The important thing now is the build command. It usually appears “yarn” as default. But, do you remember we have a package.json? That means the dependencies must be installed with “npm install”.
Next steps are also important. The start command will be the same you would use on your terminal to run the app. In my case, the main file is called “index2.js”, and to run this node server we will use the “node” command.
Also check the free plan type.
As they remind you, remember free plans, same as happenned in Heroku, shut down your apps after a time of inactivity, and it takes a little longer than usual when they have to reactivate again.
Now push “Create Web Service” at the bottom of the page:
This will lead you to another screen with a terminal where your app will be deployed. The URL of the app should now be copied on your frontend code or whereever you pointed to heroku old address before.
Wait until it finishes and, remember, once you have changed the old heroku address from your old web servers everywhere you need in your code, you now have a free, working Node/Express backend ready to use 🙂
I have still not tested enough, but the only cons I found now is that you must pay if you want to use CRON JOBS.
- CRON JOBS are very useful if you have a test app where users can post or edit data, and you want to schedule this data to be reset every certain time, so you can be sure that only the test/ default data you provided, will be kept at last. It is not included with Free plan, but as I said, companies are there to earn money so probably I will pay for this if I need it.
- Also the web is a bit slow sometimes and throws some errors, but nothing important by now.
So, I hope this article helped you to deploy your node services easily on a free alternative to Heroku. However, remember, if you start making money with your apps, please value the other´s efforts and upgrade your plan.