DEV Community: Ilya Azovtsev

How to automate PDF generation of dashboards/web pages with open-source Puppeteer web automation tool

Ilya Azovtsev — Mon, 09 May 2022 11:47:29 +0000

Send your clients a weekly or monthly report through email – they’ll be grateful!

“Why do you pay for this product? What’s the real value, in numbers, of using this product?”.

If you ask your clients this question, and they don’t know the “value” they get in numbers (like hours saved or clients generated with your tool) – they’re in a risk zone for churn 😬

Every SaaS company has dashboards and metrics that they share with clients on their platform. This is the place where clients actually understand how your tool or service helps them.

Today, we’ll share with you how to save your clients’ time by sending report PDFs automatically to them so they don’t have to fetch them manually.

And if you ask: “Why do I actually need it?”.

I’ll tell you, this can improve your retention metrics:

_Your clients automatically get reports -> they feel value from using your product/service -> they stay with you for a longer time -> you increase the Lifetime Value of the client _🚀

Clients are always grateful when you can automate repetitive tasks such as downloading reports from your platform. This will only take about an hour to accomplish with browserless and will save your customers precious time.

We’ll share with you a puppeteer pdf generator *code snippet that you can copy & paste and save time even on coding *😅

How to automate PDF generation with Browserless

Let’s illustrate this with our own browserless’ account dashboard. We can see the number of sessions that have run and our worker’s CPU & memory statistics. We’ll use our browserless API key to run the script and get the PDF returned.

You can then make a simple NodeJS app to schedule that task and also send the PDF returned from browserless through email. Or you can send these PDFs via your current Email Marketing tools.

Let’s Get Started

First of all, create your Browserless account:

Choose the plan you want to go with; Usage-based with a free trial or Dedicated.

Once you create the account, you’ll have the Dashboard (yes, we also have a dashboard 😀) with an API key, that you can use for automation:

To extract this dashboard, we can use the /function API to run the script below, where “token” is your API key from Browserless:

const puppeteer = require('puppeteer-core');

(async() => {
    const token = "YOUR_API_KEY";
    const email = "YOUR_LOGIN_EMAIL";
    const password = "YOUR_LOGIN_PASSWORD";

    const browser = await puppeteer.connect({ browserWSEndpoint: 'wss://chrome.browserless.io?token='+token });
    const page = await browser.newPage();
    await page.setViewport({width:800,height:1020});
    await page.goto('https://cloud.browserless.io/account/',{ waitUntil: 'networkidle0'});
    await page.type('#login-email', email, {delay: 10});
    await page.type('#login-password', password, {delay: 10});
    await page.click('div.css-vxcmzt > div > button > span');
    await page.waitForSelector('.chartjs-render-monitor');
    await page.evaluate(() => {
        var leftpanel = document.querySelector(".sticky_nav__3r2Ep");
        leftpanel.parentNode.removeChild(leftpanel);
        const date = new Date();
        document.querySelector('.text-white.mb-0').innerHTML="Sessions on "+date;
        document.querySelector('#app > div > div > div > .col-8').classList.add("col-12");
        document.querySelector('#app > div > div > div > .col-12').classList.remove("col-8");
    })
    await page.emulateMediaType('screen');
    return page.pdf({path:"dashboard.pdf",printBackground:true});
})();

It’s a simple script, we basically access the dashboard URL, login with our credentials, and click on the sign in button. Once the dashboard is loaded, we generate the PDF.

First we import the puppeteer core library, which is lightweight since you’ll be connecting to a remote or existing chrome, and doesn’t come with browser binaries.

const puppeteer = require('puppeteer-core');

We’ll wrap all our code inside an async IIFE so that our code executes off the bat. Then we define our local variables, such as our API KEY, email, and password. The best practice here is to use process environments, but we’ll keep it simple for now.

(async() => {
    const token = "YOUR_API_KEY";
    const email = "YOUR_LOGIN_EMAIL";
    const password = "YOUR_LOGIN_PASSWORD";

Now let’s connect to the browserless WS endpoint by providing our API KEY and create a new browser and page to start automating.

const browser = await puppeteer.connect({ browserWSEndpoint: 'wss://chrome.browserless.io?token='+token });
const page = await browser.newPage();

Once that’s done, we’ll set the desired viewport

await page.setViewport({
    width: 1920,
    height: 1080
})

We then go to the browserless account page and wait for the network traffic to settle down so that the email and password selectors are actually loaded.

await page.goto('https://cloud.browserless.io/account/',
{ 
    waitUntil: 'networkidle0'
});

We enter our credentials and click on the submit button – you can use environment variables for the password here.

await page.type('#login-email', 'YOUR_EMAIL', {delay: 50});
await page.type('#login-password', 'YOUR_PASSWORD', {delay: 50});
await page.click('div.css-vxcmzt > div > button > span');

Once we’ve clicked log in, we want to wait to make sure the page is fully loaded by checking that the graph has been rendered.

  await page.waitForSelector('.chartjs-render-monitor');

Now we want to modify the page before generating the PDF. We can do so inside the page.evaluate() method. We are fetching the left panel navigation menu and removing it. Then we are finding the main panel that has the content that we want, we’ll remove the .col-8 class and add the .col-12 class so that it is fullscreen. You can feel free to modify the UI of your dashboard in this section, such as removing unwanted sections or adding new graphic elements by injecting html+css that you may want to show in the PDF.

await page.evaluate(() => {
  var leftpanel = document.querySelector(".sticky_nav__3r2Ep");
  leftpanel.parentNode.removeChild(leftpanel); //removing the left panel
  const date = new Date();
  document.querySelector('.text-white.mb-0').innerHTML="Sessions on "+date; //adding the date in the title
  document.querySelector('#app > div > div > div > .col-8').classList.add("col-12"); //adding this class to be fullscreen
  document.querySelector('#app > div > div > div > .col-12').classList.remove("col-8"); //removing this class to overwrite the container size.
})

After all your modifications are done, feel free to generate the pdf. It is common that CSS defaults to print CSS styles (in order to save ink when printing) so you can add these two lines of code to make the CSS look more like a user would usually look at it. Otherwise the CSS could shift and look weird.

await page.emulateMediaType('screen'); //will help not to render print css
return page.pdf({printBackground:true}); //will render backgrounds of your page

In some cases pages are rendering their fonts with web fonts, so if your page looks weird even after adding these two lines of code, it could be that the web fonts aren’t loading properly because the page detects you’re running chrome headless, and hence doesn’t see the need to render any fonts at all. To overcome this, you can either run the session headful or set the user agent manually as so:

await page.setUserAgent(
  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36'
);

Here’s an example of why setting these last two lines of code are relevant:

Page with only page.pdf(); looks like this:

Page with print background looks like this:

page with emulateMediaType set to screen looks like this (final result):

Now you can take care of sending this PDF through your marketing platforms, have fun!

👉 If you want to do this yourself, just create a Browserless account and get started!

How to use JavaScript feature toggles to deploy safely [React.js example with Dev.to App]

Ilya Azovtsev — Tue, 15 Feb 2022 12:54:13 +0000

Feature flags aka Feature toggles in any language significantly reduce the blast radius of a release if anything goes wrong. Javascript feature flags are no exception. We already shared the guide on how to use feature flags in Node.js. In this post, you will learn how to use javascript feature toggles in a React.js application to deploy a small feature safely to your users.

Let’s get started!

Prerequisites

Prior to diving deeper into the code and JavaScript feature toggles, below are some of the good to have requisites:

Some knowledge of Javascript and React.js would be essential
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. Flagsmith is the open-source product - check out Github.

We will jump right into the code part now, brace yourself.

Example: JavaScript feature flag with React.js Dev.to app

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 and this is the place where you read this article 😅. 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:

npx create-react-app devto-react

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:

cd devto-react

yarn start

It will start the development server and open the default browser at http://localhost:3000 which looks like:

Hurray! Our skeleton React app created by Create React App for the JavaScript feature toggles tutorial is running. We will change the code to call the Dev.to API next.

And will change the src/App.js file to look like below:

import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
  const [articles, setArticles] = useState([]);
  const [message, setMessage] = useState('loading…');
  useEffect(() => {
    async function fetchArticles () {
      try {
        const data = await (await fetch('https://dev.to/api/articles/latest')).json();
        setArticles(data)
        const message = data.length ? "" : 'No articles found';
        setMessage(message);
      } catch (err) {
        console.log('err: ${err.message}', err);
        setMessage('could not fetch articles');
      }
    }
    fetchArticles()
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h2>Latest Dev.to articles</h2>
        {message}
        <div className="articles">
          <ul>
          {Array.isArray(articles) && articles.map(
            article => article.url && <li><a href={article.url} target="_blank" rel="noreferrer">{article.title}</a> – by {article.user.name}</li>
          )}
          </ul>
        </div>
      </header>
    </div>
  );
}

export default App;

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

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: calc(10px + 2vmin);
}

.App-header h2 {
  text-align: center;
}

.App-link {
  color: #61dafb;
}

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:

For the scope of this guide, we will add the reading time in minutes for the articles. As this small feature will be added with JavaScript feature toggles, it will be very easy to turn it on and off simply by flipping a flag within Flagsmith; no re-deployments are necessary. That is the power and convenience of feature flags, as deployment is not a release.

In the next section, we will set up the feature flag for our example within Flagsmith’s UI. Then we will add Flagsmith’s JavaScript SDK, available on NPM, to our project. After that, we will add some code to implement the simple flag to show or hide the reading time for the Dev articles.

Setup Flagsmith to have Feature Flags

Flagsmith is the open-source product - check out Github.

To create JavaScript feature toggles to show or hide the reading time for articles we will first create a project on Flagsmith. To create the project we will click the “Create Project” button after logging in:

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:

Now we have created a new feature flag called show_reading_time and enabled it. It would be created in both development and production environments in Flagsmith. Next, we will install the flagsmith NPM library and use it in the React.js app for our JavaScript feature flags tutorial.

Install and use Flagsmith JavaScript client

If you like what we do, check out Flagsmith the open-source product - check out Github.

We have created the feature flag in Flagsmith on the UI, now it is time to use it in the Dev React app. To do this for our JavaScript feature flags tutorial, we will first get the Flagsmith JavaScript client from NPM running the following:

yarn add flagsmith

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:

import flagsmith from 'flagsmith';

Subsequently, we will add the following at line 8 to initialize the showReadingTime variable which will be false by default:

const [showReadingTime, setShowReadingTime] = useState(false);

Then we will add the code below in useEffect function below fetchArticles call at line 22 as follows:

flagsmith.init({
    environmentID:"VKE5KnX8xXZuztTDGbcvBU",
    cacheFlags: true,
    enableAnalytics: true,
    onChange: (oldFlags, params) => {
    setShowReadingTime(flagsmith.hasFeature('show_reading_time'));
    }
  });

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:

<ul>
          {Array.isArray(articles) && articles.map(
            article => article.url && <li><a href={article.url} target="_blank" rel="noreferrer">{article.title}</a> – by {article.user.name} {showReadingTime ? '(Around ${article.reading_time_minutes} minute${article.reading_time_minutes > 1 ? "s": ""} read)' : ""}</li>
          )}
</ul>

We have first imported Flagsmith’s JavaScript client, then set the showReadingTime on useEffect so that it is only called once on page load. Then when we render the articles we check if the reading time should be shown and then we print the reading time else we print the empty string. Next up we will see the changes in action.

Test JavaScript feature toggles changes

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:

flagsmith.init({
    environmentID:"BLPF23hJZ4ekaYV48epC55",
    cacheFlags: true,
    enableAnalytics: true,
    onChange: (oldFlags, params) => {
     setShowReadingTime(flagsmith.hasFeature('show_reading_time'));
    }
  });

To deploy our Dev.to React app to surge we will run the following commands:

yarn build

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:

npm i -g surge

Consequently, we will go into the build folder and deploy the built app with:

cd build
surge

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:

Pretty neat! Below is how the app looks on Surge.sh with the toggle for reading time “on” for Javascript feature flag, taken from the “production” environment:

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.

Next Steps

Implementing flags in JavaScript is a pretty easy task with amazing benefits. You can use the same Flagsmith JavaScript client in any frontend application ranging from vanilla JavaScript to Jquery to even Angular or Vue.js applications. It is also possible to use the SDK from a CDN with the following code:

<script src="https://cdn.jsdelivr.net/npm/flagsmith/index.js"></script>

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.

Conclusion

We just saw how to implement JavaScript feature toggles on a simple React.js app that calls an API to show the latest Dev articles. This idea can be easily implemented in any frontend JavaScript application. Feature release can be done safely with high confidence and low time to turn on or off the released feature without the need to deploy any new code.

P.S. the original article was published here

How to use Feature Flags in an iOS App [with code examples]

Ilya Azovtsev — Wed, 02 Feb 2022 12:24:58 +0000

If you ask yourself:

How to test & deploy new features in your app without sending ap App Store update?

How to release your new version to only 1% (or 5%, or 50%) of the userbase?

You definitely need to read this article. Today we'll talk about Feature Flagging for IOS apps.

A feature flag helps you to enable or disable functionality remotely without deploying code. This is extremely helpful if you want to test and deploy new features without sending an App Store update. This enables you to decouple deployment from release, and you can experiment over the entire lifecycle of features.

Why you should use Feature Flags (aka feature toggles) for IOS app

Here is the list of main benefits:

1. Deploy features without risk

Even if something goes wrong, you can always rollback update easily.

2. Maintain release cycle easier

Even if some part of your code are unfinished, you still can release it and once everything ready just switch toggle and new feature will be in your app without sending an App Store update.

3. A/B/n test & Canary deployment

With just feature flagging, you can release your new features & updates to only a group of people. It might be your beta testers who can use new updates in production or you can simply A/B/n test everything and check the impact on your metrics.

This article will explore how to use the iOS feature flag. It contains the following:

Creating Feature Flag on Flagsmith (Sign up for free and use feature flags)
Installing the Flagsmith iOS SDK
Working with the Flagsmith iOS SDK
Testing the Feature Flag
Testing Different Environments
So let’s get started!

Getting Started with iOS Feature Flag

Flagsmith has a sample project to showcase a demo feature flag, and you can download the starter project from here. This article assumes you know the basics of iOS development.

Head over to Flagsmith and click Sign In on the top right corner. If you’re new to Flagsmith, you can start on the free trial:

You can sign up via GitHub, Google or email:

Then, create an organization to house all your projects:

After creating the organization, create the project that will contain the iOS feature flag. When you create a project, Flagsmith also generates a development and production environment for you. You can create features for your project, then enable and configure them per environment.

You’ll be redirected to your project’s homepage that will contain all the information about your features:

Now that you’ve set up the project, it’s time to create your first feature flag!

Creating a Feature Flag on Flagsmith

>>Sing up for free and use feature flags!

To create your first feature, head over to the Features tab from the sidebar. You’ll be taken to the Features main page:

There are two types of features that you can create for your project:

Feature Flags: This allows you to toggle features on and off. For example, a messaging feature on your app that you only want to show and test in Development.
Remote configuration: This allows you to provide configuration for a particular feature. For example, anything from font size for a website/mobile app or an environment variable for a server.

In this article, we’ll focus on adding a feature flag. Every feature comes with two default environments:

Development
Production

When you create a new feature, Flagsmith makes copies of it for each environment, allowing you to edit the values in the feature separately. Also, you can create more environments if you want.

The Flagsmith SDK also provides you with the ability to identify your user when they log in to your app. It adds them to the user’s page. You can then configure the features per user. For example, while working on a new messaging feature, you can show it to only a particular identified user or set of users.

On the Features page, click on the Create Your First Feature button. It slides a New Feature page, where you can fill in the details:

There are five options for every feature:

ID: Name of the feature. For example, header_size.
Enabled by default: A switch to enable the feature by default.
Value: providing an optional value with the feature in the form of .txt, .json, .xml, toml and .yaml.
Description: Provide an optional note that explains the feature. For example, “This determines what size the header is”.
Archived: A switch to archive a feature. It helps you filter a feature from the Flagsmith dashboard to determine the ones that are not relevant anymore.

For example, you can name the ID as show_onboarding for a feature flag to enable the onboarding screen. It will be disabled by default. Let’s leave the Value field empty as it will act as a feature flag with only a boolean value. Then, add the description as This enables the onboarding screen. As you’re going to use it, leave the Archived option off.

Note that this creates the feature for all environments, and you can edit this feature for every environment after the feature is created.

After you’re done filling in the information, click the Create Feature button. And that’s it, you’ve created your first feature flag within a few minutes!

Installing the Flagsmith iOS SDK

Flagsmith iOS SDK can be installed via two ways:

CocoaPods
Swift Package Manager (SPM)

To install via CocoaPods, add the following line to your pod file:

pod 'FlagsmithClient', '~> 1.0.1'

To install via SPM, add the following to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/Flagsmith/flagsmith-ios-client.git", from: "1.1.1"),
]

If your project doesn’t contain a Package.swift file, go to the Menu bar in Xcode, select File, and then Add Packages. Then, in the search field, add the following URL:

Click Next. The current version at the time of writing is 1.1.1. Click Next again and then checkmark the SDK to add to your project’s target. Finally, click Finish to add the iOS SDK to your project.

Working with the Flagsmith iOS SDK

If you’re using AppDelegate, you can initialize the SDK in application(_:didFinishLaunchingWithOptions:) method:

import FlagsmithClient
func application(_ application: UIApplication,
 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  Flagsmith.shared.apiKey = "<#YOUR API KEY#>"
}

If you’re using SwiftUI’s new lifecycle, it can be initialized by setting the API key inside the init() method in the App. In the sample project, it can be initialized as follows:

import FlagsmithClient
extension FlagsmithExampleApp {
  private func initializeFlagsmith() {
    Flagsmith.shared.apiKey = "<#YOUR API KEY#>"
  }
}

Now, in the FlagsmithExampleApp struct, you call this method in the init():

@main
struct FlagsmithExampleApp: App {
  init() {
    initializeFlagsmith()
  }
  var body: some Scene {
    WindowGroup {
      MainView()
    }
  }
}

By setting up your API key and initializing the SDK at launch, you can fetch the feature flags from Flagsmith.

The SDK offers two methods to retrieve the flags – you can either fetch all the flags or retrieve the flag by its name.

For the former one, you then loop over the flags and save them accordingly:

Flagsmith.shared.getFeatureFlags() { (result) in
    switch result {
    case .success(let flags):
        for flag in flags {
            let name = flag.feature.name
            let value = flag.value?.stringValue
            let enabled = flag.enabled
            print(name, "= enabled:", enabled, "value:", value ?? "nil")
        }
    case .failure(let error):
        print(error)
    }
}

In the sample project, you can create an enum for the feature flags:

enum FeatureFlags: String {
  case showOnboarding = "show_onboarding"
  var id: String {
    self.rawValue
  }
}

Use the case to get the desired feature flag. Then, put this piece of code in the initialization method to retrieve the flags at launch:

private func initializeFlagsmith() {
  Flagsmith.shared.apiKey = "<#YOUR API KEY#>"
  Flagsmith.shared.getFeatureFlags { (result) in
    switch result {
      case .success(let flags):
        for flag in flags {
          // Comparing the feature flag's name to the particular ID.
          if flag.feature.name == FeatureFlags.showOnboarding.id {
            DispatchQueue.main.async {
              viewModel.showOnboarding = flag.enabled
            }
          }
        }
      case .failure(let error):
        print(error)
    }
  }
}

Alternatively, you can search for feature flag by its name. It returns a Result:

Flagsmith.shared
  .hasFeatureFlag(withID: FeatureFlags.showOnboarding.id, forIdentity: nil) { (result) in
  switch result {
    case .success(let value):
      DispatchQueue.main.async {
        viewModel.showOnboarding = value
     }
    case .failure(let error):
      print(error)
  }
}

In the beginning, the value of the flag show_onboarding was set to false by default. Run the app, and you’ll see that it opens to the main screen instead of the onboarding screen.

In the next section, you’re going to test the feature by toggling the value of the feature flag and running the app accordingly.

Testing the iOS Feature Flag

Go to the Flagsmith project and toggle the feature flag show_onboarding by switching the OFF ** button to **ON.

It will show an alert that will turn show onboarding “On” for Development. Click on Confirm Changes.

You’ve successfully changed the value of the feature flag.

Now, head over to Xcode, and rerun the project. You’ll see that the onboarding screen is being displayed as the first screen!

Testing Different Environments

>>Sign up for free and use feature flags!

Flagsmith also provides you with different environments per feature. You can find the different environment on the main page of the project:

Each environment has its own specific API key. So, from the sidebar, select Settings under the Production heading and copy the API key from here. show_onboarding is disabled by default in Production, while in the previous section, you enabled it in Development.

To differentiate between the two, go back to Xcode and FlagsmithExampleApp.swift. Replace the following code where you set the API key with:

#if DEBUG
    Flagsmith.shared.apiKey = "<#YOUR DEVELOPMENT API KEY#>"
 #else
    Flagsmith.shared.apiKey = "<#YOUR PRODUCTION API KEY#>"
 #endif

Now, click on the current scheme and then edit the scheme:

From the sidebar, select Run. Under the Info tab, change the build configuration to Release:

Run the app, and you’ll see that the onboarding is disabled!

If you run the app in Debug configuration, you will see the onboarding screen again. You can create a custom build configuration on Xcode as well. For example, you can create an Environment Test Flight in Flagsmith and create a similar one in Xcode.

Conclusion

You can download the final project from here. Using Flagsmith, you can release features with confidence and manage feature flags across web, mobile, and server-side applications.

This article helps you get started with using Feature Flags in your iOS app so that you have more control over your features without worrying about sending updates. You can use the best open-source feature flag for your next Xcode project. Flagsmith also has on-premises and cloud-hosted solutions with great pricing plans.

>>Sign up for free and use feature flags!

Flagsmith also offers a more robust feature called Remote Configuration, where you can send the values over the feature and retrieve them in your app. You can learn more about Remote Config in this post.

Do let us know if you’ve any suggestions/feedback!

Btw, the original article was posted here.