Serverless web apps with Firebase and AWS Lambda

Topics: Firebase Hosting, AWS Lambda

Serverless has become a popular solution for small to medium-sized projects. The downside is a technology stack lock-in which forces developers to use technologies that might not be optimal for their projects. For example, people using Google’s Firebase to host their static resources have to write custom endpoint functions in JavaScript or TypeScript (as of August 2018). Developers typically use custom backend functions to hide business logic or proprietary data operations from users because anything that runs in the browsers front end as JavaScript is ultimately an open book from the users perspective.

Firebase + AWS Lambda
  • api.example.com (AWS lambda function serving custom business logic used by www.example.com)

Firebase hosting

  • 1) Deploy a static web app to Firebase by following this part of the Firebase documentation. The end result will be a public web app. Its URL will look something like this: my-project-name.firebaseapp.com
Firebase hosting setup
  • 3) Go to your Firebase project dashboard and in the hosting section initiate the steps to connect to a custom domain. You will need to verify ownership of the domain by adding a DNS TXT record to your registrar’s DNS settings. As always, the documentation is useful.
Connect custom domain to Firebase app
  • 5) We also need to make sure that users entering just example.com are also pointed to https://www.example.com. To accomplish this, return to your registrar’s DNS settings and a setup subdomain forwarding. The exact steps vary for each registrar but the end result will be example.com -> https://www.example.com. If possible, set the redirect as permanent 301, forward path, and enable SSL.

AWS Lambda

At this point we have a web app deployed and using our custom URL. The app however uses the subdomain api.example.com to obtain proprietary data. In Angular, the code requesting data from the subdomain may look something like this:

const headers = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'some-api-key'
})
};
this.http.get('https://api.example.com', headers)
.subscribe((data: string) => {
const dataJson = JSON.parse(data);
// some data operations
}
);
AWS Lambda zip upload
API Gateway endpoint creation
API key generation example
Usage Plan example
AWS Certificate Manager
Custom Domain Name