Vercel vs Heroku How to deploy web apps as a beginner ?

Did you recently start learning web development and made your first or second web app but are now confused about how and where would you deploy it?
Then this article is for you.

I have tried to keep this extremely short to let you know just enough to get started quickly as I too understand the excitement of hosting your first few projects on the web.
Though there are tons of options out there ( both free and paid ) still we will be mainly looking at the two most popular and free ones:

1. Heroku – It is a platform that lets developers deploy, manage, scale web apps. It provides its own CLI which lets you use your terminal to track changes or deploy your code directly to Heroku after logging in. They provide a detailed and step by step guide for beginners as soon as you sign up and set up your account.
   But if you still want to read their documentation in detail then click here

2. Vercel – Vercel is also a platform to deploy and manage your web apps but the front-end part only. Though the steps are very easy. You just need to connect your Github account with Vercel and then choose the repository which has the project you wish to deploy. Once added, it will also keep track of any changes you’ll do in your master branch and will keep re-deploying the app with those changes. Just visit Vercel and follow the steps.

After looking at the options, let us look at their use cases.
I use Heroku to launch my node apps or any other backend I build and Vercel for my static sites or front-end of my apps.
Now, if you’re looking to deploy a Fullstack app you might ask, “Why to deploy the front-end and backend separately? Why not host everything in one place ?”

The answer is simple. In a Fullstack app (where you are using some framework for your front-end), you need to run two commands, one for your front-end like npm start in case of React and one for your backend like node index.js but platforms like Heroku can not run both of these commands simultaneously on the same host whenever you visit your app's link. Hence we deploy our backend seperately and use that link to connect it to our frontend (you can use fetch functions or axios for that).

Though this was a very brief article still I hope that I cleared the most basic stuffs required to deploy your app without confusing you much.
Wish you all the very best, Happy Coding.

Comments

[ibrahimt2]

I think recently Netlify has also gained prominence as a good quick deployment tool!

[Aadi]

Netlify and Vercel works pretty much the same way on the surface so if anyone learned vercel, they'd be able to try that out too.

[SPeshov]

You can use vercel for back end as well.
Just have an API/ folder in pages/ and follow their docs and you will be fine - I love it ,🙂

[Aadi]

I thought we can do that with zeit not vercel😅
Thanks for filling me in with the info🙌

[Filipe Medeiros]

Zeit and Vercel are the same thing, it was a rebranding.

[Vlad]

1. You can combine front-end and backend startup in the same package.json command. Never tried this approach for Heroku.
2. You can always deploy a Docker container to Heroku anyway.
3. I just warried about free/paid tear for Vercel. 12-24 lambdas means 12-24 possible endpoints for backed while normal site could have up to hundred (for various CRUD operations). Even if you combine several endpoints under a single lambda like "POST/GET /user" +"PUT/GET/DELETE /user/:id" there are still 6-12 unique entities that might be not enough. On Heroku you are not limited, but yes it's still 24-7 running instances and you have to scale manually in case of increasing load. And yeah, if you need a WebSockets - forget about it with Versel. They reccomend using 3rd party integrations which pricing is awful (100 connections for free and 500 for $50/month !? Startup project might have thousands).

[Aadi]

Woah..! Awesome.
Didn't know about these, thanks alot for sharing 🙌

[Aadi]

Thanks for sharing, I was more inclined to show the free ways in this post.