Deploy Your React App with Netlify

If you’re a JavaScript developer, chances are you’ve created a React App before — but once you finish, how do you get it out into the world? If you ask me, the answer is Netlify. Netlify is a tool used by developers to deploy and host their applications and websites. It is one of the most common and trusted tools that front-end developers because of its ease of use.

In this tutorial, you will create a calculator app, add feature flags to it, and then deploy it to production with Netlify so you can see it in action. Let’s get started!

Prerequisites for Your Netlify + React App

First, let’s make sure you have Node installed. If not, follow these instructions.

You’ll also want to sign up for a free developer account with Split if you haven’t already. Later on, you’ll incorporate our JavaScript SDK with your app.

Create Your React Application

For this example, we will create a simple calculator app with just the four basic functions and then deploy it with Netlify. Using Facebook’s boilerplate of create-react-app, you can create the entire React file structure and template quickly and easily. In the terminal, enter the following command to create the app called calculator:

npx create-react-app calculator

Then, change the directory to the new app and start the development server. In most cases, this will be localhost:3000, unless you have another app running there:

cd calculator
npm start

Next, it’s time to create the calculator’s two main components: the buttons and the result. In the results, you display the output from whatever functionality you click on from the buttons component. The results component will just be one paragraph tag that displays the content from the props.

Notice that each button in the Buttons Component calls this.OnClick and passes e.target.name as an argument.

<button name="1" onClick={(e) => this.props.onClick(e.target.name)}>1</button>

Now, in your App.js file, you define the calculate function and onClick function.

this.Calculate will calculate the result of your function when you click the = button. The onClick function changes the state depending on what button you click:

Calculate = () => {
  this.setState({
    result: (eval(this.state.result) || "") + "",
  });
};

onClick = (button) => {
  if (button === "=") {
    this.calculate();
  } else {
    this.setState({
      result: this.state.result + button,
    });
  }
};

Next, you render the components:

render() {
  return (
    <div>
      <div className="calculator-body">
        <ResultComponent result={this.state.result} />
        <ButtonsComponent onClick={this.onClick} />
      </div>
    </div>
  );
}

Add Feature Flags to your React App

Next, let’s say you’re working on implementing the BACKSPACE functionality of the calculator. You may not want this available to your users yet, so you’re going to add a feature flag to make sure it’s not enabled yet.

First, create the split and treatment in Split.

Then, you will need to configure your Split (feature flag) and define the different treatments.

The most important part here is the targeting rules, where you’ll define who will be targeted inside your feature flag.

Then, install the following dependency in your root folder:

npm install --save @splitsoftware/splitio-react@1.1.0

At the top of your component, import SplitTreatments and withSplitFactory from Split. SplitTreatments is a React Component that performs feature evaluation. The withSplitFactory Higher Order Component is used to wrap the Calculator component when you export it:

import {
  SplitTreatments,
  withSplitFactory,
} from "@splitsoftware/splitio-react";

Next, in your render function, use the SplitTreatments component to perform a feature evaluation:

<SplitTreatments names={["name_of_feature_flag"]}>
  {({ treatments }) => {
    return this.renderContent(treatments["name_of_feature_flag"]);
  }}
</SplitTreatments>

In the future, you could use this feature flag configuration to deploy all of your changes incrementally to users or all at once, without any code changes.

Deploy Your React App with Netlify

Once you have finished your React App and added all the styling and CSS, it’s time to deploy! You can deploy with Netlify with three easy commands:

npm run build
npm install netlify-cli -g
netlify deploy

Here is the full repo in GitHub.

Netlify + React + Feature Flags = Magic

Using Netlify and Split together allows you to release faster and catch bugs quicker. Although there are other deployment tools available, Netlify is most commonly used by front-end developers because of its speed and reliability. The magic of feature flags plus the quality of Netlify make them a perfect match!

Learn More About React and Feature Flags

For more information on using feature flags with React, their benefits, and more use cases, check out these posts:

• Add Styled Components to Your React App
• The Benefits of Feature Flags in Software Development
• 7 Ways Feature Flags Improve Software Development
• Testing Styled Components in Your React App
• Set Up Feature Flags with React in 10 Minutes

To stay up to date on all things testing in prod and feature flagging, follow us on Twitter @splitsoftware, and subscribe to our YouTube channel!

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Switch It On With Split

Split gives product development teams the confidence to release features that matter faster. It’s the only feature management and experimentation solution that automatically attributes data-driven insight to every feature that’s released—all while enabling astoundingly easy deployment, profound risk reduction, and better visibility across teams. Split offers more than a platform: It offers partnership. By sticking with customers every step of the way, Split illuminates the path toward continuous improvement and timely innovation. Switch on a trial account, schedule a demo, or contact us for further questions.