How to build an API-Driven front-end app using Amazon Q CLI

When I was presenting about Amazon Q Developer at an event, someone from the audience challenged me. They asked if Amazon Q Developer could create an application only using prompt if we pointed to an API documentation. Naturally, I accepted the challenge and asked them to give me a few hours after I finished the event.

It took me longer to find a public API that I could use than it did to work on the prompt. I used the prompt below with Q Dev in VSCode, utilizing the agent for software development /dev. After Q Dev created the application, I manually deployed it to AWS. This time, I included a final sentence stating that I wanted to deploy the application to AWS.

> Using Flask, build a user interface (UI) that allows users to search for an activity and shows which parks offer that activity by connecting to the National Park Service API (developer.nps.gov/api/v1). The application should query activity IDs and activities in parks based on the returned IDs. I want to deploy this application to AWS.

Spoiler alert: the deployment had two hiccups, but I refused to edit or configure anything in the code or on AWS. Instead, I decided to use the Amazon Q CLI throughout the entire process. In the end, the Amazon Q CLI did not disappoint, as usual.

This is what Q Dev CLI built

Application Structure

Features

Search interface to select activities from the NPS API
Display of national parks that offer the selected activity
Links to official park websites
Responsive design that works on mobile and desktop

How It Works

1. The Flask backend provides two API endpoints:

/activities - Fetches all available activities from the NPS API
/parks_by_activity?id={activity_id} - Fetches parks that offer a specific activity

2. The frontend JavaScript:

Loads activities into a dropdown menu
When a user selects an activity, it fetches and displays parks that offer that activity

Deployment to AWS

It included a deployment script (deploy.sh) that will:

Create an Amazon ECR repository for the Docker image
Build and push the Docker image to ECR
Deploy the application to AWS App Runner

Deployment Steps

1. First, get an API key from the National Park Service at https://developer.nps.gov/

2. Create a .env file with your NPS API key:

3. Run the deployment script:

Running the deployment

I thought that the Q Dev CLI would automatically deploy the application to AWS. Perhaps I needed to be more specific in my prompt, and next time I will provide instructions on how and which services to use. For now, let's follow the original deployment.

Hiccup #1

It seemed that the deploy.sh script had trouble determining whether it needed to create a new AppRunner service or update an existing one. I reported this error to the Q Dev CLI, requested a fix, and suggested to the Q CLI that it might be a good idea to run it.

> I am getting this error: An error occurred (InvalidRequestException) when calling the UpdateService operation: Error in getting resource arn from request: Provided app runner resource arn is invalid when executing deploy.sh. Why don't you deploy it based on the deploy.sh?

It actually did it. It not only fixed the script but this time executed the script and made sure the deployment was successful.

Hiccup #2

Well, as we all know, successful deployment does not necessarily mean that the application is up and running. I logged into my AWS account and checked the AppRunner deployment, where I noticed that the service has a permission issue with the ECR image.

In order to fix it, I informed Q Dev CLI my observations. Hoping that it would be enough to get it fixed.

> The deploy.sh worked, but I am now getting the following error: [AppRunner] Failed to pull your application image. Reason: Invalid Access Role in AuthenticationConfiguration.

These are a summary of the logs:

Happy ending

This is really amazing. Sure, there were two minor issues, but they were all addressed by the agent, who fixed them and made all the necessary changes. If it were up to me to do all those steps manually, including the mistakes, because I sometimes forget to add permissions or mess up my scripts, it would take much longer than using the Amazon Q Dev CLI.

I delete the application as I don't want the National Parks crew to go after me, but I have the screenshot to prove that it worked.

Application screenshot — National Park Activity Finder

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Site Terms, Privacy, and more.