buttonize / buttonize

🎨 All you need to hook-up UI components directly to your AWS Lambda functions. Just install Buttonize and deploy your CDK. That's it.

---

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 app.buttonize.io

Setup fresh new CDK project

npm

$ npx create-buttonize
$ cd my-buttonize-app && npm install
$ npx buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts

pnpm

$ pnpm create buttonize
$ cd my-buttonize-app && pnpm install
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts

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 bin/cdk.ts

pnpm

$ pnpm add -D buttonize
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE bin/cdk.ts

Constructs Library

With Buttonize you have two options how to build your internal apps

1. Build your own custom app by using ButtonizeApp construct. Learn more in the next section.
2. Use Constructs Library with ready-made customizable constructs for different AWS services.

Learn more about library.

Build your own Buttonize app

.
├── 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]
  }
}

Result

---

CLI

Options

--profile

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

--region

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

--help

Prints out CLI help information.

$ npx buttonize --help

Arguments

<entrypoint>

Path to JS/TS file where the CDK app is defined.

$ npx buttonize dev bin/cdk.ts

Docs

Learn more at docs.buttonize.io

---

Join our community Discord | Twitter