Skip to content

Commit ce9b975

Browse files
HarshaNalluruHarshaNalluru
authored
[App Config] Sample: Using feature flags in a react app (Azure#14845)
## What does the app show? This app shows how the feature flags can be used in a sample react app. This sample is the JS/TS equivalent of the sample at https://docs.microsoft.com/en-us/azure/azure-app-configuration/quickstart-feature-flag-spring-boot. ## Prerequisites As listed in the readme, to run this app, the user has to create an App Config resource and add the suggested feature flags. ## Screengrab of the app ![image 35](https://user-images.githubusercontent.com/10452642/114456903-44660800-9b92-11eb-974b-e7eca1579749.png) Issue Azure#14705
1 parent a5d216e commit ce9b975

File tree

14 files changed

+483
-1
lines changed

14 files changed

+483
-1
lines changed

‎eng/.docsettings.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ omitted_paths:
33
- eng/*
44
- sdk/*/arm-*
55
- sdk/*/perf-tests/*
6+
- sdk/appconfiguration/app-configuration/sample-react/README.md
67
- sdk/core/README.md
78
- sdk/cognitiveservices/*
89
- sdk/communication/*/test/README.md

‎samples/frameworks/react/ts/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Additionally, you may open multiple instances of this sample application and wat
6969

7070
## Next Steps
7171

72-
Take a look at our [API Documentation][apiref] for more information about the APIs that are avaiable.
72+
Take a look at our [API Documentation][apiref] for more information about the APIs that are available.
7373

7474
[react]: https://create-react-app.dev/
7575
[typescript]: https://www.typescriptlang.org/docs/home.html

‎sdk/appconfiguration/app-configuration/sample-react/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎sdk/appconfiguration/app-configuration/sample-react/README.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Feature Flag Sample (TypeScript)
2+
3+
This sample application shows how to use the Feature Flags.
4+
5+
## Prerequisites
6+
7+
The samples are compatible with Node.js >= 8.0.0.
8+
9+
You need [an Azure subscription][freesub] and the following resources created to run this sample:
10+
11+
### Create an App Configuration resource
12+
13+
You can use the [Azure Portal](https://portal.azure.com) or the [Azure CLI](https://docs.microsoft.com/cli/azure) to create an Azure App Configuration resource.
14+
15+
Example (Azure CLI):
16+
17+
```
18+
az appconfig create --name <app-configuration-resource-name> --resource-group <resource-group-name> --location eastus
19+
```
20+
21+
### Create an AAD application
22+
23+
We recommend the [@azure/identity][identity] package which provides a set of credential implementations for both NodeJS and the browser. This sample imports `InteractiveBrowserCredential` from identity.
24+
25+
- Register a new AAD application and give permissions to access Azure App Configuration on behalf of the signed-in user
26+
27+
- Register a new application in the Azure Active Directory(in the azure-portal) - https://docs.microsoft.com/azure/active-directory/develop/quickstart-register-app
28+
- In the `API permissions` section, select `Add a permission` and choose `APIs my organization uses`.
29+
- Pick `Azure App Configuration` and select the checkboxes and then click `Add permissions`. This would allow the application to access Azure App Configuration on behalf of the signed-in user.
30+
31+
- Grant access to Azure App Configuration data with RBAC in the Azure Portal
32+
33+
- RBAC roles for azure-app-configuration - https://docs.microsoft.com/azure/azure-app-configuration/concept-enable-rbac#azure-built-in-roles-for-azure-app-configuration.
34+
- In the azure portal, go to your app-config account and assign **App Configuration Data Owner** role to the registered AAD application from `Access control (IAM)` tab (in the left-side-navbar of your app config account in the azure-portal).
35+
36+
## Running the sample
37+
38+
1. Have the environment variables in sample.env populated in the .env file.
39+
40+
2. Create the following feature flags using the portal.
41+
42+
```json
43+
// Feature flag 1
44+
{
45+
"id": "react-app-feature-1",
46+
"description": "",
47+
"enabled": false,
48+
"conditions": {
49+
"client_filters": []
50+
}
51+
}
52+
// Feature flag 2 // Make sure to update the Start and End times as you wish.
53+
{
54+
"id": "react-app-feature-2",
55+
"description": "",
56+
"enabled": true,
57+
"conditions": {
58+
"client_filters": [
59+
{
60+
"name": "Microsoft.TimeWindow",
61+
"parameters": {
62+
"Start": "Mon, 12 Apr 2021 07:00:00 GMT",
63+
"End": "Wed, 14 Apr 2021 07:00:00 GMT"
64+
}
65+
}
66+
]
67+
}
68+
}
69+
```
70+
71+
3. Install the various packages as well as the TypeScript compiler using:
72+
73+
```bash
74+
npm install
75+
```
76+
77+
4. Run the sample app:
78+
79+
```bash
80+
npm start
81+
```
82+
83+
## Caution
84+
85+
> > This sample retrieves feature flags from a client-side application, however scalability can become a problem.
86+
>
87+
> > Azure App Configuration has a request quota detailed [here](https://azure.microsoft.com/pricing/details/app-configuration/). Once the quota is exhausted, HTTP status code 429 will be returned for all requests until the end of the hour.
88+
>
89+
> > For production environments and for users with heavy loads(keeping Azure costs in mind), the recommendation is to use App Configuration on the server-side and let the server cache and pass feature-flags to the clients.
90+
91+
## Next Steps
92+
93+
Take a look at our [Samples][samples] for more information about the APIs that are available.
94+
95+
[react]: https://create-react-app.dev/
96+
[typescript]: https://www.typescriptlang.org/docs/home.html
97+
[freesub]: https://azure.microsoft.com/free
98+
[samples]: https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/appconfiguration/app-configuration/samples/v1/typescript
99+
[identity]: https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/identity/identity/README.md

‎sdk/appconfiguration/app-configuration/sample-react/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "react-sample",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@azure/app-configuration": "^1.2.0-beta.1",
7+
"@azure/identity": "^1.3.0",
8+
"@types/node": "^12.20.7",
9+
"@types/react": "^17.0.3",
10+
"@types/react-dom": "^17.0.3",
11+
"react": "^17.0.2",
12+
"react-dom": "^17.0.2",
13+
"react-scripts": "4.0.3",
14+
"typescript": "^4.2.4"
15+
},
16+
"scripts": {
17+
"start": "react-scripts start",
18+
"build": "react-scripts build",
19+
"test": "react-scripts test",
20+
"eject": "react-scripts eject"
21+
},
22+
"eslintConfig": {
23+
"extends": [
24+
"react-app",
25+
"react-app/jest"
26+
]
27+
},
28+
"browserslist": {
29+
"production": [
30+
">0.2%",
31+
"not dead",
32+
"not op_mini all"
33+
],
34+
"development": [
35+
"last 1 chrome version",
36+
"last 1 firefox version",
37+
"last 1 safari version"
38+
]
39+
}
40+
}

‎sdk/appconfiguration/app-configuration/sample-react/public/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="Web site created using create-react-app" />
9+
<link
10+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
11+
rel="stylesheet"
12+
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
13+
crossorigin="anonymous"
14+
/>
15+
16+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
25+
<title>React App</title>
26+
</head>
27+
<body>
28+
<noscript>You need to enable JavaScript to run this app.</noscript>
29+
<div id="root"></div>
30+
<!--
31+
This HTML file is a template.
32+
If you open it directly in the browser, you will see an empty page.
33+
34+
You can add webfonts, meta tags, or analytics to this file.
35+
The build step will place the bundled scripts into the <body> tag.
36+
37+
To begin the development, run `npm start` or `yarn start`.
38+
To create a production bundle, use `npm run build` or `yarn build`.
39+
-->
40+
</body>
41+
</html>

‎sdk/appconfiguration/app-configuration/sample-react/sample.env‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Rename this to .env in order to have React automatically
2+
# pull in all these variables (anything that starts with REACT_APP_ will be
3+
# made available. See the documentation for adding custom environment variables
4+
# at the following link: https://create-react-app.dev/docs/adding-custom-environment-variables/)
5+
6+
# App Config Endpoint to be obtained from the portal
7+
REACT_APP_APPCONFIG_ENDPOINT=<https://account-name.azconfig.io>
8+
9+
# Used to authenticate using Azure AD as a service principal for role-based authentication.
10+
#
11+
# See the documentation for `InteractiveBrowserCredential` at the following link:
12+
# https://docs.microsoft.com/javascript/api/@azure/identity/interactivebrowsercredential
13+
REACT_APP_AZURE_CLIENT_ID=<client-id>
14+
REACT_APP_AZURE_TENANT_ID=<tenant-id>

‎sdk/appconfiguration/app-configuration/sample-react/src/App.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
Copyright (c) Microsoft Corporation.
3+
Licensed under the MIT license.
4+
*/
5+
6+
import React from "react";
7+
import Page from "./components/Page";
8+
9+
function App(): JSX.Element {
10+
return (
11+
<div className="container">
12+
<Page />
13+
</div>
14+
);
15+
}
16+
17+
export default App;

0 commit comments

Comments
 (0)