- Knowing how Node.js and Yarn work are required, knowledge of adding new packages with Yarn is also needed
- A Flagsmith account will be used to create the feature flag. Register now - It's free.
We will jump right into the code part now, brace yourself.
We will build a simple React.js app that will list the latest articles from Dev.to. Dev is a community of software developers getting together to help one another out. It is an amazing community where anyone can publish technical content without any editorial process. Based on Forem it has a handy API and we are going to use the articles API to list the latest articles in a light React.js application.
To create the React.js application using create react app, we will run the following command:
It will render output as follows when the setup is complete:
Next, we will quickly run the React.js boilerplate application to see if it is running with:
It will start the development server and open the default browser at `http://localhost:3000` which looks like:
And will change the `src/App.js` file to look like below:
We are using the React useState hook to define two variables articles and the message. Then using the effect hook we are calling the Dev.to API in the `fetchArticles` function. The articles fetched are being put into the `articles` variable. In case of any error a message of `No articles found` is put into the message variable.
Below, in the return section, we are looping through all the fetched articles and showing the title of the article with a link to it and the name of the user who has posted the articles.
Consequently, we will change the `src/App.css` to have the following contents
The CSS has been simplified to show the list of articles, removing the unneeded styles for the logo and the background. Text color and text alignment have been reset too.
The focus of this tutorial is to help you learn how to do React feature flags with Flagsmith. When we run it with `yarn start` after making the above changes, the application looks like below at this point:
Setup Flagsmith to have Feature Flags
I have named the project Dev-React, and then, we will reach the project page like below:
We will scroll down the page and create a new feature flag called `show_reading_time` as seen below:
After the `flagsmith` client is installed we will change the code in `src/App.js`. First, we will add the following line on line 2 to import Flagsmith library into the app:
Subsequently, we will add the following at line 8 to initialize the showReadingTime variable which will be false by default:
Then we will add the code below in useEffect function below fetchArticles call at line 22 as follows:
You can get the environment ID from the “Initialize your code” section of the feature flag page as seen below:
Consequently add the following code where you see the looping through articles towards line 40:
At this point if we again start the app it will show something like the below:
Great! We can see the reading time of the articles. Now if we would like to turn off showing the reading time, it is very easy. We can just go to the Flagsmith interface and turn the feature off like below:
After we hit “Confirm Changes” and the flag is off, if we come back and refresh the Dev React app page used for our example we will not see the reading times anymore as follows:
Wasn’t that easy? You can deploy the app and change the environment ID to be production for your production environment. In the next step, we will deploy the react application to Surge.
Deploy React App to Surge.sh (React Feature Flag)
We have run the application locally, so to deploy it to a more production-like environment we will use Surge.sh. It is a very easy platform to deploy our front-end application. To deploy our React application to surge first we will replace the key from development to production one. To do this we will go to the “Production” environment and then click “Initialising your project” under the features section as seen below:
We had done a similar thing for the development environment, as we want to deploy to a production-like environment we are replacing the environment ID to be of production. We will copy the environment id and replace it on line 23 of src/App.js which will look like below after the change:
To deploy our Dev.to React app to surge we will run the following commands:
It will give the following output:
It will also create a `build` folder with the output of the build process which has the index.html file and other static assets.
To install the Surge command line we will run the following:
Consequently, we will go into the build folder and deploy the built app with:
After that type in your email and a password. Then it will find your current working directory as the project. Then if you want, change the subdomain, I have used `devto-react.surge.sh` else use the random subdomain it provides. The hit enter and in a couple of seconds your app will be deployed to Surge over a CDN as seen below:
You can try it out too at https://devto-react.surge.sh. You will get an email to verify your email address, if you are interested in Surge do check out their help section. In the following part, we will look at the next steps.
The main concept here is to deploy the feature safely, if there is an issue we should be able to turn it off in seconds, not minutes or hours. That is easily possible with feature flags on an open-source platform like Flagsmith or with the free plan. The feature can be turned on and off with a couple of clicks, not with a deployment process. That adds unprecedented power and flexibility to the software engineering teams. The safety of feature release is another desirable by-product of the whole process. By the way, you definitely need to check 5 best practices for Feature Flags.