Buttonize enables you to build internals tools with AWS CDK.
Hook-up UI components directly to AWS Lambda functions. Just install Buttonize and deploy your CDK. That's it.
Sign-up at app.buttonize.io
$ npx create-buttonize
$ cd my-buttonize-app && npm install
$ npx buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts
$ pnpm create buttonize
$ cd my-buttonize-app && pnpm install
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts
export const app = new cdk.App()
$ npm install -D buttonize
$ npx buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts
$ pnpm add -D buttonize
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts
With Buttonize you have two options how to build your internal apps
- Build your own custom app by using
ButtonizeApp
construct. Learn more in the next section. - Use Constructs Library with ready-made customizable constructs for different AWS services.
.
├── bin
│ └── cdk.ts
├── lib
│ └── example-stack.ts
├── src
│ └── discountGenerator.ts
├── cdk.json
└── package.json
// bin/cdk.ts
#!/usr/bin/env node
import 'source-map-support/register'
import * as cdk from 'aws-cdk-lib'
import { ExampleStack } from '../lib/example-stack'
export const app = new cdk.App()
new ExampleStack(app, 'ExampleStack')
// lib/example-stack.ts
import * as cdk from 'aws-cdk-lib'
import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs'
import { Action, Buttonize, ButtonizeApp, Display, Input } from 'buttonize/cdk'
import { Construct } from 'constructs'
import * as path from 'path'
export class ExampleStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props)
Buttonize.init(this, {
apiKey: 'btnz_mybuttonizekey1234567'
})
const discountGenerator = new NodejsFunction(this, 'DiscountGenerator', {
entry: path.join(__dirname, '../', 'src', 'discountGenerator.ts')
})
new ButtonizeApp(this, 'DemoApp', {
name: 'Discount code generator',
description:
'Select the discount amount and you will get the discount code on the next page.'
})
.page('InputPage', {
body: [
Display.heading('Generate discount code for customer'),
Input.select({
id: 'discount',
label: 'Discount value',
options: [
{ label: '30%', value: 30 },
{ label: '60%', value: 60 }
]
}),
Display.button({
label: 'Generate discount',
onClick: Action.aws.lambda.invoke(
discountGenerator,
{ Payload: { discountValue: '{{discount}}' } },
{ id: 'discountGenerator' }
),
onClickFinished: Action.buttonize.app.changePage('DonePage')
})
]
})
.page('DonePage', {
body: [
Display.heading('Discount generated'),
Display.text('Discount code: {{InputPage.discountGenerator.code}}')
]
})
}
}
// src/discountGenerator.ts
export const handler = async (event: { discountValue: number }) => {
console.log(`Generating discount of value ${event.discountValue}`)
return {
discountValue: event.discountValue,
code: `${Math.random()}`.split('.')[1]
}
}
AWS profile name to used for fetching stack metadata. You can also set AWS_PROFILE
environment variable instead.
$ npx buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts
AWS region used for fetching stack metadata. You can also set AWS_REGION
environment variable instead.
$ npx buttonize dev --region=eu-central-1 bin/cdk.ts
Prints out CLI help information.
$ npx buttonize --help
Path to JS/TS file where the CDK app is defined.
$ npx buttonize dev bin/cdk.ts
Learn more at docs.buttonize.io