Today, let’s take a look at how to deploy our react app to Netlify, including setting up continuous deployment.
Continuous Deployment (CD) is a software release process that uses automated testing to validate if changes to a codebase are correct and stable for immediate autonomous deployment to a production environment.
Why Netlify?
Netlify is an all-in-one platform for running web projects. This means you can use Netlify for hosting most if not all your web projects. Netlify is simple to use and set up which works perfectly when you have a basic website you want to get up and open for the world to use quickly.
This post will explain step by step to deploy our react project to Netlify as the different ways that Netlify allows us to do that.
React Project Example
First of all, we need to have a react project example to deploy to Netlify. So you can use a previous project or create a new one with the next commands.
We will use the package create-react-app that allows us to get started a project in just seconds.
npx create-react-app react-project-example
Note: react-project-example is the project's name can be changed as you prefer.
After running the command, you will create a folder with the name react-project-example or the name you prefer. The next step will be to make sure that the application is running successfully. To start the application need to use the next command
npm start
After that, you can enter http://localhost:3000/ in your browser and will see something like that, congratulations! 🎉 🎊 👏
Apply a Change in the project
In addition, you can apply a change to the react project to make sure that the changes are applied for example
src/App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello World #1
</p>
</header>
</div>
);
}
export default App;
With the change, the page will look like
You can find the code that we do here in this GitHub repository how-to-deploy-react-project-to-netlify-project-example
Netlify Deployment
First of all, you need to create a Netlify account that is Free on the Starter Pack.
There are two ways in Netlify to do a deployment in the case of a React project
- Manual deployment
- Automatic Deployment
Manual Deployment
This is the easiest way to deploy our React project in Netlify. Basically, consist of drag and drop the build generated with our app to the Netlify page.
Before doing that we need to do some things, we will need to generate the build of our react application, we need to execute the next command
npm run build
Once the command was executed successfully you will see the build folder in the project.
The next step is to open the react project folder in finder if you're on a Mac or file explorer in the case of Windows and drag and drop the build folder into the empty box on the Netlify page.
That is it. after a few seconds, the application should be deployed. You will see and URL, for example, something like https://relaxed-liskov-f39467.netlify.app/ (that is a URL generated by Netlify) that we can share with people to access the site.
Automatic Deployment (from Git)
As mentioned before the Netlify manual deployment is the easiest way to deploy, however, the simplest is not always the best for a software project. In the case that we make a change to our source code won't be reflected on the web page until will be done a new manual deployment, which could provoke a waste of time for the team members and the project.
*How do we deploy our applications? *
When we use automatic deployment all the changes made to the code are reflected on the deployed site, each time we push to the repository.
Before doing that we need to add the project to a repository. Go to a version control system and create a new empty repository for your app can be public or private there isn't a problem with it.
In the case of Github follow this guide Adding an existing project to GitHub using the command line
Once the repository is in a version control system as GitHub, GitLab, or Bitbucket we can start with the Netlify automatic deployment setup. Click in the button New Site from Git
You will need to authorize Netlify access to your version control system, after that you can search and choose the specific repository that wants to be deployed.
Note: In this example image was selected GitHub
The next step will be to set some parameters settings related to the build and branches
- Branch to deploy
- Build command
- Publish directory (build directory)
- Advanced
- Environment variables
- Functions settings (serverless functions)
All of them are filled automatically but in some cases could be required to be changed, After that then click on the Deploy button, and our app will be deployed.
Testing our Netlify Automatic Deployment
Now, whenever commit what we do to the branch that we set in the setup step we push to the version control system, which will produce that Netlify automatically builds our app for us and update our deployed version.
To check this we will apply a quick change to our react application in src/App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello World #2 from automatic deployment
</p>
</header>
</div>
);
}
export default App;
Once those changes are made. After commit and push your code to the version control system will generate a new deployment.
After that a little time you should see your changes reflected in your Netlify website.
Personalize some Netlify configurations
There are some extra configuration that we can apply to our pipeline as
- Disable Automatic Deployments
- Change website domain
Disable Automatic Deployments
In some projects, the deployment needs to be done at specific times, timezone, or with some different rules to make sure the build quality with testing and other practices that could be applied to your project.
Basically, we just need to select the Deploys tab and click on Stop auto publishing, that with provoke that our changes won't be reflected automatically until we decide to launch a new deployment manually from the Netlify website.
We have two options to do that. The first one is to click on the last unpublished build and select the Publish deploy button. The second one is the Trigger deploy option in the deploys screen and just repeat the previous steps in the other option.
Once you click in Publish deploy, the change will be reflected on the website.
Change website domain
As you checked the default Netlify domain is generated in a random way based in an algorithm designed by Netlify. In the case that we want to change that domain, we need to go to Domain settings
Once in that section select Options > Edit site name and type a new site name for your website in Netlify the site name determines the default URL. After that, the domain URL will change based on the site name that was chosen.
Also, you can bring a custom domain name that you already own, or buy a new one with Netlify.
Conclusion
Netlify is an awesome platform for running our web projects, as you see during this post we explore some of the features related to deployments, so don't be afraid to put it into practice you learned it. I hope it will be useful for everyone.
I will be writing some other posts related to Netlify there are several features that we can explore and integrate into our projects, also let me know if you have an idea of a topic that I can talk about in the next posts.
Let me know in the comments recommendations or something else that can be added, I will update the post based on that thanks! 👍
Top comments (0)