loading...
Cover image for How to deploy web apps as a beginner ?

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

exploreraadi profile image Aadi ・2 min read

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.

Posted on by:

exploreraadi profile

Aadi

@exploreraadi

A web developer with an addiction for JavaScript, Chai and Anime. Developer by day, poet by night.

Discussion

markdown guide
 

Here is the way I did it, I first bought a new domain from .xyz because it's very cheap, I then asked a friend to borrow his server, and then deployed the app with systemd services, and sat up the firewall and domain records. This isn't the easiest or fastest solution, but at least I learned how to manage systemd, nginx and my own domain.

 

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

 

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

 

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.

 

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 ,🙂

 

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

 

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