Build a scalable containerized web application on AWS using the MERN stack with Amazon Q…

The MERN (MongoDB, Express, React, Node.js) stack is a popular JavaScript web development framework. The combination of technologies is well-suited for building scalable, modern web applications, especially those requiring real-time updates and dynamic user interfaces. Amazon Q Developer is a generative AI-powered assistant that improves developer efficiency across the different phases of the software development lifecycle (SDLC). In this two-part blog series, I capture the experience and demonstrate the productivity gains you can achieve by using Amazon Q Developer as a coding assistant to build a scalable MERN stack web application on AWS. The solution forms a solid foundation for you to build a feature rich web application. In my case, using the process outlined in this blog, I extended the MERN stack web application to include real-time video conferencing (using Amazon Chime SDK) and an AI chatbot (invoking Amazon Bedrock foundation models).

Typically, in the plan phase of the SDLC, time is spent researching approaches and identifying common solution patterns that can deliver on requirements. Using Amazon Q Developer, you can speed up this process by prompting for an approach to deploy a scalable MERN stack web application on AWS. Trained on over 17 years of AWS experience building in the cloud, Amazon Q Developer responses are based on AWS well-architected patterns and best practices. In the design phase, I use the responses from Amazon Q Developer to craft a detailed requirements prompt to generate the code for your MERN stack web application. Then in the build phase, I extend the code to implement a working solution, generate unit tests and conduct an automated code review.

In part 2 of this blog series, I will use Amazon Q Developer to extend the base MERN stack web application to include a chat user interface (which invokes an agentic workflow based on the Strands Agent SDK and Amazon Bedrock), deploy the solution to AWS using infrastructure as code (IaC), troubleshoot issues and generate the documentation for our solution.

Walkthrough

Prerequisites

To complete the walkthrough in this post, you must have the following:

Sign in to Amazon Q Developer (in your IDE)

After setting up Amazon Q Developer access tier and installing the Amazon Q extension for your IDE, you can sign in to Amazon Q Developer by using the IDE.

1. The first sign-in flow shows the authentication process for the Free tier using an AWS Builder ID.

2. The second sign-in flow shows the authentication process for the Pro tier using a sign-in URL to the AWS access portal (provided by your AWS administrator).

3. After successful authentication, you’ll be presented with an initial chat window to start a conversation with Amazon Q Developer. In the chat input at the bottom, you have options to add additional context for Amazon Q Developer to provide responses such as using the active file or the entire workspace, defining rules for Amazon Q Developer to follow when it generates responses, toggling agentic coding on and off, and selecting your preferred foundation model (Claude Sonnet 4 in our case).

With Free Tier, you have access to limited agentic requests per month, access to the latest Claude models and use of Amazon Q Developer in the IDE or CLI. In this post, I use the Pro Tier, which in addition to Free Tier features, also provides increased limits of agentic requests and app transformation, Identity center support and IP indemnity.

Plan

In the planning phase, you can prompt for a solution approach to better understand the different components that will make up the MERN stack web application. You would toggle agentic coding off in this phase as you research and understand the best approach. Example planning phase prompt:

“Provide a high-level summary of a solution approach to deploying a scalable MERN stack application on AWS.”

The response from Amazon Q Developer (also shown in the following screenshot) breaks down the solution into the following components:

• Frontend React application
• Backend NodeJS and Express containerized app running on Amazon ECS Fargate
• Database using MongoDB or Amazon DocumentDB
• Core network infrastructure
• Security
• Monitoring and operations
• Continuous integration and delivery (CI/CD) pipeline
• Performance

Design & Build

After reviewing the solution approach, you can create a more detailed prompt about the web application requirements, which will be used in the feature development capability of Amazon Q Developer to generate the solution components. Turn agentic coding on before submitting the prompt. Example design phase prompt:

“Build a scalable containerized web application using the MERN stack on AWS, with login and sign-up pages integrated with Amazon Cognito, a landing page that retrieves a list of shops from DocumentDB. I don’t intend to use AWS Amplify. It needs to be a modular design with components that can scale independently, running as containers using ECS and Fargate, highly available across two Availability Zones. I need to build, test and run the MERN stack locally before pushing the solution to AWS.”

As shown in the following screenshots, Amazon Q Developer will provide an architecture overview of the solution before going through the build process step by step. I will provide a select number of screenshots for illustration but note that the steps generated by Amazon Q Developer will vary for your solution prompt.

For each file that it creates or updates, Amazon Q Developer gives you the option to review the difference and undo the changes. This is an important step to understand whether the generated code meets your requirements. For example, the snippet below shows an update the Navbar component.

When viewing the diff, you can see that Amazon Q Developer has added a new button class to fix a display issue.

Amazon Q Developer can also execute shell commands. In this case, create the backend and frontend directory. You have the option to ‘Reject’ or ‘Run’ the command.

Here’s a snippet of Amazon Q Developer creating the authentication service, data model and Dockerfile for the solution.

Another snippet of Amazon Q Developer creating the React frontend.

A snippet of Amazon Q Developer creating the AWS infrastructure components.

Amazon Q Developer then prompts to execute the deployment.

But I noticed that it hasn’t followed my initial prompt to “build, test and run the MERN stack locally before pushing the solution to AWS”, so I provide the following prompt:

“In my initial prompt, I asked to build, test and run the MERN stack locally before pushing the solution to AWS.

Amazon Q Developer acknowledges my observation and makes the necessary changes for local deployment.

Next, Amazon Q Developer will build, test and run the MERN stack locally as shown below.

When reviewing the .env file changes, I noticed that the Amazon Cognito properties are not properly set, so provide the following prompt:

“When reviewing your .env file changes, I noticed that setting to COGNITO_USER_POOL_ID and COGNITO_CLIENT_ID to local-development is incorrect, as I should be connecting to Amazon Cognito in AWS. And this hasn't been created yet. Additionally, the local deployment has been configured to connect to the local MongoDB container instead of DocumentDB.”

Amazon Q Developer again acknowledges my observation and attempts to fix the issues. These two issues highlight that to effectively use Amazon Q Developer, it’s important to review and challenge the responses provided.

After fixing the issues, Amazon Q Developer updates the README.md to reflect the updated approach and asks if I want to do a quick deployment with mocked authentication or an actual deployment with Amazon Cognito resources.

I choose option B, with real Amazon Cognito resources, so Amazon Q Developer deploys the resources as shown below.

Amazon Q Developer now checks that the frontend, backend and MongoDB containers are running.

Amazon Q Developer also tests that the application is running by executing curl commands to the application endpoints.

After successfully running the commands, Amazon Q Developer provides a summary of the results, with details on how to access and test the application.

Here’s a diagram showing the locally deployed solution.

Now that the frontend, backend, and MongoDB containers are running, you can access the frontend application Sign In page on http://localhost:3000.

Before logging in, you need to create a user. Choose the Sign Up link to enter an email and password.

After attempting to sign up, I noticed that Amazon Q Developer hasn’t generated the corresponding frontend screen to enter the confirmation code, so I prompt it to fix the issue. Again, the generated code isn’t always perfect, but it’s a good starting point.

After authentication, you’ll be routed to the shops page as shown.

Test

Now that you’ve built and can run the MERN stack web application locally, you can use Amazon Q Developer to generate unit tests to find defects and improve code quality. I provide the following prompt:

“Can you generate unit tests for the project?”

Amazon Q Developer will then create comprehensive unit tests for the application.

At completion, Amazon Q Developer will provide a summary of the unit tests generated:

Amazon Q Developer also provides instructions for executing the tests:

After executing the unit tests, Amazon Q Developer provides a summary of the results.

Review

We can now conduct a code review of the MERN stack application by prompting the following:

“Can you do a code review of my project to identify and fix any code issues?”

Amazon Q Developer will perform a code review and identify issues that require attention.

After completing the review, Amazon Q Developer will provide a summary of the critical issues fixed, along with next steps.

Clean up

To avoid incurring future charges, remove the Amazon Cognito resources that you created.

Conclusion

In a traditional SDLC, a lot of time is spent in the different phases researching approaches that can deliver on requirements: iterating over design changes, writing, testing and reviewing code, and configuring infrastructure. Amazon Q Developer is a generative AI-powered assistant that improves developer efficiency across the phases of the SDLC. In this post, you learned about the experience and saw productivity gains you can realize by using Amazon Q Developer as a coding assistant to build a scalable MERN stack web application on AWS.

In the plan phase, you used Amazon Q Developer to prompt for a solution approach to deploy a scalable MERN stack web application on AWS. Then in the design phase, you used the initial responses from Amazon Q Developer to craft a detailed requirements prompt and generated the code for your MERN stack web application. In the build phase, you customized the code and deployed a working solution locally. In the test phase, Amazon Q Developer generated the unit tests for you to identify bugs early to improve code quality. Finally, in the review phase, you conducted a code review and remediated issues identified.

In part 2 of this blog series, you will use Amazon Q Developer to extend the base MERN stack web application to include a chat user interface (which invokes an agentic workflow based on the Strands Agent SDK and Amazon Bedrock), deploy the solution to AWS using infrastructure as code (IaC), troubleshoot issues and generate the documentation for our solution.

About the Author

Bill Chan is an Enterprise Solutions Architect working with large enterprises to craft highly scalable, flexible, and resilient cloud architectures. He helps organizations understand best practices around advanced cloud-based solutions, and how to migrate existing workloads to the cloud. He enjoys relaxing with family and shooting hoops.

Transform your cleaning routine with the Shark AI Ultra Voice Control Robot Vacuum! This high-tech marvel boasts over 32,487 ratings, an impressive 4.2 out of 5 stars, and has been purchased over 900 times in the past month. Perfect for keeping your home spotless with minimal effort, this vacuum is now available for the unbeatable price of $349.99!

Don’t miss out on this limited-time offer. Order now and let Shark AI do the work for you!

Help Power Techcratic’s Future – Scan To Support

If Techcratic’s content and insights have helped you, consider giving back by supporting the platform with crypto. Every contribution makes a difference, whether it’s for high-quality content, server maintenance, or future updates. Techcratic is constantly evolving, and your support helps drive that progress.

As a solo operator who wears all the hats, creating content, managing the tech, and running the site, your support allows me to stay focused on delivering valuable resources. Your support keeps everything running smoothly and enables me to continue creating the content you love. I’m deeply grateful for your support, it truly means the world to me! Thank you!