React has changed web application development. It has become quite a bit easier to make a good interactive website than it used to be. A React application in its compiled and deployed state is just a static website, or website that contains only static files such as HTML, JS, CSS, and images.
To create this static site from our React code, we just need to run the command npm run build or yarn run build. After that, we will get the build output folder, which will contain all the files that are needed for the operation of our static site. The main file for the site is typically index.html. Most web servers are configured so that both index.html and index.htm are the default document names for any specified folder. If the web application is a dynamic one, then the web server can also be configured to execute files like index.php, index.apsx, etc.
In the case of SPAs (Single Page Applications), of which React is one type, the index.html file usually has an empty body, with only one element in it from which the JavaScript application is mounted, the main code of which is stored in a JS file, usually called a bundle. So when we get the build output folder, this folder is our static JavaScript web application.
All that remains is for us to find a web server that can host this static web application. For that, let’s look at the most popular service – Netlify.
Netlify
Netlify is a service that automates the build, deployment and management of static websites. It is one of the fastest and easiest deployments available today.
Netlify offers a free plan, so anyone can try it without worrying about cost. Even startups or people learning to program can use it as a test environment, for example. Logging in to Netlify is also very easy. You can use any of these popular code repository sites: Github, Gitlab, Bitbucket, or simply with your email address.
There are several ways to deploy a web application on Netlify:
- Import the project from GitHub (or any other Git repository)
- Drag-and-drop our build output folder to the web interface of the Netlify service
- Using the netlify-cli tool (https://www.npmjs.com/package/netlify-cli)
Importing a project from GitHub is very easy. To do this, click the “Import from Git” button and follow the instructions.
But perhaps the fastest and easiest option is the “drag and drop” method. To do this, you just need to build the React application (npm run build) and drag the build folder to a special area on the Netlify page (with the inscription “Drag and drop your site output folder here”).
The Netlify CLI
Perhaps the most powerful way we can interact with Netlify is from the CLI, or command line interface. Netlify CLI requires Node.js version 14 or above to run on your computer. To install it, simply run the following command from any directory in your terminal:
npm install netlify-cli -g
Next, we need to obtain a login token using the command:
netlify login
Once you’re authorized, Netlify CLI will store your access token in its config.json global configuration file. The Netlify CLI uses this token automatically for all future commands that require authentication.
For repositories stored on Github.com, you can use Netlify CLI to connect your repository by running the following command from our local repository:
netlify init
Next, you will need to answer the questions to initiate and connect the project to Netlify. After, when the initialization is completed, your project will be ready to deploy. At the end of the process, you will see a list of URLs as shown below.
Finally, you can access your newly deployed website by clicking on the URL displayed in your terminal window.
As we can see, deploying a React application is quick, easy, and free. If you’d like to do something more complex or production-ready, you can also check out Netlify’s paid plans on their website.