How to deploy your react application with Vercel super fast ๐Ÿš€๐Ÿš€

How to deploy your react application with Vercel super fast ๐Ÿš€๐Ÿš€

ยท

2 min read

Table of contents

No heading

No headings in the article.

Today there are many hosting platforms that can host your website and provide you all flexibility without paying any penny. You can host your portfolio, personal projects, and some other cool stuff.

What is so special about Vercel and why did I choose Vercel to host the react application?

vercel logo.png

Vercel is a popular static web hosting serverless platform for front-end developers. The platform allows developers to host websites and web services, by providing speed and reliability it can deploy instantly, and scale automatically with minimal configuration just need to create it at the moment of inspiration.

You can use serverless functions to handle user authentication, form submission, database queries, custom Slack commands, and many more. Vercel integrates well with popular tools, such as GitHub, GitLab, etc.

Features of Vercel

  • Build and Deploy your Project with automatic CI/CD
  • Automatic Git Integration
  • Vercel Analytics
  • Incremental Static Regeneration
  • Provide State level production

Now you are familiar with Vercel and ready to host your application

yes.gif

I will be assuming you had one react project and looking for the hosting part so let's get started.

  1. Make an account in Vercel continue with Github image.png

  2. You will redirected to a dashboard section then click on the Add New menu, and select Project image.png image.png

  3. Click Continue with Github image.png

  4. Select the repository you want to host image.png

  5. Write the Name of the project (only lowercase) and select Create React App in the Framework Preset section. image.png

  6. Click on the Edit root directory and choose the folder where the react application is stored. In my case, it is in the client folder and then click Continue
    Do this step only if you have multiple folders image.png

  7. Click on Deploy and wait for an application to get deployed. image.png

  8. Congratulation your site has been deployed ๐ŸŽ‰ image.png

  9. Click on Continue to Dashboard and click on the Visit tab. image.png

  10. Our website is ready and now anyone with this link can visit your website. image.png

Thanks for reading.โค๏ธ

Let me know which hosting platform do you use and why?

5VuZmkfXz.avif

Until the next time ๐Ÿ‘‹

LadJ4m8lY.avif

Did you find this article valuable?

Support Anas Khan by becoming a sponsor. Any amount is appreciated!

ย