DEV Community

Cover image for Deploy Website on Netlify
Mysterio
Mysterio

Posted on

Deploy Website on Netlify

Hello Guys today i am going to show you how to deploy React app on Netlify for free.

Netlify is a platform which allows you to deploy your website for free and provides a bandwidth of upto 100GB for free and also have https security and can get more features in their paid version.

Let's get started...
I am going to deploy a react app

NOTE - I am not going to explain how to create react app or how to push code to github.

STEP - 1

  • Create your React project

Step - 2

  • Create a github repository on Github and push the React App code to that repository

Step - 3

  • Open Netlify from the link below
    https://www.netlify.com/

  • You will see an interface like this , click "Start building for free"

Image description

  • Sign up if you dont have an account and after signup , log-in to your account
  • After Login you will get a dashboard like this

Image description

  • Click on Add a new site -> import an existing site
  • Then choose github in the Connect to Git provider option
  • Then connect your github to netlify using your credentials if asked
  • Then it will show you all the github repo's in your account
  • Choose the Repo which have your project.
  • Then Scroll down to bottom and click deploy site
  • Wait for few minutes , it will build your site and will create a link for the site.
  • After production build is successfull , you will see something like this

Image description

  • The link is Below your App name with https://, as you can see in the image above ## NOTE - If you want to change the url name of your site go to site settings -> change site name and change the site name and save .

OUTPUT -

Image description
Image description

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Discussion (0)