How to use CloudFormation to deploy Frontend Apps to S3 &Serverless Application Repository

Learn how to use CloudFormation to deploy Frontend Apps to S3 and Serverless Application Repository. Deploy and publish Frontend SPA apps, UI components, static websites and MicroFrontends to S3 and Serverless Application Repository using CloudFormation

Update: 2020-02-20: version 2.4.2 - Deployment directly from SAR embedded resources, documented substitutions

If you ever wanted to automatically deploy front-end web applications along with CloudFormation resources, here is how to do that. You no longer need to deploy a SPA app or a static website separately from the back-end. Just do it all together with standard sam deploy or aws cloudformation deploy commands.

We built and opensourced a custom CloudFormation resource that can manage file uploads to S3, even substituting variables in web pages when uploading to allow you to configure single-page apps and web sites with dynamic parameters during deployment. The layer is easy to use in SAM and Cloudformation templates, even for beginners. The project is available under the MIT license. You can get the source code from the GitHub  repository, or deploy it directly from the  Serverless Application Repository.

We also published an  example project that demonstrates how to package and deploy a web site using this custom Cloudformation resource.

Note: previous versions of this page included a public layer deployed to `us-east-1_`; the layer is still available, but we now discourage using it directly. Use the SAR resource, as explained below, to deploy everything in your account and not depend on any third-party resources. You can also use the SAR resource in any supported AWS region, unlike the public layer which can only be used in `us-east-1._

How it works

The standard S3 resources in CloudFormation are used only to create and configure buckets, so you can’t use them to upload files. But CloudFormation can automatically version and upload Lambda function code, so we can trick it to pack front-end files by creating a Lambda function and point to web site assets as its source code.

That Lambda, of course, won’t really be able to run, because it contains just the web site files. This is where our layer comes in. When you attach it to the Lambda function, it will make it executable. Running the Lambda function will upload the source code to an S3 bucket.

serverless cloudformation s3 frontend

Create a new web app or revamp your existing website? Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence....

Businesses need to understand serverless application with major pros and cons of serverless architecture, before deciding about serverless computing.

Bypass the complex middleware and consider a lightweight node.js implementation to deploy serverless functions from your mainframe CICS applications.

In the following lines, we’ll go through everything you need to create your own pipeline, connect it with other pipelines and maintain them only by running a not that complicated bash script. And by the end, you’ll probably come to realize yourself how awesome infrastructure as code is (no need to thank us).

Happy Serverless September 2020! We at Coding Sans love working with serverless technology. This is why we decided to publish a report with the latest serverless trends this year. We partnered up with nine other companies who share our love to make it happen.