From 4182a3045729246e9176aac3161aa53ccb517263 Mon Sep 17 00:00:00 2001 From: htessaro Date: Mon, 23 Jun 2025 15:00:54 -0300 Subject: [PATCH 01/12] chore: first commit doc-home-getting-started branch --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 26345a543ea2..95fd2615de3a 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ # [Flagsmith](https://flagsmith.com/) is an Open-Source Feature Flagging Tool to Ship Faster & Control Releases -Change the way your team releases software. Roll out, segment, and optimise—with granular control. Stay secure with on-premise and private cloud hosting. +Change the way your team releases software. Roll out, segment, and optimise—with granular control. Stay secure with on-premise and private cloud hosting. * Feature flags: Release features behind the safety of a feature flag * Make changes remotely: Easily toggle individual features on and off, and make changes without deploying new code From 6350cd7b04c37874d111269bce15e268b13d0027 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 26 Jun 2025 10:19:45 -0300 Subject: [PATCH 02/12] docs: add getting started section to menu --- docs/docs/getting-started/_category_.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 docs/docs/getting-started/_category_.json diff --git a/docs/docs/getting-started/_category_.json b/docs/docs/getting-started/_category_.json new file mode 100644 index 000000000000..571b4d7babfd --- /dev/null +++ b/docs/docs/getting-started/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Getting Started", + "position": 2, + "collapsed": true +} From b84206a84fe8062947dbc01b5cd7a8ac675e6f35 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 26 Jun 2025 10:20:56 -0300 Subject: [PATCH 03/12] docs: add glossary page to getting started --- docs/docs/getting-started/glossary.md | 41 +++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 docs/docs/getting-started/glossary.md diff --git a/docs/docs/getting-started/glossary.md b/docs/docs/getting-started/glossary.md new file mode 100644 index 000000000000..21d6c09513b7 --- /dev/null +++ b/docs/docs/getting-started/glossary.md @@ -0,0 +1,41 @@ +--- +title: Glossary +sidebar_label: Glossary +sidebar_position: 3 +--- + +This glossary provides concise definitions for some of the key concepts within Flagsmith: + +- **A/B Testing**: A method of testing different feature variants with different user groups, often implemented using multivariate flags and percentage splits. + +- **Core API**: Flagsmith's private API for programmatic control of the platform. + +- **Edge API / Edge Proxy**: Flagsmith's publicly accessible API, specifically intended for use with our SDKs. + +- **Environment**: Environments are a way to separate the configuration of your features. A project can have any number of environments. + +- **Environment Document**: A JSON document containing all configuration for feature flags in an environment. + +- **Feature**: A configuration that can be enabled, disabled, or set to a specific value. Features are shared across all Environments in a project, but their values/states can be modified between Environments. + +- **Feature Flag**: A boolean or multivariate switch to enable/disable features or set their values dynamically without deploying code. + +- **Identity**: An identity represents a specific user within a particular environment. Identities allow you to manage and override feature settings for individual users, and the same user can have different features enabled in different environments. + +- **Local Evaluation Mode**: A mode where the SDK evaluates feature flags locally using a downloaded environment document, reducing latency and API calls. + +- **Multivariate Flag**: A feature flag that can take on multiple values (not just on/off), useful for A/B testing and gradual rollouts. + +- **Organisation**: Organisations are a way for you and other team members to manage projects and their features. Users can be members of multiple organisations. + +- **Project**: Projects contain one or more Environments that share a single set of Features across all of the Environments within the Project. Organisations can have any number of Projects. + +- **Role-Based Access Control (RBAC)**: A system for managing user permissions and access within an organisation. + +- **SDK (Software Development Kit)**: Client libraries provided by Flagsmith for integrating feature flagging into applications. + +- **Segment**: A group of users defined by traits (e.g., logins, device, location, or custom traits). You can override feature defaults for segments, such as enabling features for a "power user" group. + +- **Staged Rollout**: Gradually enabling a feature for increasing percentages of users to reduce risk. + +- **Trait**: A key-value pair associated with an identity, that can store any type of data. \ No newline at end of file From eb54d3637ce86b6b8cd5cf2f066fcac9ff00d1eb Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 26 Jun 2025 10:21:18 -0300 Subject: [PATCH 04/12] docs: add quick start tutorial to getting started section --- docs/docs/getting-started/quick-start.md | 187 +++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 docs/docs/getting-started/quick-start.md diff --git a/docs/docs/getting-started/quick-start.md b/docs/docs/getting-started/quick-start.md new file mode 100644 index 000000000000..b5f84ac97e0d --- /dev/null +++ b/docs/docs/getting-started/quick-start.md @@ -0,0 +1,187 @@ +--- +title: Quick Start +sidebar_label: Quick Start +sidebar_position: 2 +--- + +import CodeBlock from '@theme/CodeBlock'; import { JsVersion } from '@site/src/components/SdkVersions.js'; + +# Flagsmith Quick Start Guide + +This tutorial will guide you through the core concepts of integrating Flagsmith into your application. + +## Learning objectives + +By the end of this tutorial, you will be able to: + +- Create a Project and your first Flag in the Flagsmith dashboard. +- Import the Flagsmith Javascript SDK into your web page. +- Connect to the Flagsmith API and retrieve your flags. +- Update your application's behavior based on a flag's value. + +## Prerequisites + +You will need access to a Flagsmith instance (either using the SaaS platform or self-hosted) and a basic understanding of HTML and JavaScript. + +:::tip +If you're using the SaaS platform, log in at [Flagsmith.com](https://flagsmith.com/). If you're self-hosting, log in to your deployed instance. +::: + +## 1. Create a Project and Flag in the Dashboard + +We're going to create an Organisation (if you haven't already), a Project, and your first Flag. + +![Create Organisation](/img/quickstart/demo_create_1.png) + +Flagsmith manages Flags with Projects, so let's create one now: + +![Create Project](/img/quickstart/demo_create_2.png) + +Flagsmith organises Projects into separate Environments. When you create a Project, Flagsmith automatically creates `Development` and `Production` Environments. We will come to these Environments later. Let's go ahead and create our first Flag. This flag will control whether a button shows on our web page. + +![Flagsmith Overview](/img/quickstart/demo_create_3.png) + +Flags within Flagsmith are a combination of both: A Boolean value - the `Flag State` and then optionally: A String/Integer/Boolean value - the `Flag Value`. For now, we're only going to use the `Boolean` value of the flag to control whether the button shows. Create a flag called `show_demo_button`, and leave it as Disabled by default: + +![Flagsmith Overview](/img/quickstart/demo_create_4.png) + +## 2. Import the Javascript SDK + +OK so we've set up our flag; now let's bring it into our application. We have a (pretty small!) web page: + +```html + + + + + Flagsmith Quickstart Guide + + +

Here's our button!

+
+ +
+ + +``` + +The page looks like this: + +
+ +For the purposes of this quickstart tutorial, we will import the SDK inline into our web page: + +{ `` } + +## 3. Connect to the Flagsmith API + +We can now connect to the Flagsmith API and get our Flags. When you initialise the Flagsmith SDK, you have to provide an Environment ID. This way, the SDK knows which Project and Environment to grab flags for. Head to the Environment Settings page within Flagsmith, and copy the API key: + +![SDK Keys](/img/quickstart/demo_create_6.png) + +Then paste your API key into the code below: + +```html + +``` + +Now when the browser opens the web page, it will download the Javascript SDK and make a call to `edge.api.flagsmith.com` +to get the flags for our Environment. You can see this in the browser network tab: + +
+ +You can see here that the flag is being returned by the Flagsmith API and it has `"enabled": false` as the value. + +## 4. Hook up our Application + +Let's hook this value up to our button, so that the value of the flag controls whether the button is hidden or shown. + +```html + +``` + +This code sets up a callback, which is triggered when we get a response back from the Flagsmith API. We will check for +the state of the flag and set the display visibility based on the result. + +Our entire webpage now reads like this: + +{ ` + + + + + Flagsmith Quickstart Guide + + + + +

Here's our button!

+ + +`} + + +If we go back and refresh our browser, you will see that the button has now disappeared. + +
+ +We've now put the control of the button visibility behind our Flagsmith Flag! You can now go back to the Flagsmith +dashboard and enable the flag: + +![Flag View](/img/quickstart/demo_create_10.png) + +Return to your browser, refresh the page, and the button will re-appear. + +## Finishing Up + +This was a pretty quick demo, but it covers the core concepts involved in integrating Flagsmith into your application. +From here, some areas of the documentation you might want to check out are: + +- A deeper overview of the application - [Features](basic-features/managing-features.md), + [Identities](basic-features/managing-identities.md) and [Segments](basic-features/segments.md). +- More details about our [API and SDKs](clients/rest.md). +- How you can [run Flagsmith yourself](/deployment) or use our [Hosted API](https://flagsmith.com/). + +## Next Steps + +### Target Use Cases +- [Advanced Targeting and Segmentation](../basic-features/segments.md): Learn how to target features to specific users, groups, or segments for advanced rollout strategies. + +### Best Practices for Using Flags in Code +- [When to use feature flags](../basic-features/index.md): Understand the core concepts and workflows for using feature flags effectively. +- [Using flags in frontend and backend code](../basic-features/managing-features.md): Practical guidance and examples for both client and server-side usage. +- [How to test your application using flags](../advanced-use/ab-testing.md): Strategies for testing and rolling out features safely. + +### Supported SDKs +- [SDKs & Integrations](../clients/): Explore all supported SDKs for integrating Flagsmith with your technology stack. + +### Automation & API Access +- [REST API Reference](../clients/rest.md): Learn how to manage flags programmatically and automate flag changes. + From 8fdd03ce278d05bd659da693896202b1d2a9364e Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 26 Jun 2025 10:59:14 -0300 Subject: [PATCH 05/12] docs: add feature flags page on getting started --- docs/docs/getting-started/feature-flags.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 docs/docs/getting-started/feature-flags.md diff --git a/docs/docs/getting-started/feature-flags.md b/docs/docs/getting-started/feature-flags.md new file mode 100644 index 000000000000..680597c53f4c --- /dev/null +++ b/docs/docs/getting-started/feature-flags.md @@ -0,0 +1,22 @@ +--- +title: Feature Flags +sidebar_label: Feature Flags +sidebar_position: 1 +--- + +Feature Flags are a development methodology that allow you to ship code and features before they are finished. This greatly benefits Continuous Integration and Continuous Deployment (CI/CD). The typical workflow for this is as follows. + +1. You are about to start work on a new feature. Lets imaging you are going to implement a sharing button with your application. + +2. Create a new Feature Flag in Flagsmith, calling it "sharing_button". Set it to enabled on your development environment, and disabled on your production environment. + +3. Start working on the feature. Whenever you write code that shows the button within the UI, wrap it in a conditional statement, testing against the value of the flag "sharing button". Only show the button if the flag is set to True. + +4. Because your button only shows when the "sharing_button" flag is set to True, you are safe to commit your code as you work on the feature. Your code will be live within the production platform, but the functionality is hidden behind the flag. + +5. Once you are happy with your Feature, you can enable the "sharing_button" for other members of your team and with Beta testers. + +6. If everything is working as intended, flip the "sharing_button" flag to True for everyone in your production environment, and your feature is rolled out. + +If you want to learn more about Feature Flags, +[Flickr wrote the seminal blog post on it in 2009](https://code.flickr.net/2009/12/02/flipping-out/). From 156e08ba6d6dcb5be615111086e85a4620e53e40 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 26 Jun 2025 13:57:44 -0300 Subject: [PATCH 06/12] docs: add links to glossary --- docs/docs/getting-started/glossary.md | 34 +++++++++++++-------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/docs/getting-started/glossary.md b/docs/docs/getting-started/glossary.md index 21d6c09513b7..45b806812463 100644 --- a/docs/docs/getting-started/glossary.md +++ b/docs/docs/getting-started/glossary.md @@ -6,36 +6,36 @@ sidebar_position: 3 This glossary provides concise definitions for some of the key concepts within Flagsmith: -- **A/B Testing**: A method of testing different feature variants with different user groups, often implemented using multivariate flags and percentage splits. +- [**A/B Testing**](/advanced-use/ab-testing.md): A method of testing different feature variants with different user groups, often implemented using multivariate flags and percentage splits. -- **Core API**: Flagsmith's private API for programmatic control of the platform. +- [**Core API**](/edge-api/Overview.md#core-api): Flagsmith's private API for programmatic control of the platform. -- **Edge API / Edge Proxy**: Flagsmith's publicly accessible API, specifically intended for use with our SDKs. +- [**Edge API / Edge Proxy**](/advanced-use/edge-api.md): Flagsmith's publicly accessible API, specifically intended for use with our SDKs. -- **Environment**: Environments are a way to separate the configuration of your features. A project can have any number of environments. +- [**Environment**](/basic-features/index.md#environments): Environments are a way to separate the configuration of your features. A project can have any number of environments. -- **Environment Document**: A JSON document containing all configuration for feature flags in an environment. +- [**Environment Document**](/clients/index.md#the-environment-document): A JSON document containing all configuration for feature flags in an environment. -- **Feature**: A configuration that can be enabled, disabled, or set to a specific value. Features are shared across all Environments in a project, but their values/states can be modified between Environments. +- [**Feature**](/basic-features/managing-features.md): A configuration that can be enabled, disabled, or set to a specific value. Features are shared across all Environments in a project, but their values/states can be modified between Environments. -- **Feature Flag**: A boolean or multivariate switch to enable/disable features or set their values dynamically without deploying code. +- [**Feature Flag**](/basic-features/index.md): A boolean or multivariate switch to enable/disable features or set their values dynamically without deploying code. -- **Identity**: An identity represents a specific user within a particular environment. Identities allow you to manage and override feature settings for individual users, and the same user can have different features enabled in different environments. +- [**Identity**](/basic-features/managing-identities.md): An identity represents a specific user within a particular environment. Identities allow you to manage and override feature settings for individual users, and the same user can have different features enabled in different environments. -- **Local Evaluation Mode**: A mode where the SDK evaluates feature flags locally using a downloaded environment document, reducing latency and API calls. +- [**Local Evaluation Mode**](/clients/index.md#local-evaluation): A mode where the SDK evaluates feature flags locally using a downloaded environment document, reducing latency and API calls. -- **Multivariate Flag**: A feature flag that can take on multiple values (not just on/off), useful for A/B testing and gradual rollouts. +- [**Multivariate Flag**](/basic-features/managing-features.md#multi-variate-flags): A feature flag that can take on multiple values (not just on/off), useful for A/B testing and gradual rollouts. -- **Organisation**: Organisations are a way for you and other team members to manage projects and their features. Users can be members of multiple organisations. +- [**Organisation**](/basic-features/index.md#organisations): Organisations are a way for you and other team members to manage projects and their features. Users can be members of multiple organisations. -- **Project**: Projects contain one or more Environments that share a single set of Features across all of the Environments within the Project. Organisations can have any number of Projects. +- [**Project**](/basic-features/index.md#projects): Projects contain one or more Environments that share a single set of Features across all of the Environments within the Project. Organisations can have any number of Projects. -- **Role-Based Access Control (RBAC)**: A system for managing user permissions and access within an organisation. +- [**Role-Based Access Control (RBAC)**](/system-administration/rbac.md): A system for managing user permissions and access within an organisation. -- **SDK (Software Development Kit)**: Client libraries provided by Flagsmith for integrating feature flagging into applications. +- [**SDK (Software Development Kit)**](/clients/): Client libraries provided by Flagsmith for integrating feature flagging into applications. -- **Segment**: A group of users defined by traits (e.g., logins, device, location, or custom traits). You can override feature defaults for segments, such as enabling features for a "power user" group. +- [**Segment**](/basic-features/segments.md): A group of users defined by traits (e.g., logins, device, location, or custom traits). You can override feature defaults for segments, such as enabling features for a "power user" group. -- **Staged Rollout**: Gradually enabling a feature for increasing percentages of users to reduce risk. +- [**Staged Rollout**](/guides-and-examples/staged-feature-rollouts.md): Gradually enabling a feature for increasing percentages of users to reduce risk. -- **Trait**: A key-value pair associated with an identity, that can store any type of data. \ No newline at end of file +- [**Trait**](/basic-features/managing-identities.md#identity-traits): A key-value pair associated with an identity, that can store any type of data. \ No newline at end of file From bf09a8773b50e899021284e3dca0290369d2bbf7 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 26 Jun 2025 14:34:01 -0300 Subject: [PATCH 07/12] docs: improve feature flags page on getting started --- docs/docs/getting-started/feature-flags.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/docs/getting-started/feature-flags.md b/docs/docs/getting-started/feature-flags.md index 680597c53f4c..475b00c687a7 100644 --- a/docs/docs/getting-started/feature-flags.md +++ b/docs/docs/getting-started/feature-flags.md @@ -4,7 +4,27 @@ sidebar_label: Feature Flags sidebar_position: 1 --- -Feature Flags are a development methodology that allow you to ship code and features before they are finished. This greatly benefits Continuous Integration and Continuous Deployment (CI/CD). The typical workflow for this is as follows. +Feature Flags are a development methodology that allow you to ship code and features in your application before they are finished. A feature flag is a control point in your code that determines whether a particular feature or behavior is active. Flags can be simple on/off (boolean) switches, or multivariate, allowing you to select from multiple options or variants. + +### What do Feature Flags enable? + +- **Decouple deployment from release:** Ship code to production with features hidden behind flags, then enable them for users when ready. + +- **Staged rollouts:** Gradually enable features for a subset of users, reducing risk and allowing for real-world testing. [Learn more](/guides-and-examples/staged-feature-rollouts.md) + +- **A/B testing and experimentation:** Test multiple variants of a feature and measure impact. [Learn more](/advanced-use/ab-testing.md) + +- **Remote configuration:** Change app behavior or configuration in real time, without redeploying. + +### Advantages of using Feature Flags + +- **Safer releases:** Reduce the risk of deploying new features by controlling exposure. +- **Faster iteration:** Test and iterate on features quickly, without waiting for deployment cycles. +- **Targeted rollouts:** Enable features for specific users, groups, or environments. +- **Easy rollback:** Instantly turn off features if bugs or issues are detected. +- **Experimentation:** Run experiments and gather data to inform product decisions. + +### Workflow 1. You are about to start work on a new feature. Lets imaging you are going to implement a sharing button with your application. From 22fc9f478f835c646b3193a1e13fd1a03cf685fa Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Mon, 30 Jun 2025 14:44:07 -0300 Subject: [PATCH 08/12] doc: update spelling --- docs/docs/getting-started/feature-flags.md | 4 ++-- docs/docs/getting-started/quick-start.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/getting-started/feature-flags.md b/docs/docs/getting-started/feature-flags.md index 475b00c687a7..624ff76a8945 100644 --- a/docs/docs/getting-started/feature-flags.md +++ b/docs/docs/getting-started/feature-flags.md @@ -4,7 +4,7 @@ sidebar_label: Feature Flags sidebar_position: 1 --- -Feature Flags are a development methodology that allow you to ship code and features in your application before they are finished. A feature flag is a control point in your code that determines whether a particular feature or behavior is active. Flags can be simple on/off (boolean) switches, or multivariate, allowing you to select from multiple options or variants. +Feature Flags are a development methodology that allow you to ship code and features in your application before they are finished. A feature flag is a control point in your code that determines whether a particular feature or behaviour is active. Flags can be simple on/off (boolean) switches, or multivariate, allowing you to select from multiple options or variants. ### What do Feature Flags enable? @@ -14,7 +14,7 @@ Feature Flags are a development methodology that allow you to ship code and feat - **A/B testing and experimentation:** Test multiple variants of a feature and measure impact. [Learn more](/advanced-use/ab-testing.md) -- **Remote configuration:** Change app behavior or configuration in real time, without redeploying. +- **Remote configuration:** Change app behaviour or configuration in real time, without redeploying. ### Advantages of using Feature Flags diff --git a/docs/docs/getting-started/quick-start.md b/docs/docs/getting-started/quick-start.md index b5f84ac97e0d..43e167af7f53 100644 --- a/docs/docs/getting-started/quick-start.md +++ b/docs/docs/getting-started/quick-start.md @@ -17,7 +17,7 @@ By the end of this tutorial, you will be able to: - Create a Project and your first Flag in the Flagsmith dashboard. - Import the Flagsmith Javascript SDK into your web page. - Connect to the Flagsmith API and retrieve your flags. -- Update your application's behavior based on a flag's value. +- Update your application's behaviour based on a flag's value. ## Prerequisites From 54ac90c0f0630deff563bb8cbeeaedaf15b1b23e Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Wed, 16 Jul 2025 10:44:47 -0300 Subject: [PATCH 09/12] doc: minor spelling adjustments --- docs/docs/getting-started/feature-flags.md | 6 +++--- docs/docs/getting-started/glossary.md | 2 +- docs/docs/getting-started/quick-start.md | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/docs/getting-started/feature-flags.md b/docs/docs/getting-started/feature-flags.md index 624ff76a8945..1ddd431c8663 100644 --- a/docs/docs/getting-started/feature-flags.md +++ b/docs/docs/getting-started/feature-flags.md @@ -26,7 +26,7 @@ Feature Flags are a development methodology that allow you to ship code and feat ### Workflow -1. You are about to start work on a new feature. Lets imaging you are going to implement a sharing button with your application. +1. You are about to start work on a new feature. Let's imagine you are going to implement a sharing button with your application. 2. Create a new Feature Flag in Flagsmith, calling it "sharing_button". Set it to enabled on your development environment, and disabled on your production environment. @@ -34,9 +34,9 @@ Feature Flags are a development methodology that allow you to ship code and feat 4. Because your button only shows when the "sharing_button" flag is set to True, you are safe to commit your code as you work on the feature. Your code will be live within the production platform, but the functionality is hidden behind the flag. -5. Once you are happy with your Feature, you can enable the "sharing_button" for other members of your team and with Beta testers. +5. Once you are happy with your Feature, you can enable the "sharing_button" for other members of your team and with beta testers. -6. If everything is working as intended, flip the "sharing_button" flag to True for everyone in your production environment, and your feature is rolled out. +6. If everything is working as intended, switch the "sharing_button" flag to True for everyone in your production environment, and your feature is rolled out. If you want to learn more about Feature Flags, [Flickr wrote the seminal blog post on it in 2009](https://code.flickr.net/2009/12/02/flipping-out/). diff --git a/docs/docs/getting-started/glossary.md b/docs/docs/getting-started/glossary.md index 45b806812463..f54a5fe2963c 100644 --- a/docs/docs/getting-started/glossary.md +++ b/docs/docs/getting-started/glossary.md @@ -38,4 +38,4 @@ This glossary provides concise definitions for some of the key concepts within F - [**Staged Rollout**](/guides-and-examples/staged-feature-rollouts.md): Gradually enabling a feature for increasing percentages of users to reduce risk. -- [**Trait**](/basic-features/managing-identities.md#identity-traits): A key-value pair associated with an identity, that can store any type of data. \ No newline at end of file +- [**Trait**](/basic-features/managing-identities.md#identity-traits): A key-value pair associated with an identity that can store any type of data. \ No newline at end of file diff --git a/docs/docs/getting-started/quick-start.md b/docs/docs/getting-started/quick-start.md index 43e167af7f53..d60566be0c72 100644 --- a/docs/docs/getting-started/quick-start.md +++ b/docs/docs/getting-started/quick-start.md @@ -29,7 +29,7 @@ If you're using the SaaS platform, log in at [Flagsmith.com](https://flagsmith.c ## 1. Create a Project and Flag in the Dashboard -We're going to create an Organisation (if you haven't already), a Project, and your first Flag. +We are going to create an Organisation (if you have not already), a Project, and your first Flag. ![Create Organisation](/img/quickstart/demo_create_1.png) @@ -37,7 +37,7 @@ Flagsmith manages Flags with Projects, so let's create one now: ![Create Project](/img/quickstart/demo_create_2.png) -Flagsmith organises Projects into separate Environments. When you create a Project, Flagsmith automatically creates `Development` and `Production` Environments. We will come to these Environments later. Let's go ahead and create our first Flag. This flag will control whether a button shows on our web page. +Flagsmith organises Projects into separate Environments. When you create a Project, Flagsmith automatically creates `Development` and `Production` Environments. We will come to these Environments later. Let us go ahead and create our first Flag. This flag will control whether a button shows on our web page. ![Flagsmith Overview](/img/quickstart/demo_create_3.png) @@ -47,7 +47,7 @@ Flags within Flagsmith are a combination of both: A Boolean value - the `Flag St ## 2. Import the Javascript SDK -OK so we've set up our flag; now let's bring it into our application. We have a (pretty small!) web page: +Ok, so we have set up our flag; now let us bring it into our application. We have a (quite small!) web page: ```html @@ -75,7 +75,7 @@ For the purposes of this quickstart tutorial, we will import the SDK inline into ## 3. Connect to the Flagsmith API -We can now connect to the Flagsmith API and get our Flags. When you initialise the Flagsmith SDK, you have to provide an Environment ID. This way, the SDK knows which Project and Environment to grab flags for. Head to the Environment Settings page within Flagsmith, and copy the API key: +We can now connect to the Flagsmith API and get our Flags. When you initialise the Flagsmith SDK, you have to provide an Environment ID. This way, the SDK knows which Project and Environment to retrieve flags for. Head to the Environment Settings page within Flagsmith, and copy the API key: ![SDK Keys](/img/quickstart/demo_create_6.png) @@ -118,7 +118,7 @@ Let's hook this value up to our button, so that the value of the flag controls w This code sets up a callback, which is triggered when we get a response back from the Flagsmith API. We will check for the state of the flag and set the display visibility based on the result. -Our entire webpage now reads like this: +Our entire web page now reads like this: { ` @@ -157,7 +157,7 @@ dashboard and enable the flag: ![Flag View](/img/quickstart/demo_create_10.png) -Return to your browser, refresh the page, and the button will re-appear. +Return to your browser, refresh the page, and the button will reappear. ## Finishing Up From 4e9d556f977209aa0746786fcc980a0523ec1b99 Mon Sep 17 00:00:00 2001 From: Guilherme Date: Thu, 31 Jul 2025 09:26:56 -0300 Subject: [PATCH 10/12] Apply suggestions from code review Co-authored-by: Matthew Elwell --- docs/docs/getting-started/feature-flags.md | 8 ++++---- docs/docs/getting-started/glossary.md | 4 ++-- docs/docs/getting-started/quick-start.md | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/docs/getting-started/feature-flags.md b/docs/docs/getting-started/feature-flags.md index 1ddd431c8663..be38baef2ce0 100644 --- a/docs/docs/getting-started/feature-flags.md +++ b/docs/docs/getting-started/feature-flags.md @@ -30,13 +30,13 @@ Feature Flags are a development methodology that allow you to ship code and feat 2. Create a new Feature Flag in Flagsmith, calling it "sharing_button". Set it to enabled on your development environment, and disabled on your production environment. -3. Start working on the feature. Whenever you write code that shows the button within the UI, wrap it in a conditional statement, testing against the value of the flag "sharing button". Only show the button if the flag is set to True. +3. Start working on the feature. Whenever you write code that shows the button within the UI, wrap it in a conditional statement, testing against the value of the flag "sharing button". Only show the button if the flag is enabled. -4. Because your button only shows when the "sharing_button" flag is set to True, you are safe to commit your code as you work on the feature. Your code will be live within the production platform, but the functionality is hidden behind the flag. +4. Because your button only shows when the "sharing_button" flag is enabled, you are safe to deploy your code as you work on the feature. Your code will be live within the production platform, but the functionality is hidden behind the flag. -5. Once you are happy with your Feature, you can enable the "sharing_button" for other members of your team and with beta testers. +5. Once you are happy with your feature, you can enable the "sharing_button" for other members of your team and with beta testers. -6. If everything is working as intended, switch the "sharing_button" flag to True for everyone in your production environment, and your feature is rolled out. +6. If everything is working as intended, enable the "sharing_button" flag for everyone in your production environment, and your feature is rolled out. If you want to learn more about Feature Flags, [Flickr wrote the seminal blog post on it in 2009](https://code.flickr.net/2009/12/02/flipping-out/). diff --git a/docs/docs/getting-started/glossary.md b/docs/docs/getting-started/glossary.md index f54a5fe2963c..018fb887711f 100644 --- a/docs/docs/getting-started/glossary.md +++ b/docs/docs/getting-started/glossary.md @@ -24,7 +24,7 @@ This glossary provides concise definitions for some of the key concepts within F - [**Local Evaluation Mode**](/clients/index.md#local-evaluation): A mode where the SDK evaluates feature flags locally using a downloaded environment document, reducing latency and API calls. -- [**Multivariate Flag**](/basic-features/managing-features.md#multi-variate-flags): A feature flag that can take on multiple values (not just on/off), useful for A/B testing and gradual rollouts. +- [**Multivariate Flag**](/basic-features/managing-features.md#multi-variate-flags): A feature flag that can take on multiple values (not just on/off), useful for A/B testing. - [**Organisation**](/basic-features/index.md#organisations): Organisations are a way for you and other team members to manage projects and their features. Users can be members of multiple organisations. @@ -34,7 +34,7 @@ This glossary provides concise definitions for some of the key concepts within F - [**SDK (Software Development Kit)**](/clients/): Client libraries provided by Flagsmith for integrating feature flagging into applications. -- [**Segment**](/basic-features/segments.md): A group of users defined by traits (e.g., logins, device, location, or custom traits). You can override feature defaults for segments, such as enabling features for a "power user" group. +- [**Segment**](/basic-features/segments.md): A group of identities defined by traits (e.g., logins, device, location, or custom traits). You can override feature defaults for segments, such as enabling features for a "power user" group. - [**Staged Rollout**](/guides-and-examples/staged-feature-rollouts.md): Gradually enabling a feature for increasing percentages of users to reduce risk. diff --git a/docs/docs/getting-started/quick-start.md b/docs/docs/getting-started/quick-start.md index d60566be0c72..f03749bc9b75 100644 --- a/docs/docs/getting-started/quick-start.md +++ b/docs/docs/getting-started/quick-start.md @@ -14,8 +14,8 @@ This tutorial will guide you through the core concepts of integrating Flagsmith By the end of this tutorial, you will be able to: -- Create a Project and your first Flag in the Flagsmith dashboard. -- Import the Flagsmith Javascript SDK into your web page. +- Create a Project and your first flag in the Flagsmith dashboard. +- Import the Flagsmith JavaScript SDK into your web page. - Connect to the Flagsmith API and retrieve your flags. - Update your application's behaviour based on a flag's value. @@ -24,12 +24,12 @@ By the end of this tutorial, you will be able to: You will need access to a Flagsmith instance (either using the SaaS platform or self-hosted) and a basic understanding of HTML and JavaScript. :::tip -If you're using the SaaS platform, log in at [Flagsmith.com](https://flagsmith.com/). If you're self-hosting, log in to your deployed instance. +If you're using the SaaS platform, log in at [app.flagsmith.com](https://app.flagsmith.com/). If you're self-hosting, log in to your deployed instance. ::: ## 1. Create a Project and Flag in the Dashboard -We are going to create an Organisation (if you have not already), a Project, and your first Flag. +We are going to create an organisation (if you haven't already), a project, and your first flag. ![Create Organisation](/img/quickstart/demo_create_1.png) From de54d54e3868d9be8df5ab12117e162b47cf94c3 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Thu, 31 Jul 2025 10:47:48 -0300 Subject: [PATCH 11/12] doc: adjust glossary page --- docs/docs/getting-started/glossary.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/docs/getting-started/glossary.md b/docs/docs/getting-started/glossary.md index 018fb887711f..0907582076ad 100644 --- a/docs/docs/getting-started/glossary.md +++ b/docs/docs/getting-started/glossary.md @@ -10,7 +10,9 @@ This glossary provides concise definitions for some of the key concepts within F - [**Core API**](/edge-api/Overview.md#core-api): Flagsmith's private API for programmatic control of the platform. -- [**Edge API / Edge Proxy**](/advanced-use/edge-api.md): Flagsmith's publicly accessible API, specifically intended for use with our SDKs. +- [**Edge API**](/advanced-use/edge-api.md): Flagsmith's publicly accessible API, specifically intended for use with our SDKs. + +- [**Edge Proxy**](/advanced-use/edge-proxy.md): A self-hosted service that provides a local, low-latency interface to the Flagsmith API. - [**Environment**](/basic-features/index.md#environments): Environments are a way to separate the configuration of your features. A project can have any number of environments. @@ -20,7 +22,7 @@ This glossary provides concise definitions for some of the key concepts within F - [**Feature Flag**](/basic-features/index.md): A boolean or multivariate switch to enable/disable features or set their values dynamically without deploying code. -- [**Identity**](/basic-features/managing-identities.md): An identity represents a specific user within a particular environment. Identities allow you to manage and override feature settings for individual users, and the same user can have different features enabled in different environments. +- [**Identity**](/basic-features/managing-identities.md): An entity within a particular environment, against which you can manage and override feature settings. - [**Local Evaluation Mode**](/clients/index.md#local-evaluation): A mode where the SDK evaluates feature flags locally using a downloaded environment document, reducing latency and API calls. @@ -36,6 +38,6 @@ This glossary provides concise definitions for some of the key concepts within F - [**Segment**](/basic-features/segments.md): A group of identities defined by traits (e.g., logins, device, location, or custom traits). You can override feature defaults for segments, such as enabling features for a "power user" group. -- [**Staged Rollout**](/guides-and-examples/staged-feature-rollouts.md): Gradually enabling a feature for increasing percentages of users to reduce risk. +- [**Staged Rollout**](/guides-and-examples/staged-feature-rollouts.md): Gradually enabling a feature for increasing percentages of your identities to reduce risk. -- [**Trait**](/basic-features/managing-identities.md#identity-traits): A key-value pair associated with an identity that can store any type of data. \ No newline at end of file +- [**Trait**](/basic-features/managing-identities.md#identity-traits): A key-value pair associated with an identity that can store any type of data. From 82cdfa8603b6c55887b60fe0bebe387da85632ef Mon Sep 17 00:00:00 2001 From: Guilherme Date: Fri, 22 Aug 2025 16:35:52 -0300 Subject: [PATCH 12/12] Apply suggestions from code review --- docs/docs/getting-started/feature-flags.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/getting-started/feature-flags.md b/docs/docs/getting-started/feature-flags.md index be38baef2ce0..aabb59c8fd29 100644 --- a/docs/docs/getting-started/feature-flags.md +++ b/docs/docs/getting-started/feature-flags.md @@ -28,7 +28,7 @@ Feature Flags are a development methodology that allow you to ship code and feat 1. You are about to start work on a new feature. Let's imagine you are going to implement a sharing button with your application. -2. Create a new Feature Flag in Flagsmith, calling it "sharing_button". Set it to enabled on your development environment, and disabled on your production environment. +2. Create a new feature flag in Flagsmith, calling it "sharing_button". Set it to enabled on your development environment, and disabled on your production environment. 3. Start working on the feature. Whenever you write code that shows the button within the UI, wrap it in a conditional statement, testing against the value of the flag "sharing button". Only show the button if the flag is enabled.