Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 6, 2022 03:16 pm GMT

Deploy your static React app under 5mins

We all have been to the stage where we had completed our first react app but didn't know how to showcase it publicly.
So, in this blog, I am going to show you how to host your react app for free.

Pre-requisites:

  • Make sure you have completed building a react app.
  • Have npm installed locally or globally.

Step 1
Once you are done with your react app, you need to create the build folder which will contain the index, stylesheets, icons, assets and manfiest files. This folder is responsible for serving your static content when deployed.
Use this command in the root dir of your app

npm run build

Step 2
There are so many platforms to host your static site like Netlify, Vercel, Github Pages, Cloudflare Pages, Forge, etc. We are going to use Netlify
So, you need to create an account on Netlify and log in.

Step 3
Click on the add new site button.
Add new button
Then, click on the deploy manually button to deploy your build folder directly.

Deploy manually button

Step 4
Now, we have 2 options to deploy it. We can do it either by browsing our local files or dragging and dropping.

  1. Click on the browse files to upload the folder from your local machine.Browse files
  2. Drag the folder from your local and drop it in the middle.

Drag and drop folder

Step 5
Now, Netlify will publish your site and host it for free. You will be provided a random url but you can change it to your preferance.

Site published

Note: The url for your site should be unique and will always end with netlify.app

Congratulations! You have hosted your react app successfully and now you can showoff your project to your friends, family and literally anyone on this planet

If you have any query, drop it in the comment section below. If you think this blog has any error or wrong info, please let me know.

I hope I could help you somehow . If yes, please share it with your friends and others so that this could benefit them too! Till then , keep REACT-ing

Follow me on:
Github
LinkedIn


Original Link: https://dev.to/suman373_30/deploy-your-static-react-app-under-5mins-4oij

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To