Skip to content

Commit

Permalink
Use secret token for Hypertune flag definitions (#890)
Browse files Browse the repository at this point in the history 
Use a secret admin token to get Hypertune flag definitions

---------

Co-authored-by: Michal Bock <[email protected]>
  • Loading branch information
@miraan @SpeedyCoder
miraan and SpeedyCoder authored Apr 3, 2024
1 parent 020b9fc commit a825fe9
Show file tree
Hide file tree
Showing 7 changed files with 135 additions and 139 deletions.
10 changes: 5 additions & 5 deletions edge-middleware/feature-flag-hypertune/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn to use Hypertune, a powerful feature flag, A/B testing and ap
framework: Next.js
useCase: Edge Middleware
css: Tailwind
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,HYPERTUNE_ADMIN_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl
demoUrl: https://feature-flag-hypertune.vercel.app
relatedTemplates:
- maintenance-page
Expand All @@ -14,7 +14,7 @@ relatedTemplates:

# Feature flags, A/B testing and app configuration with Hypertune and Vercel

[Hypertune](https://www.hypertune.com/) is a powerful feature flag, A/B testing and app configuration platform. Optimized for TypeScript, React and Next.js. Built with full end-to-end type-safety and Git version control.
[Hypertune](https://www.hypertune.com/) is a powerful feature flag, A/B testing, analytics and app configuration platform. Optimized for TypeScript, React and Next.js. Built with full end-to-end type-safety and Git version control.

No need to juggle different SDKs for the server and the client. Install one SDK that works across the server and the client and is compatible with App Router and Server Components.

Expand All @@ -30,7 +30,7 @@ It also shows how to integrate with the Vercel Toolbar to let you easily set loc

Deploy this example with Vercel in one click:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,HYPERTUNE_ADMIN_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl)

You'll be guided through installing the [Hypertune Vercel integration](https://vercel.com/integrations/hypertune) and setting up the required environment variables.

Expand All @@ -45,8 +45,8 @@ Once you've deployed your project, open the [Hypertune UI](https://app.hypertune
1. Clone your project's repository and `cd` into it
2. Run `vercel link` to link to the Vercel project
3. Run `vercel env pull .env.development.local` to pull your environment variables
4. Run `pnpm i`
5. Run `pnpm run dev`
4. Run `npm i`
5. Run `npm run dev`

### Add new feature flags

Expand Down
2 changes: 1 addition & 1 deletion edge-middleware/feature-flag-hypertune/app/.well-known/vercel/flags/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export async function GET(request: NextRequest) {
if (!access) return NextResponse.json(null, { status: 401 })

const data = await getHypertuneData({
token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN!,
token: process.env.HYPERTUNE_ADMIN_TOKEN!,
})

return NextResponse.json<ApiData>(data)
Expand Down
2 changes: 1 addition & 1 deletion edge-middleware/feature-flag-hypertune/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
path="edge-middleware/feature-flag-hypertune"
deployButton={{
customDeployUrl:
'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl',
'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,HYPERTUNE_ADMIN_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl',
}}
>
{children}
Expand Down
137 changes: 74 additions & 63 deletions edge-middleware/feature-flag-hypertune/generated/generated.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
/* eslint-disable */

import * as sdk from "hypertune";

const queryCode = `query FullQuery {
root {
exampleFlag
}
import * as sdk from 'hypertune'

const queryCode = `query FullQuery{root{exampleFlag}}`

const query = {
Query: {
objectTypeName: 'Query',
selection: {
root: {
fieldArguments: { __isPartialObject__: true },
fieldQuery: {
Root: {
objectTypeName: 'Root',
selection: {
exampleFlag: { fieldArguments: {}, fieldQuery: null },
},
},
},
},
},
},
}
`;

const query = {"Query":{"objectTypeName":"Query","selection":{"root":{"fieldArguments":{"__isPartialObject__":true},"fieldQuery":{"Root":{"objectTypeName":"Root","selection":{"exampleFlag":{"fieldArguments":{},"fieldQuery":null}}}}}}}};

function mergeQueryAndArgs(
query: sdk.Query<sdk.ObjectValueWithVariables>,
Expand All @@ -24,7 +36,7 @@ function mergeQueryAndArgs(
queryArgs[objectTypeName] instanceof Object
? (queryArgs[objectTypeName] as sdk.ObjectValueWithVariables)
: null
: queryArgs;
: queryArgs

return [
objectTypeName,
Expand All @@ -38,7 +50,7 @@ function mergeQueryAndArgs(
objectArgs[fieldName] &&
objectArgs[fieldName] instanceof Object
? (objectArgs[fieldName] as sdk.ObjectValueWithVariables)
: null;
: null

return [
fieldName,
Expand All @@ -52,58 +64,63 @@ function mergeQueryAndArgs(
? mergeQueryAndArgs(fieldQuery, fieldArgs, true)
: null,
},
];
]
}
)
),
},
];
]
})
);
)
}

export const vercelFlagDefinitions = {"exampleFlag":{"options":[{"value":true},{"value":false}],"origin":"https://app.hypertune.com/projects/2583/draft?view=logic&selected_field_path=root%3EexampleFlag","description":"An example flag."}};

export type Rec = {

export const vercelFlagDefinitions = {
exampleFlag: {
options: [{ value: true }, { value: false }],
origin:
'https://app.hypertune.com/projects/2583/draft?view=logic&selected_field_path=root%3EexampleFlag',
description: 'An example flag.',
},
}

export type Rec = {}

export type Rec4 = {
id: string;
name: string;
email: string;
id: string
name: string
email: string
}

export const EnvironmentEnumValues = [
"DEVELOPMENT",
"STAGING",
"PRODUCTION"
] as const;
export type Environment = typeof EnvironmentEnumValues[number];
'DEVELOPMENT',
'STAGING',
'PRODUCTION',
] as const
export type Environment = (typeof EnvironmentEnumValues)[number]

export type Rec3 = {
user: Rec4;
environment: Environment;
user: Rec4
environment: Environment
}

export type Rec2 = {
context: Rec3;
context: Rec3
}

export type Root = {
/**
* An example flag.
*/
exampleFlag: boolean;
exampleFlag: boolean
}

const rootFallback = {exampleFlag:false};
const rootFallback = { exampleFlag: false }

export class RootNode extends sdk.Node {
typeName = "Root" as const;
typeName = 'Root' as const

get(fallback: Root = rootFallback as Root): Root {
const getQuery = null;
const getQuery = null
return this.evaluate(getQuery, fallback) as Root
}

Expand All @@ -112,59 +129,56 @@ export class RootNode extends sdk.Node {
* [Open in UI]({@link https://app.hypertune.com/projects/2583/draft?view=logic&selected_field_path=root%3EexampleFlag})
*/
exampleFlag(args: Rec = {}): sdk.BooleanNode {
const props0 = this.getField("exampleFlag", args);
const expression0 = props0.expression;
const props0 = this.getField('exampleFlag', args)
const expression0 = props0.expression

if (
expression0 &&
expression0.type === "BooleanExpression"
) {
return new sdk.BooleanNode(props0);
if (expression0 && expression0.type === 'BooleanExpression') {
return new sdk.BooleanNode(props0)
}

const node = new sdk.BooleanNode(props0);
node._logUnexpectedTypeError();
return node;
const node = new sdk.BooleanNode(props0)
node._logUnexpectedTypeError()
return node
}
}

export type Query = {
root: Root;
root: Root
}

const queryFallback = {root:{exampleFlag:false}};
const queryFallback = { root: { exampleFlag: false } }

export type Rec6 = {
args: Rec2;
args: Rec2
}

export type Rec5 = {
root: Rec6;
root: Rec6
}

export class QueryNode extends sdk.Node {
typeName = "Query" as const;
typeName = 'Query' as const

get(args: Rec5, fallback: Query = queryFallback as Query): Query {
const getQuery = mergeQueryAndArgs(query, args);
const getQuery = mergeQueryAndArgs(query, args)
return this.evaluate(getQuery, fallback) as Query
}

root(args: Rec2): RootNode {
const props0 = this.getField("root", args);
const expression0 = props0.expression;
const props0 = this.getField('root', args)
const expression0 = props0.expression

if (
expression0 &&
expression0.type === "ObjectExpression" &&
expression0.objectTypeName === "Root"
expression0.type === 'ObjectExpression' &&
expression0.objectTypeName === 'Root'
) {
return new RootNode(props0);
return new RootNode(props0)
}

const node = new RootNode(props0);
node._logUnexpectedTypeError();
return node;
const node = new RootNode(props0)
node._logUnexpectedTypeError()
return node
}
}

Expand All @@ -175,11 +189,8 @@ export function initializeHypertune(
const defaultOptions = {
query,
queryCode,
variableValues
variableValues,
}

return sdk.initialize(
QueryNode,
{ ...defaultOptions, ...options }
);
}
return sdk.initialize(QueryNode, { ...defaultOptions, ...options })
}
4 changes: 2 additions & 2 deletions edge-middleware/feature-flag-hypertune/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
"@vercel/toolbar": "^0.1.11",
"autoprefixer": "^10.4.15",
"eslint-config-next": "^13.4.19",
"hypertune": "^1.11.1",
"next": "canary",
"hypertune": "^1.13.4",
"next": "latest",
"react": "latest",
"react-dom": "latest"
},
Expand Down
Loading

0 comments on commit a825fe9

Please sign in to comment.