Revolutionize Your AWS App Development: AWS Application Composer and Our Helpdesk Project
Tags: awsapplicationcomposer, vscode, devops, aws
Published: 2024-01-31 17:38:58

### Introduction
On November 30, 2023, Amazon Web Services (AWS) unveiled a groundbreaking enhancement to its development toolkit – the general availability of AWS Application Composer in Visual Studio Code (VS Code). This integration brings forth a powerful Integrated Development Environment (IDE) extension, empowering developers to streamline and expedite the application development lifecycle. In this article, we will explore the features and benefits of the AWS Application Composer IDE extension, how we utilized it in our Helpdesk project and delve into real-world scenarios where it can significantly enhance the development process.

### Visual Studio Code: Install AWS Application Composer Extension

#### Getting Started:
To start leveraging the AWS Application Composer IDE extension, developers can access it through the AWS Toolkit for Visual Studio Code. 

#### Pre-requisites:
VS code and it's version should be `1.7.3 or later`

> If VS code is not installed then please Install it's latest version from VS code website:
 {% embed https://code.visualstudio.com/download %}

> If you already running the VS code then make sure to check the version before installing the AWS tool kit.
 

```
C:\Users\warda.liaqat>code --version
1.85.2
8b3775030ed1a69b13e4f4c628c612102e30a681
x64
```
**Or**

```
C:\Users\warda.liaqat>code --help
Visual Studio Code 1.85.2
Usage: code.exe [options][paths...] 
```

> If it’s less than `1.7.3` then please upgrade it to the latest version.


#### Install the AWS toolkit from Visual Studio Marketplace: 
[AWS Toolkit from Visual Studio Marketplace](https://aws.amazon.com/visualstudiocode/)

![toolkit from Visual Studio Marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39hzi0i1804nzhqqx26a.png)

#### Install the AWS toolkit directly from VS code Extensions page:


![Toolkit from VS Code Extensions Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is0wv7g3mw0dx7bg2krk.png)

### How to get started with AWS Application composer in VS Code?

#### Options to sign in to AWS tool kit:

You need to login either with AWS Builder ID or SSO(single sign-on). And that’s it. You have it.

> For further details on the authentication methods, Please have a look at: 

{% embed https://docs.aws.amazon.com/toolkit-for-visual-studio/latest/user-guide/credentials.html %}

![Authentication Methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vzzqe4jtl5hz0hcjzgi.png)

### Access Application Composer from the Toolkit for VS Code

> Application Composer can be accessed through various avenues

**1. VS Code Command Palette:**
Open the VS Code Command Palette and navigate to Application Composer for quick and direct access.
Use `CTRL+SHIFT+P` to open the AWS Application Composer extension in VS code


![VS Code Command Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a81q8knidb44c1nh7jpo.png)

**2. Context Menu:**
Right-click on your AWS CloudFormation or AWS SAM template to reveal a context menu, where you can conveniently access Application Composer.


![Context Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4togyplwrxbu22hinvfe.png)

**3. AWS CloudFormation or AWS SAM Template:**
Select the Application Composer button directly within any AWS CloudFormation or AWS SAM template.


![AWS CloudFormation or AWS SAM Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j55i0pn9saynof2r0yt3.png)

### Overview of us utilizing AWS Application Composer in VS Code for our Helpdesk Project

#### Integration with AWS Services

**1. Seamless Integration:**
Utilizing AWS Application Composer, we seamlessly integrated AWS services into our AP Helpdesk project. Dragging AWS service components directly onto our visual canvas, we effortlessly connected EKS, EFS, RDS, and other vital services to their corresponding sections within our Drupal application:


![Seamless Integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx52bsqet4m1pozousmj.png)

**Advantages Realized:** This approach simplified the integration process, eliminating potential hurdles and offering a visually intuitive experience for our developers. The result was a harmonious fusion of our application with AWS services, ensuring optimal performance and scalability.

#### Syncing Prototypes with Development Environment

**2. Prototype Synchronization:**
AWS Application Composer's push-button sync feature became our secret weapon for bridging the gap between prototyping and development. We used the tool to synchronize prototypes, ensuring that changes made during the prototyping phase seamlessly translated into our actual development environment.


![Syncing Prototypes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12z9n0yvk9fq49jhr8op.png)

> **Note:** In order to do the sync you must be authenticated to AWS with your IAM credentials. For more details please visit:
 {% embed https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/setup-credentials.html %}

#### Smooth Development Cycles 
This streamlined transition from prototyping to development minimized discrepancies and expedited our development cycles. The push-button sync feature became a catalyst for maintaining consistency and accelerating the implementation of new features.

### Real-World Scenarios
**Scenario 1:** 
Rapid Prototyping for a New Feature: Consider a scenario where a development team needs to prototype a new feature for an existing application. With AWS Application Composer in VS Code, developers can rapidly create a prototype by visually designing the new feature's architecture. The generative AI code suggestions provide a head start, allowing the team to quickly iterate and fine-tune the prototype before integrating it into the main application.

**Scenario 2:** 
Infrastructure Changes and Visual Debugging: In a scenario where an application undergoes significant infrastructure changes, developers can leverage Application Composer to visually debug and validate the alterations. The drag-and-drop interface simplifies the process of modifying the architecture, while the real-time visualization helps identify any potential issues or misconfigurations before deployment.

### Conclusion:
Introducing AWS Application Composer in Visual Studio Code—a game-changer for application development. Its drag-and-drop interface, seamless AWS integration, and AI code suggestions streamline development, addressing common challenges. In our AP Helpdesk project, Application Composer became our guiding force, bringing architectural vision to life with visualizations and prototype synchronization. This tool is a testament to transformative power, setting a precedent for how we approach AWS application development—blending visual artistry and robust functionality for unparalleled success.

### References:
[AWS Blog](https://aws.amazon.com/blogs/aws/ide-extension-for-aws-application-composer-enhances-visual-modern-applications-development-with-ai-generated-iac/#:~:text=The%20IDE%20extension%20for%20AWS,focus%20on%20your%20application%20code.)
[AWS Docs](https://docs.aws.amazon.com/application-composer/latest/dg/setting-up-composer.html)
[AWS What's New - IDE Extension AWS Application Composer](https://aws.amazon.com/about-aws/whats-new/2023/11/ide-extension-aws-application-composer/)
[Application Composer - AWS Website](https://aws.amazon.com/application-composer/)

**Do share your feedback and do Follow me on LinkedIn and Facebook:**

[LinkedIn](https://pk.linkedin.com/in/warda-liaqat)
[Facebook](https://www.facebook.com/WardaLiaqat.01/)

_**Cheers, Happy Clouding and Articling!**_