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:
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
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.