Developing a React application is an exciting process and it’s fun to continuously check the progress through a local server. However, I always feel extra excited whenever I’m taking an application from the development phase into production.

The process of deploying an application built with a component-based framework like React is different compared to a website built using HTML, CSS and JavaScript. In the past, deploying a React app could be a tricky process. However, deploying a React app is ridiculously easy with deployment services like Netlify.

netlify-overview

In this tutorial, I’ll demonstrate 3 different ways on how to deploy a React application for free using Netlify. All three options are completely free and you can deploy a React app in less than a minute with all of them.

Netlify

Netlify is a popular option used for deploying React applications because of its simplicity but also thanks to the features included in the free starter pack. The platform supports automation of your code to create easily maintainable sites and web apps.

Netlify offers many cool features which you can integrate to your website. To mention a few, you can easily integrate and manage forms and submissions, add identity management without the need for managing your own authentication service, perform split testing and much more.

The free tier includes unlimited personal projects, continuous deployment and builds from public or private Git repos, automated HTTPS and much more. Deploying a React app with Netlify is extremely simple and can be done in less than 30 seconds!

You will need to create a Netlify account if you don’t already have one.

netlify

The different deployment approaches covered in this tutorial:

  1. Continuous deployment through Git repository
  2. Through the Netlify CLI
  3. Drag and Drop

Let’s begin!

Continuous Git deployment

Netlify currently offers support to connect with a repo from one of the version control systems: GitHub, GitLab and BitBucket. This approach allows Netlify to detect changes in your source code and triggers automated deploys. It also makes it possible to roll back to a previous version whenever you want.

Once you’ve created and signed in to your Netlify account, you should see a New site from git button at the top right corner of the screen. Click on the button, select your Git provider which you have used for your project and authorize Netlify to connect with your account.

netlify-ci

The next step is to select the repository which you want to link to your Netlify website. You can choose both public and private repos. If you don’t see your repo, you must configure assign repository access to Netlify. You can give Netlify access to all of your repos or just select the one you want to use.

Choose your website repository and you will be taken to the deploy settings with the below options.

  • Owner - Netlify offers a cool feature which allows you to create Teams which makes it possible to collaborate with other developers for one or more sites which belong to the team. Select the team you want to use for this website.
  • Branch to deploy - You can select which branch you want Netlify to monitor. When pushing to that branch, Netlify will be and deploy your website. The default is master but I prefer creating a separate production branch for this purpose.
  • Build Command - You can specify the build command that Netlify runs when you push to the above mentioned branch. The default is npm run build and you can keep that if you haven’t made any changes to the configuration of your project affecting this.
  • Publish directory - The folder Netlify uses to host the website, e.g., public, dist, build. The default is public.
  • Advanced build settings - The advanced settings can be used to define environment variables which might be required by your project. They can be added by clicking on Show advanced and then the New Variable button. You can also update these settings once the website has been created.

Click on the Deploy site button and Netlify will start the build and deploy process from what you have specified above. The build usually takes a minute or more depending on the size of the project. If the build and deployment is successful, Netlify generates a random URL with your live site. If the build takes longer than expected or fails, you can see the build logs in the Deploys tab.

netlify-deployed

This is everything that is required to deploy a react app using Netlify. Since we connected to our Git provider, Netlify will redeploy the site whenever we push changes to the specified branch in the repo.

Netlify CLI

Deploying using the Netlify CLI is just as easy and simple as shown above. You just need to enter a few commands in the terminal.

Begin by opening your terminal and going into the directory of the project you wish to deploy. Then we need to create a build of the React app. By running the below code, an optimized build of your React app is created to the build folder.

npm run build

When this has successfully been executed, we’re ready to move on to Netlify. First, we need to install the Netlify CLI. By installing the netlify cli globally you can run netlify commands from any directory using netlify. With the netlify cli installed, we can deploy a React app through the terminal. Run the below section to perform the two above steps.

npm install netlify-cli -g
netlify deploy

You will prompted to answer some questions in the terminal.

  • This folder isn’t linked to a site yet ? What would you like to do? - If you see this, Netlify could not connect the project with any website since it is a new project we want to deploy. Go down with the keyboard and select Create & configure a new site.
  • Team - Select the Netlify team you wish to assign the site to.
  • Site name - You can optionally provide a site name of the project. It will create a random name if you don’t specify one. You can always change this afterwards through the Netlify UI.
  • Publish directory - Choose the folder which Netlify should use to host the website. In our case it is build since that is where the production build of the React app that we previously created is stored. The default is ..

If everything is successful, Netlify deploys your site to a draft URL which you can preview. You should also see a new folder netlify inside your project containing the file state.json which includes your Netlify site id. If everything looks you good, you can deploy to the main site URL using the --prod flag. Run the below code.

netlify deploy --prod

That is everything required to deploy your React app to Netlify using the Netlify CLI. Your website should be created at: [name-of-your-site].netlify.app.

Drag-and-drop

The third way to deploy a React app to Netlify, is using the drag-and-drop feature. This allows you to simply generate a production build of the application and uploading it directly to Netlify through the Netlify UI. You won’t being needing Git or the Netlify CLI to perform this deployment option.

The first thing you need to do, is the generate a production build of the React app. Open your terminal and ake sure that you are in the project directory. Run the below command the generate a build.

npm run build

This generates an optimized build version of your React application and saves it in the build folder of your project.

Navigate to the Netlify UI and go to the Sites tab. In the bottom of the dashboard, you can find a section where you can upload your entire project folder. Drop the project folder there and Netlify will initiate the deployment process.

netlify-drag-and-drop

After a few moments, you will be taken to the dashboard for your new Netlify site. Once Netlify has finished deploying your site, you will see the URL to the live website.

netlify-deploying

That is everything required to deploy a React app to Netlify using the drag-and-drop feature.

Netlify domain settings

Any site on Netlify is by default accessible through the Netlify subdomain, which has the form [name-of-your-site].netlify.app. When deploying the application to Netlify for the first time, it will generate a URL with a random subdomain name for you. You can change the random name for free to something more suitable for your application.

To do so, click on the Domain settings button from the site Overview. To change the subdomain for free, click on the Options dropdown button to the right and then select Edit site name.

netlify-domain

You also have the option to choose a custom domain name and secure the site trough HTTPS. Netlify sites can be assigned domains which have been registered anywhere. If you don’t already own a registered domain, Netlify provides a service for domain registration directly within Netlify dashboard.

Wrapping up

There you have it, 3 different ways to deploy a React application for free using Netlify. Deploying a React application using Netlify can be done in less than a minute and I hope you have the knowledge to this now!