4.5.2

Visual Studio Code

stackery-vscode-logo

Stackery VS Code Extension

Teams can improve their development workflow with the use of Stackery Serverless Tools on Visual Studio Code. This extension brings the Stackery visual editing capabilities for AWS CloudFormation and AWS SAM into VS Code so that developers can configure their serverless infrastructure-as-code templates from the comfort of their IDE.

This information is also available on the Stackery VS Code Extension page on the Visual Studio Code Marketplace.

Editing with the Stackery VS Code Extension is only supported for AWS SAM and CloudFormation templates.

Installation

  1. Open the extension palette (Cmd+Shift+X or Ctrl+Shift+X)
  2. Search for, and select Stackery Serverless Tools
  3. Select Install

Features

  • Visual Editing of infrastructure-as-code templates, including:
    • AWS CloudFormation templates
    • AWS SAM (Serverless Application Model)
  • Visualization of stack architecture
  • Integration with the Stackery CLI for deployments and cloudlocal function development

Prerequisites

To use the Stackery VS Code Extension you'll need:

Usage

The Stackery extension allows you to visualize and configure the AWS resources defined in your template.yaml template file. Configuring a resource using the Stackery visual editor renders the appropriate YAML in the template.yaml file.

stackery-vscode-split-screen

Visual Editing

There are two ways to start using the Stackery visual editor to configure your stack resources:

  1. Right-click on template.yaml to access the context menu, and select Open in Stackery

    right-click-screenshot

    or

  2. While in the template.yaml file, select the Stackery logo on the top-right corner of the window

    stackery-button-screenshot

Configure resources

To configure stack resources:

  1. Select Add Resource in the top-right corner of the visual editor
  2. Choose from a list of available resources
  3. Drag (or double-click) a resource onto the visual editor
  4. Double-click the resource to open its configuration panel

For details on configurable properties of each resource, visit the Stackery Cloud Resources Reference

Event subscription

Subscribe compute resources to events emitted by other resources using a event subscription wire (solid wire), e.g. an Edge Function triggered by a CDN lifecycle event.

Service discovery

Connect a compute resource (Function, Edge Function, or Docker Task) to another resource using a service discovery wire (dashed wire) to populate the IAM policies and environment variables required for it to interact with that resource, e.g. a Function accessing an Object Store.

Logging out

If you want to log out of your Stackery session or to switch accounts, close your current editor tab, then hit Cmd+Shift+P (Ctrl+Shift+P on Windows) and search and select 'Stackery: Log out of Stackery Editor'. The next time you open the editor, you will be prompted to log in again.

Workflow Example

Let's try an example of visually editing an existing stack in VS Code. In this example, we'll use a simple serverless CRUD stack in NodeJS, but you can use one of your own existing stacks or initialize a new one in the Stackery CLI with this command:

stackery init -n simple-serverless-crud

  1. Open VS Code, and install the Stackery Serverless Tools extension from the Extensions Marketplace if you have not already done so

  2. In VS Code, select Add workspace folder from the menu or welcome screen and choose the stack you want to edit

    open workspace folder

  3. Open the template.yaml file from the sidebar

  4. Click the Stackery icon in the top right corner

    open template.yaml

  1. The first time you use the Stackery extension in a new workspace in VS Code, you will be prompted to log in to Stackery. Use the same username and password you would use in the app

    open template.yaml

  2. (Optional) Pull your template to the side of the visual editor if you want a side-by-side view

    side-by-side view

  3. Click the Add Resource button in the top right of the visual editor

  4. Click the Function resource to add it to the editor (you will see the relevant code added to the template.yaml file as you use the visual editor)

  5. Click the Object Store resource to add it to the editor

  6. (Optional) Name your function and object store by double-clicking the new resources, filling in the relevant fields, and clicking the green Save button

  7. Right-click on your stack's root directory, and select Open in Terminal

  8. In the terminal, git add, commit, and push your changes to your Git repository. You will see your changes reflected in the Stackery app if it's open in your browser

The video below shows steps 4-13:

Troubleshooting

Missing Stackery CLI or CLI out of date

In order to use the Stackery VS Code extension, you need to have the Stackery CLI installed and updated to at least version 2.8.0. Check your version by entering stackery version in your the terminal or shell. If you need to update, run stackery update, then try the extension again.

Template file is not being updated

Before using the VS Code extension, make sure that your template.yaml file is part of a workspace in VS Code. Follow the instructions in the Workflow Example above to open a workspace.

Canvas not responding to typing

There is currently a known focusing bug in VS Code that may cause problems with switching from the template view to the editor view in the Stackery Serverless Tools extension. If at any point you are unable to type or interact with the canvas while using the extension, double-click on the canvas tab to restore focus, then try again.

Next Steps

Once your VS Code development environment is set up, it's easy to integrate with Stackery's other features, such as cloudlocal development and the CLI tool. Read the docs below to get started:

← Single Sign On with OktaAnything Resource →