Marcia Villalba
Marcia Villalba

Marcia Villalba

Build  production-readyfull-stack applicationswith GraphQL

Build production-ready full-stack applications with GraphQL

Marcia Villalba's photo
Marcia Villalba
·Nov 29, 2021·

4 min read

This blog post is for the reinvent talk BOA308 Build production-ready full-stack applications with GraphQL

Maintaining velocity with backend and front-end teams working on the same application can be difficult. Each team often uses their own tools and methodology, making it harder to deliver high-quality full-stack applications in production. In this chalk talk, learn how GraphQL interfaces simplify using a single backend with multiple front-end technologies such as iOS, Android, or web. Also learn how to manage the lifecycle of full-stack applications and implement best practices for CI/CD, infrastructure as code, and AWS.

The talk won't be available in youtube as it is a chalk talk. But I will share with you some material in video.

This talk was created by Gunnar Grosch, Derek Bingham and Marcia Villalba.


Backend code:

Client code:

Table of contents

The talk is divided in three parts.

  1. Building the client application: Where we build the application using AWS Amplify, AWS AppSync and we create all the cloud infrastructure using AWS CDK.
  2. Automating everything: Where we create a CICD pipeline using AWS CDK Pipelines
  3. Maintaining and improving: Where we go one more step and show you how to do integration tests for this application, and observability with AWS X-Ray and Cloudwatch

I will share with you some videos and more links with information on each of the parts.

Part 1 - Develop the app

Create an AWS Amplify app with AWS CDK

Deploying a web app to the cloud using good practices and also working with multiple teams can be challenging. We always se tutorials on how to use one or the other framework, when in reality in our organizations we have multiple teams working with multiple frameworks.

In this video I want to show you how to combine AWS CDK and AWS Amplify to build a front end app using React and a backend serverless application.

You can extend this same idea into many things and there is a lot of potential on mixing this two frameworks together.

Create Amazon Cognito user pools and identity pools with AWS CDK

In general when we tend to have one Amazon Cognito resource shared between multiple client applications and if we use the Amplify CLI we will be creating a new one. In addition the Amazon Cognito resources: user pool and identity pool in many teams want to be managed by the backend teams. Therefore the backend developers want to have it in a stack that they can control, for example using AWS CDK.

In this video I will show you how to create your Amazon Cognito user pool and identity pools from AWS CDK, and share the values to your AWS Amplify application using environmental variables, so then everything is transparent for the client developers.

Create AWS AppSync from AWS CDK

AppSync is a managed GraphQL service from AWS. If we tried Amplify we love the ease that Amplify creates the whole GraphQL schema, datasources and all the resources that are involved. When we build the same things using other frameworks - like CDK we need to make all the resources from scratch and also all the resolvers. It takes a lot of code and work. What if I told you that there is a level 3 constructor that does everything for you.

I will show you how to build your backend with CDK and AppSync and then integrate the whole backend with AWS Amplify and use the Amplify libraries to invoke those APIs and also generate the models in the client automatically based on the graphql schema.

More resources:

Export Amplify backends to CDK and use with existing deployment pipelines:

Override Amplify-generated backend resources using CDK:

Part 2 - Automate everything

Basics of AWS CDK Pipelines

Deploy your application to AWS using the best practices from DevOps, like infrastructure as code and CI/CD. For deploying your application to the cloud you will be using AWS CDK Pipelines. CDK Pipelines are a high level construct from CDK that allows you to create pipelines that self mutate, following best practices like Infrastructure as code and Continuous integration and continuous deployment.

How to manage your application configuration in CDK and CDK Pipelines

How do I manage configuration of all environments for your CDK pipeline? Structuring configuration is always hard. But it is very important to make our pipeline reusable.

How to have a development environment using CDK Pipelines?

How to have a development or experimental environment when using CDK Pipelines? This is a question I got many times. Here is my solution for that problem. By using this method you can have your own environment for doing all your tests and explorations and when you are done merge it to the main branch and push it to production.

Part 3 - Maintaining and improving

Coming soon

Share this