mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
docs: update quickstart and tutorials with flag reference (#7142)
<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->
## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->
We are making a round of updates to change all references of "feature
toggle" to "feature flag".
This is also under the assumption that "Create feature toggle" in the
product UI will become "creature feature flag".
There are also formatting improvements to the docs included in this PR.
> Note: This does not include anchors and links for now.
## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->
This commit is contained in:
Nnenna Ndukwe
GitHub
parent
83dfdc7905
commit
81c6caf211
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: How to Implement Feature Flags in .net
|
||||
title: How to Implement Feature Flags in .NET
|
||||
description: "How to use Unleash feature flags with .NET."
|
||||
slug: /feature-flag-tutorials/dotnet
|
||||
---
|
||||
@ -8,13 +8,13 @@ Hello! In this tutorial we’ll show you how to add feature flags to your .NET a
|
||||
|
||||
We’ll keep with the sci-fi theme of our previous tutorials and use the [Rick and Morty API](https://rickandmortyapi.com/documentation/#introduction), with a .NET web API project. We’ll use feature flags to decide whether to call the REST or the GraphQL version of the API.
|
||||
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [1. Install a local feature flag provider](#1-install-a-local-feature-flag-provider)
|
||||
- [2. Grab a list of characters from the Rick and Morty API](#2-grab-a-list-of-characters-from-the-rick-and-morty-api)
|
||||
- [4. Add the GraphQL endpoint](#4-add-the-graphql-endpoint)
|
||||
- [5. Add Unleash to your .NET app](#5-add-unleash-to-your-net-app)
|
||||
- [6. Verify the toggle experience](#6-verify-the-toggle-experience)
|
||||
- [Conclusion](#conclusion)
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [1. Install a local feature flag provider](#1-install-a-local-feature-flag-provider)
|
||||
- [2. Grab a list of characters from the Rick and Morty API](#2-grab-a-list-of-characters-from-the-rick-and-morty-api)
|
||||
- [4. Add the GraphQL endpoint](#4-add-the-graphql-endpoint)
|
||||
- [5. Add Unleash to your .NET app](#5-add-unleash-to-your-net-app)
|
||||
- [6. Verify the toggle experience](#6-verify-the-toggle-experience)
|
||||
- [Conclusion](#conclusion)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@ -49,7 +49,7 @@ Username: admin
|
||||
Password: unleash4all
|
||||
```
|
||||
|
||||
Click the ‘New feature toggle’ button to create a new feature flag.
|
||||
Click the ‘New feature flag’ button to create a new feature flag.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ Username: admin
|
||||
Password: unleash4all
|
||||
```
|
||||
|
||||
Click the ‘New feature toggle’ button to create a new feature flag. Once you have created a flag, you will see it here.
|
||||
Click the ‘New feature flag’ button to create a new feature flag. Once you have created a flag, you will see it here.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -7,22 +7,20 @@ In our [Java Spring Boot feature flag tutorial](/feature-flag-tutorials/spring-b
|
||||
|
||||
We built multiple features into Unleash, an open-source feature flag platform, to address the complexities of releasing code and managing feature flags along the way. This tutorial will explore the following:
|
||||
|
||||
- [Gradual Rollouts for Java Spring Boot Apps](#gradual-rollouts-for-java-spring-boot-apps)
|
||||
- [Canary Deployments in Java](#canary-deployments-in-java)
|
||||
- [What is a canary deployment?](#what-is-a-canary-deployment)
|
||||
- [How to do canary deployments with a feature flag in Java?](#how-to-do-canary-deployments-with-a-feature-flag-in-java)
|
||||
- [Configure strategy constraints for canary deployments](#configure-strategy-constraints-for-canary-deployments)
|
||||
- [Server-side A/B Testing in Java Spring Boot](#server-side-ab-testing-in-java-spring-boot)
|
||||
- [Feature Flag Analytics and Reporting in Java](#feature-flag-analytics-and-reporting-in-java)
|
||||
- [Application Metrics \& Monitoring](#application-metrics--monitoring)
|
||||
- [Feature Flag Audit Logs in Java](#feature-flag-audit-logs-in-java)
|
||||
- [Flag Automation \& Workflow Integration for Java Apps](#flag-automation--workflow-integration-for-java-apps)
|
||||
|
||||
- [Gradual Rollouts for Java Spring Boot Apps](#gradual-rollouts-for-java-spring-boot-apps)
|
||||
- [Canary Deployments in Java](#canary-deployments-in-java)
|
||||
- [What is a canary deployment?](#what-is-a-canary-deployment)
|
||||
- [How to do canary deployments with a feature flag in Java?](#how-to-do-canary-deployments-with-a-feature-flag-in-java)
|
||||
- [Configure strategy constraints for canary deployments](#configure-strategy-constraints-for-canary-deployments)
|
||||
- [Server-side A/B Testing in Java Spring Boot](#server-side-ab-testing-in-java-spring-boot)
|
||||
- [Feature Flag Analytics and Reporting in Java](#feature-flag-analytics-and-reporting-in-java)
|
||||
- [Application Metrics \& Monitoring](#application-metrics--monitoring)
|
||||
- [Feature Flag Audit Logs in Java](#feature-flag-audit-logs-in-java)
|
||||
- [Flag Automation \& Workflow Integration for Java Apps](#flag-automation--workflow-integration-for-java-apps)
|
||||
|
||||
## Gradual Rollouts for Java Spring Boot Apps
|
||||
|
||||
|
||||
It is common to use feature flags to roll out changes to a percentage of users, and we can use Unleash to do a gradual rollout with a Java-based app.
|
||||
It is common to use feature flags to roll out changes to a percentage of users, and we can use Unleash to do a gradual rollout with a Java-based app.
|
||||
|
||||
In our Spring Boot tutorial, the flag controls the release of a new service implementation on a product page. To further customize that, you can modify the basic setup to adjust the percentage of users who experience this feature with a gradual rollout.
|
||||
|
||||
@ -53,34 +51,28 @@ Response response = client.newCall(request).execute();
|
||||
|
||||
Learn more about [gradual rollouts in our docs](/reference/activation-strategies). Also, learn more about our [API for creating a new strategy](/reference/api/unleash/update-feature-strategy) for your flag.
|
||||
|
||||
|
||||
## Canary Deployments in Java
|
||||
|
||||
|
||||
### What is a canary deployment?
|
||||
|
||||
Canary releases are a way to test and release code in different environments for a subset of your audience, which determines which features or versions of the platform people have access to. They help find abnormalities and align with the agile process for faster releases and quick reversions.
|
||||
|
||||
|
||||
### How to do canary deployments with a feature flag in Java?
|
||||
|
||||
|
||||
Canary deployments are a safer and more gradual way to make changes in software development. They help find abnormalities and align with the agile process for faster releases and quick reversions.
|
||||
|
||||
Unleash has a few ways to help manage canary deployments for Java apps at scale:
|
||||
|
||||
* Using a [gradual rollout](/reference/activation-strategies#gradual-rollout) (which we [implemented in the previous section](#gradual-rollouts-for-java-spring-boot-apps)) would be a simple use case but would reduce the amount of control you have over who gets the new feature.
|
||||
- Using a [gradual rollout](/reference/activation-strategies#gradual-rollout) (which we [implemented in the previous section](#gradual-rollouts-for-java-spring-boot-apps)) would be a simple use case but would reduce the amount of control you have over who gets the new feature.
|
||||
|
||||
* Using either [strategy constraints](/reference/strategy-constraints) or [segments](/reference/segments) (which are a collection of constraints) to determine which user receives which version for more control than a gradual rollout
|
||||
- Using either [strategy constraints](/reference/strategy-constraints) or [segments](/reference/segments) (which are a collection of constraints) to determine which user receives which version for more control than a gradual rollout
|
||||
|
||||
* [Strategy variants](/reference/strategy-variants) are used for more advanced cases. For example, if you have 2+ new features and are testing to see if they are better than the old one, you can use strategy variants to split your population of users and conduct an A/B test with them.
|
||||
- [Strategy variants](/reference/strategy-variants) are used for more advanced cases. For example, if you have 2+ new features and are testing to see if they are better than the old one, you can use strategy variants to split your population of users and conduct an A/B test with them.
|
||||
|
||||
Let’s walk through how to use strategy constraints in our Java app.
|
||||
|
||||
|
||||
### Configure strategy constraints for canary deployments
|
||||
|
||||
|
||||
We will build a strategy constraint on our existing gradual rollout strategy. This will allow us to target a subset of users for the rollout.
|
||||
|
||||
In Unleash, start from the feature flag view and edit your Gradual Rollout strategy from your development environment.
|
||||
@ -95,12 +87,11 @@ Let’s say we are experimenting with releasing the new service implementation t
|
||||
|
||||
|
||||
|
||||
|
||||
We can configure the constraint in the form to match these requirements:
|
||||
- The context field is set to **environment**
|
||||
- The operator is set to **NOT_IN**
|
||||
- The value added is **production**
|
||||
|
||||
- The context field is set to **environment**
|
||||
- The operator is set to **NOT_IN**
|
||||
- The value added is **production**
|
||||
|
||||
Once you’ve filled out the proper constraint fields, select ‘Done’ and save the strategy.
|
||||
|
||||
@ -131,13 +122,11 @@ Check out our [API docs on updating flag strategies](/reference/api/unleash/upda
|
||||
|
||||
Read our documentation for more context on [strategy constraint configurations](/reference/strategy-constraints) and use cases.
|
||||
|
||||
|
||||
## Server-side A/B Testing in Java Spring Boot
|
||||
|
||||
|
||||
A/B testing is a common way for teams to test out how users interact with two or more versions of a new feature that is released. Server-side A/B testing can help with making infrastructure improvements and comparing different versions of server-side methods. At Unleash, we call these strategy [variants](/reference/feature-toggle-variants).
|
||||
|
||||
When a feature flag is enabled, we can expose a particular version of a feature to select user bases. From there, we can use the variants to view the performance metrics in Unleash and see which is more efficient.
|
||||
When a feature flag is enabled, we can expose a particular version of a feature to select user bases. From there, we can use the variants to view the performance metrics in Unleash and see which is more efficient.
|
||||
|
||||
In the context of our Java Spring Boot tutorial, we’re going to create a flag and two variants that represent different design implementations of the product page we created in the Pet Clinic application.
|
||||
|
||||
@ -159,17 +148,15 @@ We have successfully configured our flag variant and implemented them into our a
|
||||
|
||||
Next, we can examine how Unleash can track the results and provide insights with data analytics.
|
||||
|
||||
|
||||
## Feature Flag Analytics and Reporting in Java
|
||||
|
||||
|
||||
Shipping code is one thing, but monitoring your applications is another aspect of managing code that developers must account for. Some things to consider would be:
|
||||
|
||||
- Security concerns
|
||||
- Performance metrics
|
||||
- Tracking user behavior
|
||||
- Security concerns
|
||||
- Performance metrics
|
||||
- Tracking user behavior
|
||||
|
||||
Unleash was built with all these considerations in mind as part of our feature flag management approach. You can use feature flag events to send impression data to an analytics tool.
|
||||
Unleash was built with all these considerations in mind as part of our feature flag management approach. You can use feature flag events to send impression data to an analytics tool.
|
||||
|
||||
For example, if a new feature you’ve released causes more autoscaling in your service resources than expected, you can either view that in your analytics tool or get notified from a Slack integration. Our impression data gives developers a full view of the activity that could raise alarms.
|
||||
|
||||
@ -179,9 +166,9 @@ At the flag level in Unleash, navigate to the Settings view.
|
||||
|
||||
|
||||
|
||||
In the Settings view, click on the edit button. This will take us to the ‘Edit Feature toggle’ form.
|
||||
In the Settings view, click on the edit button. This will take us to the ‘Edit Feature flag’ form.
|
||||
|
||||
|
||||
|
||||
|
||||
Turn on the impression data and then save it. Events will now be emitted every time the feature flag is triggered.
|
||||
|
||||
@ -191,27 +178,23 @@ You can send the impression events data from your flag and flag variants to anal
|
||||
|
||||
You can find more information in our [impression data docs](/reference/impression-data#impression-event-data).
|
||||
|
||||
|
||||
## Application Metrics & Monitoring
|
||||
|
||||
|
||||
Under your feature flag’s Metrics tab in Unleash, you can see the general activity from the Pet Clinic app tutorial in the development environment over different periods of time. If the app had a production environment enabled, we would also be able to view exposure (amount of users that are exposed to the flag by count and overall percentage) and requests the app is receiving over time.
|
||||
|
||||
|
||||
|
||||
Our metrics are great for understanding user traffic. You can get a better sense of:
|
||||
|
||||
* What time(s) of the day or week are requests the highest?
|
||||
* Which feature flags are the most popular?
|
||||
- What time(s) of the day or week are requests the highest?
|
||||
- Which feature flags are the most popular?
|
||||
|
||||
Another use case for reviewing metrics is verifying that the right users are being exposed to your feature based on how you’ve configured your strategies and/or variants.
|
||||
|
||||
Take a look at our [Metrics API documentation](/reference/api/unleash/metrics) to understand how it works from a code perspective.
|
||||
|
||||
|
||||
## Feature Flag Audit Logs in Java
|
||||
|
||||
|
||||
Because a feature flag service controls how an application behaves in production, it can be important to have visibility into when changes have been made and by whom. This is especially true in highly regulated environments, such as health care, insurance, banking, and others. In these cases (or similar), you might find audit logging useful for:
|
||||
|
||||
1. Organizational compliance
|
||||
@ -221,18 +204,16 @@ Unleash provides the data to log any change over time at the flag level and the
|
||||
|
||||
For our Spring Boot app, we can view Event logs to monitor the changes to flag strategies and statuses we have made throughout our examples, such as:
|
||||
|
||||
- When the flag was created
|
||||
- How the gradual rollout strategy was configured
|
||||
- When and how the variants were created and configured
|
||||
- When the flag was created
|
||||
- How the gradual rollout strategy was configured
|
||||
- When and how the variants were created and configured
|
||||
|
||||
|
||||
|
||||
You can also retrieve event log data by using an API command. Read our documentation on [Event logs](/reference/event-log) and [APIs](/reference/api/unleash/get-events-for-toggle) to learn more.
|
||||
|
||||
|
||||
## Flag Automation & Workflow Integration for Java Apps
|
||||
|
||||
|
||||
An advanced use case for leveraging feature flags at scale is flag automation in your development workflow. Many organizations use tools like Jira for managing projects and tracking releases across teams. Our [Unleash Jira plugin](https://docs.getunleash.io/reference/integrations/jira-cloud-plugin-installation) helps to manage feature flag lifecycles associated with your projects.
|
||||
|
||||
It’s common for teams to have a development phase, QA/testing, and then a production release. Let’s say the changes we’ve made in our Java project must go through a typical development workflow.
|
||||
@ -295,4 +276,4 @@ Response response = client.newCall(request).execute();
|
||||
|
||||
Review [API docs on archiving flags](/reference/api/unleash/archive-feature).
|
||||
|
||||
Learn more about different use cases in our [Spring Boot Starter Kit](https://github.com/Unleash/unleash-spring-boot-starter) and [Java SDK](/reference/sdks/java).
|
||||
Learn more about different use cases in our [Spring Boot Starter Kit](https://github.com/Unleash/unleash-spring-boot-starter) and [Java SDK](/reference/sdks/java).
|
||||
|
||||
@ -78,7 +78,7 @@ Username: admin
|
||||
Password: unleash4all
|
||||
```
|
||||
|
||||
Click the ‘New feature toggle’ button to create a new feature flag.
|
||||
Click the ‘New feature flag’ button to create a new feature flag.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -15,13 +15,13 @@ Feature flags are a powerful technique that allows you to toggle features on and
|
||||
|
||||
Next.js provides features such as:
|
||||
|
||||
- Server-side rendering
|
||||
- Static site generation
|
||||
- Code splitting
|
||||
- Dynamic routing
|
||||
- TypeScript support
|
||||
- CSS modules support
|
||||
- And many more
|
||||
- Server-side rendering
|
||||
- Static site generation
|
||||
- Code splitting
|
||||
- Dynamic routing
|
||||
- TypeScript support
|
||||
- CSS modules support
|
||||
- And many more
|
||||
|
||||
With Next.js, you can create hybrid applications that can use both static and dynamic pages. Static pages are pre-rendered at build time and served from a CDN, which makes them fast and secure. Dynamic pages are rendered on-demand by a Node.js server, which allows you to use data from any source and handle user interactions. You can also use incremental static regeneration to update static pages without rebuilding your entire application.
|
||||
|
||||
@ -74,11 +74,11 @@ import type { AppProps } from "next/app";
|
||||
import { FlagProvider } from "@unleash/nextjs/client";
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<FlagProvider>
|
||||
<Component {...pageProps} />
|
||||
</FlagProvider>
|
||||
);
|
||||
return (
|
||||
<FlagProvider>
|
||||
<Component {...pageProps} />
|
||||
</FlagProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -89,50 +89,56 @@ import { useEffect, useState } from "react";
|
||||
import { useFlag } from "@unleash/nextjs/client";
|
||||
|
||||
const Activity = () => {
|
||||
const [activityData, setActivityData] = useState({});
|
||||
const [activityData, setActivityData] = useState({});
|
||||
|
||||
const showActivity = useFlag("activity");
|
||||
const showActivity = useFlag("activity");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchActivity = async () => {
|
||||
try {
|
||||
const response = await fetch("https://www.boredapi.com/api/activity/");
|
||||
const data = await response.json();
|
||||
setActivityData(data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching activity:", error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const fetchActivity = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
"https://www.boredapi.com/api/activity/"
|
||||
);
|
||||
const data = await response.json();
|
||||
setActivityData(data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching activity:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (showActivity) {
|
||||
fetchActivity();
|
||||
}
|
||||
}, [showActivity]);
|
||||
if (showActivity) {
|
||||
fetchActivity();
|
||||
}
|
||||
}, [showActivity]);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded shadow-lg">
|
||||
<h1 className="text-3xl font-bold mb-4">
|
||||
Here is an activity for you!
|
||||
</h1>
|
||||
{showActivity ? (
|
||||
<>
|
||||
<p className="mb-2">Activity: {activityData.activity}</p>
|
||||
<p className="mb-2">Participants: {activityData.participants}</p>
|
||||
<p>Price: ${activityData.price}</p>
|
||||
</>
|
||||
) : (
|
||||
<p>Activity not available</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded shadow-lg">
|
||||
<h1 className="text-3xl font-bold mb-4">
|
||||
Here is an activity for you!
|
||||
</h1>
|
||||
{showActivity ? (
|
||||
<>
|
||||
<p className="mb-2">
|
||||
Activity: {activityData.activity}
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
Participants: {activityData.participants}
|
||||
</p>
|
||||
<p>Price: ${activityData.price}</p>
|
||||
</>
|
||||
) : (
|
||||
<p>Activity not available</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Activity;
|
||||
```
|
||||
|
||||
Our feature flag can now be used to control whether or not activity is displayed. If we toggle on the gradual roll out:
|
||||
Our feature flag can now be used to control whether or not activity is displayed. If we switch on the gradual roll out:
|
||||
|
||||
|
||||
|
||||
@ -140,9 +146,9 @@ The activity is displayed:
|
||||
|
||||
|
||||
|
||||
If we toggle it off:
|
||||
If we turn it off:
|
||||
|
||||
|
||||
|
||||
|
||||
No activity is displayed:
|
||||
|
||||
@ -150,11 +156,11 @@ No activity is displayed:
|
||||
|
||||
To configure access to Unleash beyond localhost development, follow these steps:
|
||||
|
||||
- Self-host Unleash or run an instance on [Unleash Cloud](https://www.getunleash.io/pricing).
|
||||
- Self-host Unleash or run an instance on [Unleash Cloud](https://www.getunleash.io/pricing).
|
||||
|
||||
- Get an API key from the Unleash dashboard.
|
||||
- Get an API key from the Unleash dashboard.
|
||||
|
||||
- Store the API key in your Vercel Project Environment Variable, which secures it and makes it accessible in your code.
|
||||
- Store the API key in your Vercel Project Environment Variable, which secures it and makes it accessible in your code.
|
||||
|
||||
## Conclusion
|
||||
|
||||
|
||||
@ -82,7 +82,7 @@ Username: admin
|
||||
Password: unleash4all
|
||||
```
|
||||
|
||||
Click the ‘New feature toggle’ button to create a new feature flag. Once you have created a flag, you will see it here.
|
||||
Click the ‘New feature flag’ button to create a new feature flag. Once you have created a flag, you will see it here.
|
||||
|
||||
|
||||
|
||||
@ -90,7 +90,7 @@ Click the ‘New feature toggle’ button to create a new feature flag. Once you
|
||||
|
||||
Next, you will create a feature flag and turn it on for your Python app.
|
||||
|
||||
In the Create Toggle view, give your feature flag a unique name and click ‘Create toggle feature’.
|
||||
In the Create Flag view, give your feature flag a unique name and click ‘Create feature flag’.
|
||||
|
||||
For the purpose of this tutorial, name the feature flag `delete_survey_flag`. Use the default values in the rest of the feature flag form.
|
||||
|
||||
|
||||
@ -7,29 +7,28 @@ In our [React tutorial](/feature-flag-tutorials/react), we implemented a simple
|
||||
|
||||
Applications evolve, and teams must manage all aspects of this evolution, including the flags used to control the application. We built multiple features into Unleash to address the complexities of releasing code and managing feature flags along the way:
|
||||
|
||||
- [Gradual Rollouts for React Apps](#gradual-rollouts-for-react-apps)
|
||||
- [Canary Deployments in React](#canary-deployments-in-react)
|
||||
- [What is a canary deployment?](#what-is-a-canary-deployment)
|
||||
- [Why use canary deployments?](#why-use-canary-deployments)
|
||||
- [How to leverage feature flags for canary deployments in React?](#how-to-leverage-feature-flags-for-canary-deployments-in-react)
|
||||
- [Configure strategy constraints for canary deployments](#configure-strategy-constraints-for-canary-deployments)
|
||||
- [A/B Testing in React](#ab-testing-in-react)
|
||||
- [Feature Flag Analytics and Reporting in React](#feature-flag-analytics-and-reporting-in-react)
|
||||
- [Enable feature flag impression data](#enable-feature-flag-impression-data)
|
||||
- [Capture impression data for flag analytics](#capture-impression-data-for-flag-analytics)
|
||||
- [Application Metrics \& Monitoring](#application-metrics--monitoring)
|
||||
- [Feature Flag Audit Logs in React](#feature-flag-audit-logs-in-react)
|
||||
- [Change Management \& Feature Flag Approvals in React](#change-management--feature-flag-approvals-in-react)
|
||||
- [Flag Automation \& Workflow Integration for React Apps](#flag-automation--workflow-integration-for-react-apps)
|
||||
- [Common Usage Examples of React Feature Flags](#common-usage-examples-of-react-feature-flags)
|
||||
- [`useFlag` example](#useflag-example)
|
||||
- [`useVariant` example](#usevariant-example)
|
||||
- [`useUnleashClient` example](#useunleashclient-example)
|
||||
- [`useUnleashContext` example](#useunleashcontext-example)
|
||||
- [`useFlags` example](#useflags-example)
|
||||
- [`useFlagsStatus` example](#useflagsstatus-example)
|
||||
- [Additional Examples](#additional-examples)
|
||||
|
||||
- [Gradual Rollouts for React Apps](#gradual-rollouts-for-react-apps)
|
||||
- [Canary Deployments in React](#canary-deployments-in-react)
|
||||
- [What is a canary deployment?](#what-is-a-canary-deployment)
|
||||
- [Why use canary deployments?](#why-use-canary-deployments)
|
||||
- [How to leverage feature flags for canary deployments in React?](#how-to-leverage-feature-flags-for-canary-deployments-in-react)
|
||||
- [Configure strategy constraints for canary deployments](#configure-strategy-constraints-for-canary-deployments)
|
||||
- [A/B Testing in React](#ab-testing-in-react)
|
||||
- [Feature Flag Analytics and Reporting in React](#feature-flag-analytics-and-reporting-in-react)
|
||||
- [Enable feature flag impression data](#enable-feature-flag-impression-data)
|
||||
- [Capture impression data for flag analytics](#capture-impression-data-for-flag-analytics)
|
||||
- [Application Metrics \& Monitoring](#application-metrics--monitoring)
|
||||
- [Feature Flag Audit Logs in React](#feature-flag-audit-logs-in-react)
|
||||
- [Change Management \& Feature Flag Approvals in React](#change-management--feature-flag-approvals-in-react)
|
||||
- [Flag Automation \& Workflow Integration for React Apps](#flag-automation--workflow-integration-for-react-apps)
|
||||
- [Common Usage Examples of React Feature Flags](#common-usage-examples-of-react-feature-flags)
|
||||
- [`useFlag` example](#useflag-example)
|
||||
- [`useVariant` example](#usevariant-example)
|
||||
- [`useUnleashClient` example](#useunleashclient-example)
|
||||
- [`useUnleashContext` example](#useunleashcontext-example)
|
||||
- [`useFlags` example](#useflags-example)
|
||||
- [`useFlagsStatus` example](#useflagsstatus-example)
|
||||
- [Additional Examples](#additional-examples)
|
||||
|
||||
## Gradual Rollouts for React Apps
|
||||
|
||||
@ -261,7 +260,7 @@ At the flag level in Unleash, navigate to the Settings view.
|
||||
|
||||
|
||||
|
||||
In the Settings view, click on the edit button. This will take us to the ‘Edit Feature toggle’ form.
|
||||
In the Settings view, click on the edit button. This will take us to the ‘Edit feature flag form.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@ slug: /feature-flag-tutorials/react
|
||||
|
||||
import VideoContent from '@site/src/components/VideoContent.jsx';
|
||||
|
||||
|
||||
[React](https://react.dev/) is a popular JavaScript library utilized by millions of developers across the world to build user interfaces for frontend, mobile, or server-side applications when paired with frameworks. Originally developed by Meta, React has a strong community and is best used for interactive, complex, SEO-friendly application development.
|
||||
|
||||
Leveraging feature flags allows developers to toggle on and off new features, whether you’re experimenting in your local environment, testing for QA purposes, or rolling out changes to users in production. Feature flags can play a critical part in optimizing the entire software development lifecycle. With Unleash, an open-source feature flag service, you can use our tooling to implement feature flags into your application and release new features faster, strategically, and safely. But how can you do this in React?
|
||||
@ -25,34 +24,29 @@ Along the way, you will:
|
||||
5. [Toggle the visibility of a feature component](#5-use-the-feature-flag-to-rollout-a-notifications-badge)
|
||||
6. [Verify the toggle experience](#6-verify-the-toggle-experience)
|
||||
|
||||
|
||||
Watch the video tutorial and follow along with the code from this documentation.
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/-VzI0wqLDuw?si=cxLojllkIrZD8sf5"]}/>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
In this tutorial, you will need the following:
|
||||
|
||||
- A web browser like Chrome or Firefox
|
||||
- Git
|
||||
- Docker
|
||||
- NPM, Node and Yarn to install and run a React app
|
||||
- (Optional) A code editor like Visual Studio Code
|
||||
|
||||
- A web browser like Chrome or Firefox
|
||||
- Git
|
||||
- Docker
|
||||
- NPM, Node and Yarn to install and run a React app
|
||||
- (Optional) A code editor like Visual Studio Code
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. Architect to limit PII and configuration leakage
|
||||
|
||||
|
||||
Since React is a front-end framework, there are special security considerations to plan around when implementing feature flags.
|
||||
|
||||
Most importantly, you must:
|
||||
|
||||
a. Limit PII (personally identifiable information) leakage from the end-user device (e.g. browser or mobile device) to your central feature flag control service.
|
||||
a. Limit PII (personally identifiable information) leakage from the end-user device (e.g. browser or mobile device) to your central feature flag control service.
|
||||
|
||||
b. Avoid leakage of configuration information from the central feature flag control service to end-user devices.
|
||||
|
||||
@ -64,10 +58,8 @@ Unleash, the open-source feature flag system used in this tutorial, evaluates fe
|
||||
|
||||
For a complete list of architectural guidelines, see our [best practices for building and scaling feature flag systems](/topics/feature-flags/feature-flag-best-practices).
|
||||
|
||||
|
||||
## 2. Install a local feature flag provider
|
||||
|
||||
|
||||
There are many feature flag tools available. In this section, you will install Unleash in order to run it, log in, and create a feature flag, but you can use other tools in place of Unleash if you prefer. You’ll need to edit the code accordingly, but the steps will probably be about the same.
|
||||
|
||||
Use Git to clone the Unleash repository and Docker to build and run it. Open a terminal window and run the following commands:
|
||||
@ -88,28 +80,22 @@ Username: admin
|
||||
Password: unleash4all
|
||||
```
|
||||
|
||||
The unleash platform shows a list of feature flags that you’ve generated. Click on the ‘New Feature Toggle’ button to create a new feature flag.
|
||||
The unleash platform shows a list of feature flags that you’ve generated. Click on the ‘New Feature Flag' button to create a new feature flag.
|
||||
|
||||
|
||||
|
||||
|
||||
## 3. Create, enable, and configure a feature flag
|
||||
|
||||
|
||||
Next, you will create a feature flag on the platform and turn it on for your React app.
|
||||
|
||||
> **Note:** This document uses feature flags and feature toggles interchangeably. Some people prefer flag; others prefer toggle. We use both - they are synonyms for us.
|
||||
Give your feature flag a unique name and click ‘Create feature flag’.
|
||||
|
||||
In the [Create Toggle view](http://localhost:4242/projects/default/create-toggle/), give your feature flag a unique name and click ‘Create toggle feature’.
|
||||
|
||||
For the purpose of this tutorial, name the feature flag “newNotificationsBadge”. Use the default values in the rest of the feature flag form.
|
||||
For the purpose of this tutorial, name the feature flag `newNotificationsBadge`. Use the default values in the rest of the feature flag form.
|
||||
|
||||
Your new feature flag is created and ready to be used. Enable the flag for your development environment, which makes it accessible to be used in the React app we will generate from your local environment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Your new feature flag is created and ready to be used. Enable the flag for your development environment, which makes it accessible to be used in the React app we will generate from your local environment.
|
||||
|
||||
|
||||
@ -122,7 +108,7 @@ Click on the ‘New API token’ button.
|
||||
|
||||
|
||||
|
||||
Name the API token and connect to the Client-side SDK.
|
||||
Name the API token and connect to the Client-side SDK.
|
||||
|
||||
The token should have access to the “development” environment, as shown in the platform screenshot below.
|
||||
|
||||
@ -130,10 +116,8 @@ The token should have access to the “development” environment, as shown in t
|
||||
|
||||
The API token you have generated can be managed in the API Access view in your project settings. This token will come in handy in Step 5.
|
||||
|
||||
|
||||
## 4. Clone an open source React app
|
||||
|
||||
|
||||
In this section, you will clone an open source React application called [Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app), which is meant to model what a more complex, real life use case would be for a fully-functioning app to experiment in.
|
||||
|
||||
This project leverages many libraries and frameworks to handle the user interface, functionality, database, authentication, and testing of a financial transaction app. These frameworks include Express, Material-UI, Cypress, TypeScript and more.
|
||||
@ -144,8 +128,8 @@ Go to your Terminal and clone the repository with this command:
|
||||
git clone git@github.com:cypress-io/cypress-realworld-app.git
|
||||
```
|
||||
|
||||
> :triangular_flag_on_post: **Note:**
|
||||
Since Yarn is required in order to run the app, make sure you have it installed globally. If you do not, run the command below.
|
||||
> :triangular_flag_on_post: **Note:**
|
||||
> Since Yarn is required in order to run the app, make sure you have it installed globally. If you do not, run the command below.
|
||||
|
||||
```
|
||||
npm install yarn@latest -g
|
||||
@ -170,7 +154,6 @@ Password: s3cret
|
||||
|
||||
For more detailed instructions on the setup process for this app, review the [README](https://github.com/cypress-io/cypress-realworld-app?tab=readme-ov-file#getting-started).
|
||||
|
||||
|
||||
It’s time to pull in your newly created feature flag in your app. Run the following command to install the Unleash React SDK in your repo:
|
||||
|
||||
```
|
||||
@ -189,10 +172,10 @@ Paste in a configuration object:
|
||||
|
||||
```js
|
||||
const config = {
|
||||
url: "http://localhost:4242/api/frontend", // Your local instance Unleash API URL
|
||||
clientKey: "<client_key>", // Your client-side API token
|
||||
refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates
|
||||
appName: "cypress-realworld-app", // The name of your application. It's only used for identifying your application
|
||||
url: "http://localhost:4242/api/frontend", // Your local instance Unleash API URL
|
||||
clientKey: "<client_key>", // Your client-side API token
|
||||
refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates
|
||||
appName: "cypress-realworld-app", // The name of your application. It's only used for identifying your application
|
||||
};
|
||||
```
|
||||
|
||||
@ -200,17 +183,16 @@ In the `Router` section of this file, wrap the `FlagProvider` around the existin
|
||||
|
||||
```js
|
||||
<FlagProvider config={config}>
|
||||
<App />
|
||||
<App />
|
||||
</FlagProvider>
|
||||
```
|
||||
|
||||
Next, replace the `<client_key>` string in the config object with the API token you generated. You can do this by copying the API token into your clipboard from the API Access view table and pasting it into the code.
|
||||
Next, replace the `<client_key>` string in the config object with the API token you generated. You can do this by copying the API token into your clipboard from the API Access view table and pasting it into the code.
|
||||
|
||||
This configuration object is used to populate the `FlagProvider` component that comes from Unleash and wraps around the application, using the credentials to target the specific feature flag you created for the project.
|
||||
|
||||
You can check our documentation on [API tokens and client keys](/reference/api-tokens-and-client-keys) for more specifics and see additional use-cases in our [Client-Side SDK with React](/reference/sdks/react) documentation.
|
||||
|
||||
|
||||
## 5. Use the feature flag to rollout a notifications badge
|
||||
|
||||
In a real world use case for your feature flag, you can gradually rollout new features to a percentage of users by configuring the flag's strategy.
|
||||
@ -229,29 +211,29 @@ Within the `NavBar` component in the file, define and reference the flag you cre
|
||||
const notificationsBadgeEnabled = useFlag("newNotificationsBadge");
|
||||
```
|
||||
|
||||
This flag will be used to conditionally render the notification icon `Badge` that is pulled in from Material-UI.
|
||||
This flag will be used to conditionally render the notification icon `Badge` that is pulled in from Material-UI.
|
||||
If the flag is enabled, the notification badge will display to users and will route them to the Notifications view.
|
||||
|
||||
Find the `Badge` component in the file and wrap it in a boolean operator:
|
||||
|
||||
```js
|
||||
{notificationsBadgeEnabled && (
|
||||
<Badge
|
||||
badgeContent={allNotifications?.length}
|
||||
data-test="nav-top-notifications-count"
|
||||
classes={{ badge: classes.customBadge }}
|
||||
>
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
)}
|
||||
{
|
||||
notificationsBadgeEnabled && (
|
||||
<Badge
|
||||
badgeContent={allNotifications?.length}
|
||||
data-test="nav-top-notifications-count"
|
||||
classes={{ badge: classes.customBadge }}
|
||||
>
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> **Note:** Ensure you have the correct format in your file or the Prettier formatter will display an error.
|
||||
|
||||
> **Note:** Ensure you have the correct format in your file or the Prettier formatter will display an error.
|
||||
|
||||
## 6. Verify the toggle experience
|
||||
|
||||
|
||||
In your Unleash instance, you can toggle your feature flag on or off to verify that the different UI experiences load accordingly.
|
||||
|
||||
|
||||
@ -264,10 +246,8 @@ If you disable the flag, this results in a view of a navigation menu without the
|
||||
|
||||
|
||||
|
||||
|
||||
You've successfully implemented a feature flag using best practices to control the release of a notifications feature in a real world app!
|
||||
|
||||
|
||||
## Conclusion
|
||||
|
||||
In this tutorial, we installed Unleash locally, created a new feature flag, installed Unleash into a React app, and toggled the visibility of a notifications feature within a [real world open source project](https://github.com/cypress-io/cypress-realworld-app)!
|
||||
|
||||
@ -8,24 +8,23 @@ Hello! In this tutorial we’ll show you how to add feature flags to your Ruby a
|
||||
|
||||
In a classic tutorial fashion, we’ll get a list of planets from the [Star Wars API](https://swapi.dev/), with just Ruby (i.e., not Ruby on Rails). We’ll use feature flags to decide whether to call the REST or the GraphQL version of the API.
|
||||
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [1. Best practices for backend apps with Unleash](#1-best-practices-for-backend-apps-with-unleash)
|
||||
- [2. Install a local feature flag provider](#2-install-a-local-feature-flag-provider)
|
||||
- [3. Grab a list of planets from the Star Wars API](#3-grab-a-list-of-planets-from-the-star-wars-api)
|
||||
- [4. Add the GraphQL endpoint](#4-add-the-graphql-endpoint)
|
||||
- [5. Add Unleash to your Ruby app](#5-add-unleash-to-your-ruby-app)
|
||||
- [6. Verify the toggle experience](#6-verify-the-toggle-experience)
|
||||
- [Conclusion](#conclusion)
|
||||
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [1. Best practices for backend apps with Unleash](#1-best-practices-for-backend-apps-with-unleash)
|
||||
- [2. Install a local feature flag provider](#2-install-a-local-feature-flag-provider)
|
||||
- [3. Grab a list of planets from the Star Wars API](#3-grab-a-list-of-planets-from-the-star-wars-api)
|
||||
- [4. Add the GraphQL endpoint](#4-add-the-graphql-endpoint)
|
||||
- [5. Add Unleash to your Ruby app](#5-add-unleash-to-your-ruby-app)
|
||||
- [6. Verify the toggle experience](#6-verify-the-toggle-experience)
|
||||
- [Conclusion](#conclusion)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
For this tutorial, you’ll need the following:
|
||||
|
||||
- Ruby v3+
|
||||
- Git
|
||||
- Docker and Docker Compose
|
||||
- (Optional) Bundler, to manage your gemfile
|
||||
- Ruby v3+
|
||||
- Git
|
||||
- Docker and Docker Compose
|
||||
- (Optional) Bundler, to manage your gemfile
|
||||
|
||||
|
||||
|
||||
@ -37,8 +36,8 @@ Ruby is a backend language, so there are special considerations to plan around w
|
||||
|
||||
Most importantly, you must:
|
||||
|
||||
- Limit feature flag payloads for scalability, security, and efficiency
|
||||
- Use graceful degradation where possible to improve the resiliency of your architecture.
|
||||
- Limit feature flag payloads for scalability, security, and efficiency
|
||||
- Use graceful degradation where possible to improve the resiliency of your architecture.
|
||||
|
||||
For a complete list of architectural guidelines, including caching strategies, see our [best practices for building and scaling feature flag systems](https://docs.getunleash.io/topics/feature-flags/feature-flag-best-practices).
|
||||
|
||||
@ -64,7 +63,7 @@ Username: admin
|
||||
Password: unleash4all
|
||||
```
|
||||
|
||||
Click the ‘New feature toggle’ button to create a new feature flag.
|
||||
Click the ‘New feature flag’ button to create a new feature flag.
|
||||
|
||||
|
||||
|
||||
@ -177,8 +176,8 @@ Now, let’s connect our project to Unleash so that you can toggle that feature
|
||||
|
||||
You’ll need 2 things:
|
||||
|
||||
- The URL of your Unleash instance’s API. So far it’s `[http://localhost:4242/api/](http://localhost:4242/api/)` for your local version. You’ll want to replace it with your remote instance.
|
||||
- The API token we created on our Unleash instance, feel free to create another one if you can’t find it.
|
||||
- The URL of your Unleash instance’s API. So far it’s `[http://localhost:4242/api/](http://localhost:4242/api/)` for your local version. You’ll want to replace it with your remote instance.
|
||||
- The API token we created on our Unleash instance, feel free to create another one if you can’t find it.
|
||||
|
||||
With these 2, you can initialize your Unleash client as follows:
|
||||
|
||||
@ -225,8 +224,8 @@ Now that we’ve connected our project to Unleash and grabbed our feature flag,
|
||||
|
||||
All done! Now you know how to add feature flags with Unleash in Ruby. You’ve learned how to:
|
||||
|
||||
- Toggle between a REST and a GraphQL endpoint based on a feature flag
|
||||
- Install Unleash and create/enable a feature flag
|
||||
- Grab the value of a feature flag with the Ruby SDK
|
||||
- Toggle between a REST and a GraphQL endpoint based on a feature flag
|
||||
- Install Unleash and create/enable a feature flag
|
||||
- Grab the value of a feature flag with the Ruby SDK
|
||||
|
||||
Thank you
|
||||
|
||||
@ -7,17 +7,17 @@ In our [Ruby feature flag tutorial](/feature-flag-tutorials/ruby), we implemente
|
||||
|
||||
We built many features into Unleash, our open-source feature flag platform, to address the complexities of releasing code. This tutorial will explore the following:
|
||||
|
||||
- [Gradual Rollouts for Ruby Apps](#gradual-rollouts-for-ruby-apps)
|
||||
- [Canary Deployments in Ruby](#canary-deployments-in-ruby)
|
||||
- [What is a canary deployment?](#what-is-a-canary-deployment)
|
||||
- [How to do canary deployments with a feature flag in Ruby?](#how-to-do-canary-deployments-with-a-feature-flag-in-ruby)
|
||||
- [Configure strategy constraints for canary deployments](#configure-strategy-constraints-for-canary-deployments)
|
||||
- [Server-side A/B Testing in Ruby](#server-side-ab-testing-in-ruby)
|
||||
- [Feature Flag Analytics and Reporting in Ruby](#feature-flag-analytics-and-reporting-in-ruby)
|
||||
- [Enable impression data events in Ruby](#enable-impression-data-events-in-ruby)
|
||||
- [Application Metrics \& Monitoring for Ruby apps](#application-metrics--monitoring-for-ruby-apps)
|
||||
- [Feature Flag Audit Logs in Ruby](#feature-flag-audit-logs-in-ruby)
|
||||
- [Flag Automation \& Workflow Integration for Ruby Apps](#flag-automation--workflow-integration-for-ruby-apps)
|
||||
- [Gradual Rollouts for Ruby Apps](#gradual-rollouts-for-ruby-apps)
|
||||
- [Canary Deployments in Ruby](#canary-deployments-in-ruby)
|
||||
- [What is a canary deployment?](#what-is-a-canary-deployment)
|
||||
- [How to do canary deployments with a feature flag in Ruby?](#how-to-do-canary-deployments-with-a-feature-flag-in-ruby)
|
||||
- [Configure strategy constraints for canary deployments](#configure-strategy-constraints-for-canary-deployments)
|
||||
- [Server-side A/B Testing in Ruby](#server-side-ab-testing-in-ruby)
|
||||
- [Feature Flag Analytics and Reporting in Ruby](#feature-flag-analytics-and-reporting-in-ruby)
|
||||
- [Enable impression data events in Ruby](#enable-impression-data-events-in-ruby)
|
||||
- [Application Metrics \& Monitoring for Ruby apps](#application-metrics--monitoring-for-ruby-apps)
|
||||
- [Feature Flag Audit Logs in Ruby](#feature-flag-audit-logs-in-ruby)
|
||||
- [Flag Automation \& Workflow Integration for Ruby Apps](#flag-automation--workflow-integration-for-ruby-apps)
|
||||
|
||||
> Note:
|
||||
> We're using the `httpx` gem to make sending requests easier.
|
||||
@ -232,11 +232,11 @@ At the flag level in Unleash, navigate to the Settings view.
|
||||
|
||||
|
||||
|
||||
In the Settings view, there's an edit button with pencil icon. This will take us to the ‘Edit Feature toggle’ form.
|
||||
In the Settings view, there's an edit button with pencil icon. This will take us to the ‘Edit Feature flag’ form.
|
||||
|
||||
Turn on the impression data and then save it. Events will now be emitted every time the feature flag is triggered.
|
||||
|
||||
|
||||
|
||||
|
||||
You can also use our API command to enable the impression data:
|
||||
|
||||
@ -394,4 +394,4 @@ Here’s how this can be done via our API:
|
||||
|
||||
Review [API docs on archiving flags](/reference/api/unleash/archive-feature).
|
||||
|
||||
Learn more about different use cases in our [Ruby SDK documentation](/reference/sdks/ruby).
|
||||
Learn more about different use cases in our [Ruby SDK documentation](/reference/sdks/ruby).
|
||||
|
||||
@ -41,11 +41,11 @@ First, a global store that will contain our habits and their completion dates. J
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export const habitStore = writable([
|
||||
{
|
||||
id: 1,
|
||||
name: "Walk 10k steps",
|
||||
completedDays: [],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "Walk 10k steps",
|
||||
completedDays: [],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
@ -155,8 +155,8 @@ Now we have a fully functioning Svelte app in all its glory! Essentially, it's a
|
||||
|
||||
We have the basics of the app set up, but we could make it more user-friendly. Let's add some more functionality:
|
||||
|
||||
- Add the ability for users create their own habits
|
||||
- Limit the number of habits a user can create to a certain amount so we can turn this into a commercial product.
|
||||
- Add the ability for users create their own habits
|
||||
- Limit the number of habits a user can create to a certain amount so we can turn this into a commercial product.
|
||||
|
||||
Let's do all of this in another component named `AddHabit.svelte`.
|
||||
|
||||
@ -205,10 +205,10 @@ Let's do all of this in another component named `AddHabit.svelte`.
|
||||
|
||||
What's happening here? A few things:
|
||||
|
||||
- An input and a button to add new habits to the store, until an arbitrary limit is reached
|
||||
- A `maxHabits` prop is used to determine that limit
|
||||
- When this maximum limit is reached, a modal dialog opens
|
||||
- We reset the form after submission to clear the input
|
||||
- An input and a button to add new habits to the store, until an arbitrary limit is reached
|
||||
- A `maxHabits` prop is used to determine that limit
|
||||
- When this maximum limit is reached, a modal dialog opens
|
||||
- We reset the form after submission to clear the input
|
||||
|
||||
<video
|
||||
width="600px"
|
||||
@ -232,7 +232,7 @@ Next, create a feature flag called `maxHabitsIncreased`.
|
||||
|
||||
Based on whether this flag is enabled or not, we'll set the `maxHabits` value to either 6 or 2. You could set this directly in a flag value if you wanted as well.
|
||||
|
||||
### Basic toggle
|
||||
### Configure your app with Svelke SDK
|
||||
|
||||
We'll use the Svelte SDK to wrap a context provider around `App.svelte` like so:
|
||||
|
||||
@ -269,6 +269,6 @@ Now that our SDK is setup, we can modify our `App.svelte` to set the value of th
|
||||
|
||||
You now have a SvelteKit app with feature flags. More precisely, you've learned:
|
||||
|
||||
- How to make a habit tracking app with SvelteKit
|
||||
- How to add a feature flag to a full stack app using Unleash
|
||||
- The different approaches to feature flagging on a static vs SSR context
|
||||
- How to make a habit tracking app with SvelteKit
|
||||
- How to add a feature flag to a full stack app using Unleash
|
||||
- The different approaches to feature flagging on a static vs SSR context
|
||||
|
||||
@ -25,11 +25,11 @@ password: unleash4all
|
||||
|
||||
## 3. Create your first flag {#create-a-flag}
|
||||
|
||||
1. Navigate to the Feature toggles list
|
||||
2. Click 'New feature toggle'
|
||||
3. Give it a unique name, and click 'Create feature toggle'
|
||||
1. Navigate to the Feature flags list
|
||||
2. Click 'New feature flag'
|
||||
3. Give it a unique name, and click 'Create feature flag'
|
||||
|
||||
For a detailed guide on how to create a flag through the UI, [you can follow this guide](/how-to/how-to-create-feature-toggles.md).
|
||||
For a detailed guide on how to create a flag through the UI, [you can follow this guide](/how-to/how-to-create-feature-toggles.md).
|
||||
|
||||
## 4a. Connect a client-side SDK {#connect-a-client-side-sdk}
|
||||
|
||||
@ -40,46 +40,46 @@ Now you can open your application code and connect through one of the [client-si
|
||||
The following example shows you how you could use the [JavaScript SDK](/generated/sdks/client-side/javascript-browser.md) to connect to the Unleash demo frontend API:
|
||||
|
||||
```javascript
|
||||
import { UnleashClient } from 'unleash-proxy-client';
|
||||
import { UnleashClient } from "unleash-proxy-client";
|
||||
|
||||
const unleash = new UnleashClient({
|
||||
url: 'https://<your-unleash-instance>/api/frontend',
|
||||
clientKey: '<your-token>',
|
||||
appName: '<your-app-name>',
|
||||
url: "https://<your-unleash-instance>/api/frontend",
|
||||
clientKey: "<your-token>",
|
||||
appName: "<your-app-name>",
|
||||
});
|
||||
|
||||
unleash.on('synchronized', () => {
|
||||
// Unleash is ready to serve updated feature flags.
|
||||
unleash.on("synchronized", () => {
|
||||
// Unleash is ready to serve updated feature flags.
|
||||
|
||||
// Check a feature flag
|
||||
if (unleash.isEnabled('some-toggle')) {
|
||||
// do cool new things when the flag is enabled
|
||||
}
|
||||
// Check a feature flag
|
||||
if (unleash.isEnabled("some-flag")) {
|
||||
// do cool new things when the flag is enabled
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 4b. Connect a backend SDK {#connect-a-backend-sdk}
|
||||
|
||||
To try Unleash with a server-side technology, create a [client token](/reference/api-tokens-and-client-keys#client-tokens) and use `<your-unleash-instance>/api` as the API URL.
|
||||
To try Unleash with a server-side technology, create a [client token](/reference/api-tokens-and-client-keys#client-tokens) and use `<your-unleash-instance>/api` as the API URL.
|
||||
|
||||
Now you can open up your application code and create a connection to Unleash using one of our [SDKs](/reference/sdks/index.md). Here's an example using the [NodeJS SDK](/reference/sdks/node) to connect to the Unleash demo instance:
|
||||
|
||||
```javascript
|
||||
const { initialize } = require('unleash-client');
|
||||
const { initialize } = require("unleash-client");
|
||||
const unleash = initialize({
|
||||
url: 'https://<your-unleash-instance>/api/',
|
||||
appName: '<your-app-name>',
|
||||
customHeaders: {
|
||||
Authorization: '<your-token>',
|
||||
},
|
||||
url: "https://<your-unleash-instance>/api/",
|
||||
appName: "<your-app-name>",
|
||||
customHeaders: {
|
||||
Authorization: "<your-token>",
|
||||
},
|
||||
});
|
||||
|
||||
unleash.on('synchronized', () => {
|
||||
// Unleash is ready to serve updated feature flags.
|
||||
unleash.on("synchronized", () => {
|
||||
// Unleash is ready to serve updated feature flags.
|
||||
|
||||
if(unleash.isEnabled('some-toggle')){
|
||||
// do cool new things when the flag is enabled
|
||||
}
|
||||
if (unleash.isEnabled("some-flag")) {
|
||||
// do cool new things when the flag is enabled
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
@ -94,14 +94,16 @@ NOTE: This is a demo instance set up with the Enterprise version. [More informat
|
||||
If you don't have your own Unleash instance set up, you can use the Unleash demo instance. In that case, the details are:
|
||||
|
||||
**Client Side**
|
||||
- API URL: `https://app.unleash-hosted.com/demo/api/frontend`
|
||||
- Frontend key: `demo-app:default.bf8d2a449a025d1715a28f218dd66a40ef4dcc97b661398f7e05ba67`
|
||||
|
||||
- API URL: `https://app.unleash-hosted.com/demo/api/frontend`
|
||||
- Frontend key: `demo-app:default.bf8d2a449a025d1715a28f218dd66a40ef4dcc97b661398f7e05ba67`
|
||||
|
||||
**Server Side**
|
||||
- API URL: `https://app.unleash-hosted.com/demo/api`
|
||||
- Client key: `56907a2fa53c1d16101d509a10b78e36190b0f918d9f122d`
|
||||
|
||||
Curl command to test credentials and retrieve feature toggles:
|
||||
- API URL: `https://app.unleash-hosted.com/demo/api`
|
||||
- Client key: `56907a2fa53c1d16101d509a10b78e36190b0f918d9f122d`
|
||||
|
||||
Curl command to test credentials and retrieve feature flags:
|
||||
|
||||
```
|
||||
curl https://app.unleash-hosted.com/demo/api/client/features \
|
||||
@ -110,10 +112,8 @@ curl https://app.unleash-hosted.com/demo/api/client/features \
|
||||
|
||||
### Unleash Pro & Enterprise Instances {#unleash-pro-and-enterprise-instances}
|
||||
|
||||
You can run Unleash in the cloud by using our hosted offerings. Please see the [plans page](https://www.getunleash.io/pricing) to learn more.
|
||||
You can run Unleash in the cloud by using our hosted offerings. Please see the [plans page](https://www.getunleash.io/pricing) to learn more.
|
||||
|
||||
### Other Local Setup Options
|
||||
|
||||
There are several [more options to get started locally.](using-unleash/deploy/getting-started.md)
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user