Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-12 13:48:35 +02:00
Code Issues Projects Releases Wiki Activity

docs: update quickstart and tutorials with flag reference (#7142)

Browse Source 
<!-- 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 2024-05-24 06:51:50 -04:00 committed by GitHub
parent 83dfdc7905
commit 81c6caf211
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 238 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/docs/feature-flag-tutorials/dotnet/implementing-feature-flags-dotnet.md
View File

@ -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." description: "How to use Unleash feature flags with .NET."
slug: /feature-flag-tutorials/dotnet slug: /feature-flag-tutorials/dotnet
--- ---
@ -49,7 +49,7 @@ Username: admin
Password: unleash4all 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.
![Create a new feature flag](../ruby/new-ff.png) ![Create a new feature flag](../ruby/new-ff.png)

2
website/docs/feature-flag-tutorials/java/implementing-feature-flags.md
View File

@ -75,7 +75,7 @@ Username: admin
Password: unleash4all 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.
![This is an image of the Unleash platform to create a new Java feature flag.](/img/tutorial-create-flag.png) ![This is an image of the Unleash platform to create a new Java feature flag.](/img/tutorial-create-flag.png)

35
website/docs/feature-flag-tutorials/java/spring-boot-examples.md
View File

@ -18,10 +18,8 @@ We built multiple features into Unleash, an open-source feature flag platform, t
- [Feature Flag Audit Logs in Java](#feature-flag-audit-logs-in-java) - [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) - [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
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. 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. 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 ## Canary Deployments in Java
### What is a canary deployment? ### 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. 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? ### 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. 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: 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. Let’s walk through how to use strategy constraints in our Java app.
### Configure strategy constraints for canary deployments ### 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. 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. In Unleash, start from the feature flag view and edit your Gradual Rollout strategy from your development environment.
@ -95,13 +87,12 @@ Let’s say we are experimenting with releasing the new service implementation t
![The new constraint form includes a context field, operator, and values field to customize the conditions under which a user will be exposed to the flag](/img/ex-constraint-page.png) ![The new constraint form includes a context field, operator, and values field to customize the conditions under which a user will be exposed to the flag](/img/ex-constraint-page.png)
We can configure the constraint in the form to match these requirements: We can configure the constraint in the form to match these requirements:
- The context field is set to **environment** - The context field is set to **environment**
- The operator is set to **NOT_IN** - The operator is set to **NOT_IN**
- The value added is **production** - The value added is **production**
Once you’ve filled out the proper constraint fields, select ‘Done’ and save the strategy. Once you’ve filled out the proper constraint fields, select ‘Done’ and save the strategy.
![Once you add a constraint, you can see it listed underneath your strategy in Unleash.](/img/python-ex-constraint-added.png) ![Once you add a constraint, you can see it listed underneath your strategy in Unleash.](/img/python-ex-constraint-added.png)
@ -131,10 +122,8 @@ 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. 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 ## 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). 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.
@ -159,10 +148,8 @@ 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. Next, we can examine how Unleash can track the results and provide insights with data analytics.
## Feature Flag Analytics and Reporting in Java ## 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: 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 - Security concerns
@ -179,9 +166,9 @@ At the flag level in Unleash, navigate to the Settings view.
![From your flag page in Unleash, you go to Settings and edit the settings for your flag called 'feature information'.](/img/spring-boot-ex-edit-flag.png) ![From your flag page in Unleash, you go to Settings and edit the settings for your flag called 'feature information'.](/img/spring-boot-ex-edit-flag.png)
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.
![Enable impression data by turning the toggle on in the form.](/img/spring-boot-ex-enable-impression-data.png) ![Enable impression data by turning switching it on in the form.](/img/spring-boot-ex-enable-impression-data.png)
Turn on the impression data and then save it. Events will now be emitted every time the feature flag is triggered. 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). You can find more information in our [impression data docs](/reference/impression-data#impression-event-data).
## Application Metrics & Monitoring ## 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. 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.
![A Metrics graph provides the visualization of your flag being exposed in your environments for your connected application.](/img/spring-boot-ex-metrics.png) ![A Metrics graph provides the visualization of your flag being exposed in your environments for your connected application.](/img/spring-boot-ex-metrics.png)
Our metrics are great for understanding user traffic. You can get a better sense of: 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? - What time(s) of the day or week are requests the highest?
* Which feature flags are the most popular? - 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. 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. 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 ## 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: 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 1. Organizational compliance
@ -229,10 +212,8 @@ For our Spring Boot app, we can view Event logs to monitor the changes to flag s
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. 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 ## 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. 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. 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.

2
website/docs/feature-flag-tutorials/java/spring-boot-implementing-feature-flags.md
View File

@ -78,7 +78,7 @@ Username: admin
Password: unleash4all 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.
![This is an image of the Unleash platform to create a new Spring Boot feature flag.](/img/tutorial-create-flag.png) ![This is an image of the Unleash platform to create a new Spring Boot feature flag.](/img/tutorial-create-flag.png)

18
website/docs/feature-flag-tutorials/nextjs/implementing-feature-flags-nextjs.md
View File

@ -96,7 +96,9 @@ const Activity = () => {
useEffect(() => { useEffect(() => {
const fetchActivity = async () => { const fetchActivity = async () => {
try { try {
const response = await fetch("https://www.boredapi.com/api/activity/"); const response = await fetch(
"https://www.boredapi.com/api/activity/"
);
const data = await response.json(); const data = await response.json();
setActivityData(data); setActivityData(data);
} catch (error) { } catch (error) {
@ -117,8 +119,12 @@ const Activity = () => {
</h1> </h1>
{showActivity ? ( {showActivity ? (
<> <>
<p className="mb-2">Activity: {activityData.activity}</p> <p className="mb-2">
<p className="mb-2">Participants: {activityData.participants}</p> Activity: {activityData.activity}
</p>
<p className="mb-2">
Participants: {activityData.participants}
</p>
<p>Price: ${activityData.price}</p> <p>Price: ${activityData.price}</p>
</> </>
) : ( ) : (
@ -132,7 +138,7 @@ const Activity = () => {
export default Activity; 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:
![Gradual Rollout](/img/gradual-rollout-nextjs.png) ![Gradual Rollout](/img/gradual-rollout-nextjs.png)
@ -140,9 +146,9 @@ The activity is displayed:
![Activity Successful](/img/activity-success-nextjs.png) ![Activity Successful](/img/activity-success-nextjs.png)
If we toggle it off: If we turn it off:
![Toggle Off](/img/gradual-rollout-nextjs-1.png) ![Turn flag Off](/img/gradual-rollout-nextjs-1.png)
No activity is displayed: No activity is displayed:

4
website/docs/feature-flag-tutorials/python/implementing-feature-flags.md
View File

@ -82,7 +82,7 @@ Username: admin
Password: unleash4all 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.
![Image of the Unleash platform to create a new feature flag](/img/tutorial-create-flag.png) ![Image of the Unleash platform to create a new feature flag](/img/tutorial-create-flag.png)
@ -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. 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. 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.

3
website/docs/feature-flag-tutorials/react/examples.md
View File

@ -30,7 +30,6 @@ Applications evolve, and teams must manage all aspects of this evolution, includ
- [`useFlagsStatus` example](#useflagsstatus-example) - [`useFlagsStatus` example](#useflagsstatus-example)
- [Additional Examples](#additional-examples) - [Additional Examples](#additional-examples)
## Gradual Rollouts for React Apps ## Gradual Rollouts for React Apps
It’s common to use feature flags to roll out changes to a percentage of users. Flags allow you to monitor your application and infrastructure for undesired behavior (such as errors, memory bottlenecks, etc.) and to see if the changes improve the outcomes for your application (to increase sales, reduce support requests, etc.) It’s common to use feature flags to roll out changes to a percentage of users. Flags allow you to monitor your application and infrastructure for undesired behavior (such as errors, memory bottlenecks, etc.) and to see if the changes improve the outcomes for your application (to increase sales, reduce support requests, etc.)
@ -261,7 +260,7 @@ At the flag level in Unleash, navigate to the Settings view.
![Editing feature flag settings in Unleash.](/img/react-ex-edit-settings.png) ![Editing feature flag settings in Unleash.](/img/react-ex-edit-settings.png)
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.
![Enabling impression data for a feature flag.](/img/react-ex-enable-impression-data.png) ![Enabling impression data for a feature flag.](/img/react-ex-enable-impression-data.png)

36
website/docs/feature-flag-tutorials/react/implementing-feature-flags.md
View File

@ -5,7 +5,6 @@ slug: /feature-flag-tutorials/react
import VideoContent from '@site/src/components/VideoContent.jsx'; 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. [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? 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,14 +24,12 @@ Along the way, you will:
5. [Toggle the visibility of a feature component](#5-use-the-feature-flag-to-rollout-a-notifications-badge) 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) 6. [Verify the toggle experience](#6-verify-the-toggle-experience)
Watch the video tutorial and follow along with the code from this documentation. Watch the video tutorial and follow along with the code from this documentation.
<VideoContent videoUrls={["https://www.youtube.com/embed/-VzI0wqLDuw?si=cxLojllkIrZD8sf5"]}/> <VideoContent videoUrls={["https://www.youtube.com/embed/-VzI0wqLDuw?si=cxLojllkIrZD8sf5"]}/>
## Prerequisites ## Prerequisites
In this tutorial, you will need the following: In this tutorial, you will need the following:
- A web browser like Chrome or Firefox - A web browser like Chrome or Firefox
@ -41,13 +38,10 @@ In this tutorial, you will need the following:
- NPM, Node and Yarn to install and run a React app - NPM, Node and Yarn to install and run a React app
- (Optional) A code editor like Visual Studio Code - (Optional) A code editor like Visual Studio Code
![React Feature Flag Architecture Diagram](/img/react-tutorial-architecture-diagram.png) ![React Feature Flag Architecture Diagram](/img/react-tutorial-architecture-diagram.png)
## 1. Architect to limit PII and configuration leakage ## 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. Since React is a front-end framework, there are special security considerations to plan around when implementing feature flags.
Most importantly, you must: Most importantly, you must:
@ -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). 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 ## 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. 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: 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 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.
![Create a new feature flag](/img/react-tutorial-create-new-flag.png) ![Create a new feature flag](/img/react-tutorial-create-new-flag.png)
## 3. Create, enable, and configure a 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. 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.
![Create feature flag form](/img/react-tutorial-create-flag-form.png) ![Create feature flag form](/img/react-tutorial-create-flag-form.png)
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.
![Enable flag for development environment](/img/react-tutorial-enable-dev-env.png) ![Enable flag for development environment](/img/react-tutorial-enable-dev-env.png)
@ -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. 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 ## 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. 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. 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.
@ -145,7 +129,7 @@ git clone git@github.com:cypress-io/cypress-realworld-app.git
``` ```
> :triangular_flag_on_post: **Note:** > :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. > 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 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). 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: 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:
``` ```
@ -210,7 +193,6 @@ This configuration object is used to populate the `FlagProvider` component that
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. 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 ## 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. 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.
@ -235,7 +217,8 @@ If the flag is enabled, the notification badge will display to users and will ro
Find the `Badge` component in the file and wrap it in a boolean operator: Find the `Badge` component in the file and wrap it in a boolean operator:
```js ```js
{notificationsBadgeEnabled && ( {
notificationsBadgeEnabled && (
<Badge <Badge
badgeContent={allNotifications?.length} badgeContent={allNotifications?.length}
data-test="nav-top-notifications-count" data-test="nav-top-notifications-count"
@ -243,15 +226,14 @@ Find the `Badge` component in the file and wrap it in a boolean operator:
> >
<NotificationsIcon /> <NotificationsIcon />
</Badge> </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 ## 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. In your Unleash instance, you can toggle your feature flag on or off to verify that the different UI experiences load accordingly.
![Unleash turn on feature flag](/img/react-tutorial-disabled-flag.png) ![Unleash turn on feature flag](/img/react-tutorial-disabled-flag.png)
@ -264,10 +246,8 @@ If you disable the flag, this results in a view of a navigation menu without the
![Notification icon badge not visible](/img/react-tutorial-rwa-feature-off.png) ![Notification icon badge not visible](/img/react-tutorial-rwa-feature-off.png)
You've successfully implemented a feature flag using best practices to control the release of a notifications feature in a real world app! You've successfully implemented a feature flag using best practices to control the release of a notifications feature in a real world app!
## Conclusion ## 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)! 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)!

3
website/docs/feature-flag-tutorials/ruby/implementing-feature-flags-ruby.md
View File

@ -17,7 +17,6 @@ In a classic tutorial fashion, we’ll get a list of planets from the [Star Wars
- [6. Verify the toggle experience](#6-verify-the-toggle-experience) - [6. Verify the toggle experience](#6-verify-the-toggle-experience)
- [Conclusion](#conclusion) - [Conclusion](#conclusion)
## Prerequisites ## Prerequisites
For this tutorial, you’ll need the following: For this tutorial, you’ll need the following:
@ -64,7 +63,7 @@ Username: admin
Password: unleash4all 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.
![Create a new feature flag](./new-ff.png) ![Create a new feature flag](./new-ff.png)

4
website/docs/feature-flag-tutorials/ruby/ruby-examples.md
View File

@ -232,11 +232,11 @@ At the flag level in Unleash, navigate to the Settings view.
![From your flag page in Unleash, you go to Settings and edit the settings for your flag called 'feature information'.](./flag-settings.png) ![From your flag page in Unleash, you go to Settings and edit the settings for your flag called 'feature information'.](./flag-settings.png)
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. Turn on the impression data and then save it. Events will now be emitted every time the feature flag is triggered.
![There is a toggle that turns on the impression data events in your flag form.](./enable-impression-data.png) ![There is a flag that turns on the impression data events in your flag form.](./enable-impression-data.png)
You can also use our API command to enable the impression data: You can also use our API command to enable the impression data:

2
website/docs/feature-flag-tutorials/sveltekit/implementing-feature-flags-sveltekit.md
View File

@ -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. 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: We'll use the Svelte SDK to wrap a context provider around `App.svelte` like so:

36
website/docs/quickstart.md
View File

@ -25,9 +25,9 @@ password: unleash4all
## 3. Create your first flag {#create-a-flag} ## 3. Create your first flag {#create-a-flag}
1. Navigate to the Feature toggles list 1. Navigate to the Feature flags list
2. Click 'New feature toggle' 2. Click 'New feature flag'
3. Give it a unique name, and click 'Create feature toggle' 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).
@ -40,19 +40,19 @@ 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: 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 ```javascript
import { UnleashClient } from 'unleash-proxy-client'; import { UnleashClient } from "unleash-proxy-client";
const unleash = new UnleashClient({ const unleash = new UnleashClient({
url: 'https://<your-unleash-instance>/api/frontend', url: "https://<your-unleash-instance>/api/frontend",
clientKey: '<your-token>', clientKey: "<your-token>",
appName: '<your-app-name>', appName: "<your-app-name>",
}); });
unleash.on('synchronized', () => { unleash.on("synchronized", () => {
// Unleash is ready to serve updated feature flags. // Unleash is ready to serve updated feature flags.
// Check a feature flag // Check a feature flag
if (unleash.isEnabled('some-toggle')) { if (unleash.isEnabled("some-flag")) {
// do cool new things when the flag is enabled // do cool new things when the flag is enabled
} }
}); });
@ -65,19 +65,19 @@ To try Unleash with a server-side technology, create a [client token](/reference
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: 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 ```javascript
const { initialize } = require('unleash-client'); const { initialize } = require("unleash-client");
const unleash = initialize({ const unleash = initialize({
url: 'https://<your-unleash-instance>/api/', url: "https://<your-unleash-instance>/api/",
appName: '<your-app-name>', appName: "<your-app-name>",
customHeaders: { customHeaders: {
Authorization: '<your-token>', Authorization: "<your-token>",
}, },
}); });
unleash.on('synchronized', () => { unleash.on("synchronized", () => {
// Unleash is ready to serve updated feature flags. // Unleash is ready to serve updated feature flags.
if(unleash.isEnabled('some-toggle')){ if (unleash.isEnabled("some-flag")) {
// do cool new things when the flag is enabled // 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: 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** **Client Side**
- API URL: `https://app.unleash-hosted.com/demo/api/frontend` - API URL: `https://app.unleash-hosted.com/demo/api/frontend`
- Frontend key: `demo-app:default.bf8d2a449a025d1715a28f218dd66a40ef4dcc97b661398f7e05ba67` - Frontend key: `demo-app:default.bf8d2a449a025d1715a28f218dd66a40ef4dcc97b661398f7e05ba67`
**Server Side** **Server Side**
- API URL: `https://app.unleash-hosted.com/demo/api` - API URL: `https://app.unleash-hosted.com/demo/api`
- Client key: `56907a2fa53c1d16101d509a10b78e36190b0f918d9f122d` - Client key: `56907a2fa53c1d16101d509a10b78e36190b0f918d9f122d`
Curl command to test credentials and retrieve feature toggles: Curl command to test credentials and retrieve feature flags:
``` ```
curl https://app.unleash-hosted.com/demo/api/client/features \ curl https://app.unleash-hosted.com/demo/api/client/features \
@ -115,5 +117,3 @@ You can run Unleash in the cloud by using our hosted offerings. Please see the [
### Other Local Setup Options ### Other Local Setup Options
There are several [more options to get started locally.](using-unleash/deploy/getting-started.md) There are several [more options to get started locally.](using-unleash/deploy/getting-started.md)