As you know, last month, AWS announced AWS Application Composer in VS Code, allowing you to use it within VS Code and work seamlessly. However, when I started working on it, I found it challenging to integrate because it was recently announced, and there were no video documentation available. Many steps were missing at a high level. After troubleshooting and spending hours on it, I finally managed to make it work.
So, I'm sharing a step-by-step document on how you can connect AWS Application Composer to VS Code locally and sync up. I hope you find it helpful. Let's get started!
-1- So, let's begin by logging into the AWS account.
-2- Next, search for the 'Application Composer' service.
-3- After opening, you'll find information about the 'Application Composer.' You can then click on 'Create project.'
-4- Once you click on Create project, a blank canvas dashboard will open. On the right-hand side, you will see the Menu option. Click on it, and you will see multiple options. Select 'Active local sync.'
-5- Next, select the folder from your local machine.
-6- I created a new folder named 'application-compose' and selected it.
-7- After selecting, you will see the 'Active' button. Click on it.
-8- Open VS Code, go to the Extensions, and search for 'AWS Toolkit.' Install it and configure it.
-9- Click on 'Sign In to get Started,' and another window will appear. Sign in using your 'Builder ID.' If you haven't created one, you can do so at the time of signing in, and you'll be ready to use AWS services.
-10- Now, navigate to the folder you created.
-11- Now, you will see the 'template.yaml' file there, which is currently empty since we haven't created anything yet. Additionally, on the right side, you'll notice a small 'Application Composer' symbol. Clicking on this symbol will open the same AWS GUI.
-12- From there, you can start working on your project. This is how you can use AWS Application Composer in VS Code.
Top comments (4)
This is awesome! Once you have the AWS Toolkit extension installed, you can optionally skip the Console step and simply open your CloudFormation template in VS Code, then open with Composer (icon upper right, or right-click on file).
Composer does not require authentication, so the builder ID is only necessary if you want to use the CodeWhisperer integration to generate sample configuration for any CloudFormation resource type (those standard components in Composer).
Cheers!
Thanks buddy
Thanks for this tutorial! A small update - as Ryan said, you can now use App Composer in VS Code directly, without the need to sign into the AWS Console. I wrote a tutorial using App Composer + genAI in VS Code that takes you through installing the extension.
@annaspies Thanks for letting us know. I just read your blog thanks for the update, when I wrote this blog at that time I was trying to find how to connect it but you know my AWS account credentials is already configured because I am working on IaC