netlify-logo

How to Deploy a React Application for Free

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.

Login page

There are several ways to deploy a web application on Netlify:

  1. Import the project from GitHub (or any other Git repository)
  2. Drag-and-drop our build output folder to the web interface of the Netlify service
  3. Using the netlify-cli tool (https://www.npmjs.com/package/netlify-cli)
The main page of Netlify

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.

Links to our new brand site

Finally, you can access your newly deployed website by clicking on the URL displayed in your terminal window.

React app

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.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.