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
|
||||
---
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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)
|
||||
- [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.
|
||||
|
||||
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,13 +87,12 @@ 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**
|
||||
|
||||
|
||||
Once you’ve filled out the proper constraint fields, select ‘Done’ and save the strategy.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
## 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.
|
||||
@ -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.
|
||||
|
||||
|
||||
## 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
|
||||
@ -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
|
||||
@ -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.
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -96,7 +96,9 @@ const Activity = () => {
|
||||
useEffect(() => {
|
||||
const fetchActivity = async () => {
|
||||
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();
|
||||
setActivityData(data);
|
||||
} catch (error) {
|
||||
@ -117,8 +119,12 @@ const Activity = () => {
|
||||
</h1>
|
||||
{showActivity ? (
|
||||
<>
|
||||
<p className="mb-2">Activity: {activityData.activity}</p>
|
||||
<p className="mb-2">Participants: {activityData.participants}</p>
|
||||
<p className="mb-2">
|
||||
Activity: {activityData.activity}
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
Participants: {activityData.participants}
|
||||
</p>
|
||||
<p>Price: ${activityData.price}</p>
|
||||
</>
|
||||
) : (
|
||||
@ -132,7 +138,7 @@ const 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:
|
||||
|
||||
|
||||
|
||||
@ -140,9 +146,9 @@ The activity is displayed:
|
||||
|
||||
|
||||
|
||||
If we toggle it off:
|
||||
If we turn it off:
|
||||
|
||||
|
||||
|
||||
|
||||
No activity is displayed:
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -30,7 +30,6 @@ Applications evolve, and teams must manage all aspects of this evolution, includ
|
||||
- [`useFlagsStatus` example](#useflagsstatus-example)
|
||||
- [Additional Examples](#additional-examples)
|
||||
|
||||
|
||||
## 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.)
|
||||
@ -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,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)
|
||||
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
|
||||
@ -41,13 +38,10 @@ In this tutorial, you will need the following:
|
||||
- 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:
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
@ -145,7 +129,7 @@ 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.
|
||||
> 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:
|
||||
|
||||
```
|
||||
@ -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.
|
||||
|
||||
|
||||
## 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.
|
||||
@ -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:
|
||||
|
||||
```js
|
||||
{notificationsBadgeEnabled && (
|
||||
{
|
||||
notificationsBadgeEnabled && (
|
||||
<Badge
|
||||
badgeContent={allNotifications?.length}
|
||||
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 />
|
||||
</Badge>
|
||||
)}
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> **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)!
|
||||
|
||||
@ -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)
|
||||
- [Conclusion](#conclusion)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
For this tutorial, you’ll need the following:
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -25,9 +25,9 @@ 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).
|
||||
|
||||
@ -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:
|
||||
|
||||
```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.on("synchronized", () => {
|
||||
// Unleash is ready to serve updated feature flags.
|
||||
|
||||
// Check a feature flag
|
||||
if (unleash.isEnabled('some-toggle')) {
|
||||
if (unleash.isEnabled("some-flag")) {
|
||||
// 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:
|
||||
|
||||
```javascript
|
||||
const { initialize } = require('unleash-client');
|
||||
const { initialize } = require("unleash-client");
|
||||
const unleash = initialize({
|
||||
url: 'https://<your-unleash-instance>/api/',
|
||||
appName: '<your-app-name>',
|
||||
url: "https://<your-unleash-instance>/api/",
|
||||
appName: "<your-app-name>",
|
||||
customHeaders: {
|
||||
Authorization: '<your-token>',
|
||||
Authorization: "<your-token>",
|
||||
},
|
||||
});
|
||||
|
||||
unleash.on('synchronized', () => {
|
||||
unleash.on("synchronized", () => {
|
||||
// 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
|
||||
}
|
||||
});
|
||||
@ -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`
|
||||
|
||||
**Server Side**
|
||||
|
||||
- API URL: `https://app.unleash-hosted.com/demo/api`
|
||||
- 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 \
|
||||
@ -115,5 +117,3 @@ You can run Unleash in the cloud by using our hosted offerings. Please see the [
|
||||
### 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