Local development

AWS CDK

Thanks to Buttonize’s “live local development” feature, you can enjoy the comfort of hot reloading when developing Buttonize apps locally.

You can start live local development by pressing the “Live dev” button at the top right corner of any Buttonize screen.

How to develop locally

Caution

At the moment, Buttonize doesn’t handle the redeployment of your CDK code and lambda handlers. So if you make any changes to your lambda functions or other resources, they won’t get deployed. For that we recommend using cdk watch in parallel with the Buttonize CLI.

Note

At this stage, the app is not deployed to AWS yet. So invoking any Actions won’t work.

You can deploy your app with $ cdk deploy and then click on the Rebuild button in Buttonize.

This will refetch all the necessary data to invoke your AWS resources even during local development.

In order to develop Buttonize apps locally, you must first sign-up at app.buttonize.io.

Once you are signed in and you have your Buttonize app in your CDK project, you can run:

npm

npx buttonize dev --profile=YOUR_AWS_PROFILE bin/your-cdk.ts

pnpm

pnpm buttonize dev --profile=YOUR_AWS_PROFILE bin/your-cdk.ts

yarn

yarn buttonize dev --profile=YOUR_AWS_PROFILE bin/your-cdk.ts

Once you run the command, Buttonize starts processing the CDK code and after you see the green checkmark, it’s ready to go.

After every save of your CDK code, Buttonize will rebuild the CDK projects and show you the updated view within seconds.

You can quit the CLI by clicking on the terminal and pressing the q or esc key.

Controls

There are a couple of controls you can use during live local development.

• Restart state

  This button resets and empties the Runtime State of the application and returns you to the first page of the application.

• Rebuild

  This button is useful when, for example, you deploy your application with cdk deploy and you want Buttonize to refetch the metadata from AWS, such as the execution role ARN or the Lambda function ARNs.

• State

  This tab shows the current Runtime State of the application.

• ”Write JMESPath here to search in the state…”

  You can use this input to debug your JMESPath expressions for variables.

• Logs

  Here, you can view which operations Buttonize performed in the background, such as fetching of IAM credentials or invoking Actions.

How it works under the hood

• The CLI…

  1. uses tsx ESM module loader to dynamically import your TypeScript CDK code
  2. watches for any changes in .ts, .tsx, .json files in your project
  3. searches in the <entrypoint> file for an exported variable of the type cdk.App
  4. extracts the Buttonize resources from stacks in the cdk.App
  5. tries to fetch the stack metadata and resources from AWS, if the stack has been deployed
  6. puts everything together and waits for the local connection from app.buttonize.io/live

• Buttonize Live Local Development UI…

  1. tries to connect to the local dev server
  2. pulls the data and watches for any changes
  3. renders the application

---

In case you encounter any issues, please let us know on Discord. We will do our best to make the live local development work with your CDK project.