Realtime notifications using aws appsync subscriptions

Delighted to share my full stack project as part of the current amplify hackathon in hashnode, do read the full article and share your thoughts.

Before we go further let me clarify that this tool is more or less an extension to my early project with AWS CDK called event-forwarder which is publicly available.

For more details on that check out the below links to understand from where I sourced the data.

🔁 Original post at 🔗 Dev Post aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

🔁 Reposted at 🔗 dev to @aravindvcyber aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

About this project 🚧

Here I will be trying to build a web-console to monitor the various deployments happening via cloud formation cross-region and in multiple accounts using a single page application built using amplify studio and Figma. The cloud formation events are sourced from my other public project (discussed above in the links). Hope this helps someone as well.

Plan 🏄

In this application, I will be showing how I managed to forward the cloud formation events from multiple accounts across regions into a single web console with some deep links to identify the status of the various deployments in real time.

So here I will extend the event forwarder project by generating dynamodb streams to put data into my custom data model (GraphQL + Dynamodb) defined using a lambda handler.

Hence in simple words, the live data will be generated by dynamodb streams coming out of the event-forwarder master DB, which is temporarily used to send slack notifications.

We will extend this by creating a new stack that will be consuming the data dynamodb streams using a consumer lambda which puts the processed information to dynamodb, later we planned to move this via the graphql API using eventbridge integration.

As you can see that the external stack now emits events which would be used as the primary and the direct dynamodb integration will be obsolete.

Final Architecture 🗽

Here you could find that the external eventbridge events are filtered and buffered with sqs and then connected to stacksDash function which we will be creating.

Further the eventbridge and sqs besides custom gql resolvers will be created and glue using amplify add custom feature which can help us use cdk stacks to provision the additional backends using amplify cli.

Data Modelling in Amplify Studio⛷️

Here I have shown how I created a data model and set authorization rules to configure Cognito user pools as the default mode besides letting the owners access the data in the system for finer control of the data. Besides this, I have enabled the apiKey-based authentication to be used mostly for backend data inserting and processing for finer control

Lambda created using amplify cli 🏄‍♂️

I quickly created a lambda (amplify add function) with the necessary graphql endpoint and key environment variables automatically inserted it also can have the event payload defined to quickly test using the amplify mock function. This lambda can now be used to perform mutations to the data model, and in the future, I have plans to connect the dynamodb streams via this lambda.

Authentication Enabled with Signup 🤸

It is very easy to set up authentication in amplify studio.
I managed to spin up an email verification-based signup and was also able to set up groups to help with my real account and a sandbox profile for test and reviewing profiles with mock data.

Signup is much easier 🤼

I can easily create new users from the studio as well as from the app, which will automatically create a Cognito user in the Cognito user pool with the required information I required. For the sandbox account, I managed to directly activate it from the studio.

Also, the OIDC mode is very much promising, and I hope I can quickly spin up that soon in the future to use social logins.

Since as you may know this project is only a demonstration and cannot be directly used by public users like the blog or other content-sharing sites, I stick to email-based authentication for now.

Integration with social providers for authentication 🤺

Here I have used google oauth to sign and access the application, so that I could use the app seamlessly in any device I have already signed in the browser securely and also stop remembering multiple accounts and credentials.

Prototyping the UI design with Figma 🏌️

Now it is time to do some real design and prototyping in Figma, I managed to learn this last 2 weeks and I could create rich UI components as shown below. It is very much helpful as I could visually design and get the pixel-perfect components in my React front end through amplify studio.

Figma made this project work scale and be consistent, and I hope more such integration will be there in amplify studio soon.

Studio UI Configuration 🏋️

From amplify studio, I managed to sync my Figma and commit the new changes to my components. Besides this cool features like creating the collection, configuring the properties, creating a slot for UI elements, and binding the data are much useful to get this into a useable mode when I pull this using amplify pull

UI workflow 🤺

Okay, let us see what we have got this web console.

Sandbox Home Page with Mocked data 💪

Using the credentials, for the sandbox user, I have created. I was able to log in to the home page easily by skipping the verification step which I confirmed in amplify studio itself for this user.

Real Account data demo 🧗‍♂️

Okay now it is time to walk you through my real account, and for the data generation it is automatically taken care of as I build and deploy amplify again and again(Since it uses cloud formation to provision resources), it generates the data for me and now I can access them from a single dashboard and as shown in this clip below.

Search and Filters 🏊‍♂️

Here we have a sidebar that acts like a master filter that will refine the collection as we select them one after the other. It was a bit tricky since I have to prepare the icon and selectable into groups of frames and then dynamically link them to the state using in react. And finally, I managed to filter them as per my selection.

More the collection component bootstrapped from the amplify studio is also amazing with a search bar and pagination controls.

Deeplinks to aws console 🏋️‍♀️

This project could have more features as I continuously refine it while I explore new features and implement them in the future.

Here specifically I was looking for buttons that could deep link me to the AWS console to the specific resource and it worked as expected as shown below. Hope it is helpful for someone. The rest is more of experiments to try out amplify studio and cli.

Deep link to all CFN events 🏋️‍♀️

Selecting any stack level event will also show a full list of all the resource level events associated with the full lifecycle of the CFN stacks as shown in the below video. This is achieved by creating a custom graphql resolver which could access the existing dynamodb table (this is the master dynamodb table in the event forwarder project) beyond the one which is directly created by this tool.

Using custom resource in amplify it is very easily to leverage and extend the existing resources to work seamless across your application.

Appsync makes it easier with GraphQL 🚣‍♀️

I managed to test my graphql endpoint in my studio of choice in apollo sandbox as well as used Cognito user ids to test the user level access in the aws appsync console easily throughout the project work.

GraphQL Transformer v2

Also the new graphql transfer v2 for amplify is really a simple and cool way to design and model the schema, capabilities regards to indexs and auth are tried part of this solution.

Also I also created a custom VTL based resolver using CDK which help me with easier hack whenever I need a new resolver for my specific query needs.

Using amplify add custom you can create a cloudformation or cdk resource. I created a custom resolver using cdk as shown below with VTL based template.

const retVal: AmplifyDependentResourcesAttributes =
      AmplifyHelpers.addResourceDependency(
        this,
        amplifyResourceProps.category,
        amplifyResourceProps.resourceName,
        [
          {
            category: "api",
            resourceName: "StacksDash",
          },
        ]
      );

    const resolver = new appsync.CfnResolver(
      this,
      "custom-resolver-custQuery",
      {

        apiId: cdk.Fn.ref(retVal.api.StacksDash.GraphQLAPIIdOutput),
        fieldName: "custQuery",
        typeName: "Query", // Query | Mutation | Subscription
        requestMappingTemplate: appsync.MappingTemplate.fromFile(
          path.join(__dirname, "..", "Query.custQuery.req.vtl")
        ).renderTemplate(),
        responseMappingTemplate: appsync.MappingTemplate.fromFile(
          path.join(__dirname, "..", "Query.custQuery.res.vtl")
        ).renderTemplate(),
        dataSourceName: "DeploymentsTable", // DataSource name
      }
    );

    resolver.applyRemovalPolicy(RemovalPolicy.DESTROY);

Sample Simple VTL template for request and response below

{
    "version": "2017-02-28",
    "operation": "GetItem",
    "key": {
        "id": $util.dynamodb.toDynamoDBJson($ctx.args.id),
    }
}

#set($ctx.result = $util.parseJson($ctx.result))

$util.toJson($ctx.result)

Appsync subscriptions for live sync 🚀

Besides that amplify api also comes with auto-generated mutations and subscriptions which are very much helpful to update the data items in the react dom as and when the cfn deployments events are emitted with any necessary page reload or refresh.

Notification banners built with figma components with variants 🚣‍♀️

The above appsync notifications also powers these handy banners displayed to identify the distinct updates without refreshing the screen in the user browser with amplify studio it is seamless to bring these updates then and there

AWS Amplify Hosting 🚣‍♀️

Finally hosting the frontend is the missing piece and glad to full fill this with CI/CD approach using amplify hosting.

Also this gave really cool features to lock and secure my website with authentication for endpoint and synthetic canary to monitor the endpoint.

Branch level and global access control for hosting

This would definitely help me secure my app as I release it to test and for my own use privately as well.

Synthetic Canaries for continuous monitoring

Previews for pull requests to main branch

Conclusion 🚵‍♂️

Due to time constraints, and steep learning sessions, I have to complete regards to Figma and amplify cli and studio, in a matter of few weekends to get my first amplify project. Hope you like it and I am open to reviews and suggestions. And I also hope I could explore new features and implement them to make this more useful in the future.

And I am still cleaning up the sandbox account, once it is ready I will be to share it for someone to inspect and check it in action. Or feel free to comment or connect with me to help you with the necessary access for the limited preview before I publish the working model.

For more details on that check out the below links to understand from where I sourced the data for cloud formation events.

🔁 Original project at 🔗 Dev Post aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

🔁 Reposted project at 🔗 dev to @aravindvcyber aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

Nonetheless, it is a great opportunity to learn and build and demo to everyone what I built using amplify studio.

🎉 Thanks for supporting! 🙏 and do follow and share this series for more such articles.

Would be great if you like to ☕ Buy Me a Coffee, to help boost my efforts 😍.

🔁 Original post at 🔗 Dev Post aws-cdk-101-projects-stacks-dash-a-console-for-monitoring-multi-account-cross-region-cloudformation-deployments-using-amplify-studio

🔁 Reposted at 🔗 dev to @aravindvcyber aws-builders/stacks-dash-a-console-for-monitoring-multi-account-cross-region-cloudformation-deployments-using-amplify-studio-1ik8