Netlify is a service which offers a development platform that automates builds, deployments and manages your websites. It’s one of the fastest and easiest deployment solutions out there.
In this article, you will learn how to deploy your React application with Netlify in two simple ways.
Before we get started, let's get you signed up to netlify!
Signup to Netlify
Use the following steps to sign up to netlify:
Step 1: Go to app.netlify.com and click the signup button.
You can choose any of the options to signup to netlify, for this example we will use GitHub
Step 2: You will be taken to the authentication page. Input your Github username and password to continue to netlify
You would be asked to verify your email (email associated with your GitHub account):
After that, you should see something like this but not exactly, because the image below is an already existing account, hopefully you get the idea:
Deploy to Netlify
Netlify offers three methods you can use to deploy your app, but we are going to focus on just two.
1. Drag and Drop
Use the following steps to deploy your app using drag and drop
method:
Step 1: Go to the react app you want to deploy in your code editor and run the following command:
npm run build
The command above will build your react app for production.
After that a build folder named dist will get generated. The folder contains all the production-ready files of your application.
Step 2: Go to your netlify dashboard, click the Add new site button and choose Deploy manually
You will be taken to the drag and drop page where you will upload the dist folder generated earlier.
After uploading your dist folder, wait a few seconds and you should see something like this:
Click the open production deploy button to see your deployed app!
Redeploying App
To redeploy your app after making any changes to your code, use the following steps:
Step 1: Rebuild your app again as we have done earlier.
Step 2: Go to your site dashboard (your existing deployed site) and click theDeploys option
Step 3: Scroll down and re-upload your app dist folder again
Changing Site Name
To change your site name, Use the following steps:
Step 1: Click the Options button and go to Deploy settings
Step 2: Navigate to Domain management option and click it:
Step 3: Under Production domains, click the Options button and edit your site name:
2. Continuous Deployment
According to netlify:
Continuous deployment works by connecting a Git repository to your Netlify site and keeping the two in sync. When you push to Git, we run your build tool of choice on our servers and deploy the result.
Similar to what we have done earlier, go to your dashboard, click add new site button and select import an existing project
After doing so, use the following steps to deploy from an existing project:
Step 1: Choose any of the options provided by netlify. For this example, we will choose Deploy with GitHub
After that, you will be asked to authorize your netlify to deploy any of your GitHub repository.
Step 2: Select the repository you want to deploy
Step 3: Select the branch you want to deploy from and configure your build settings, we will use the default settings for this example.
After that, scroll down, click the Deploy button to deploy your app
Conclusion
In this article, you have learned two ways you can deploy your react application with netlify through practical steps. This process can also be used to deploy any other frontend JavaScript libraries like Angular, Vue and more.
If you've gotten to this part and you found this article to be helpful, kindly react and comment on it, doing so will help me in writing better articles.
Top comments (0)