buttonize

---

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.

Getting started

Sign-up at buttonize.io

Setup fresh new CDK project

npm

$ npx create-buttonize
$ cd my-buttonize-app && npm install
$ npx buttonize dev --profile=YOUR_AWS_PROFILE

pnpm

$ pnpm create buttonize
$ cd my-buttonize-app && pnpm install
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE

Install to existing CDK project

Modify CDK bin code to export the App

export const app = new cdk.App()

npm

$ npm install -D buttonize
$ npx buttonize dev --profile=YOUR_AWS_PROFILE

pnpm

$ pnpm add -D buttonize
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE

Example

.
├── 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',
      externalId: 'CHANGE-ME-some-random-external-id'
    })

    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]
  }
}

Result

---

Buttonize Docs

Learn more at docs.buttonize.io

---

Join our community Discord | Twitter