Building E-commerce Products with JAMStack and Serverless

Collections by Chris BiscardiChristopher Biscardi

Quickly build low-maintenance products that scale with your userbase. These collections cover everything you need to build a product from your first landing page to accepting payments to scaling your serverless backend. Getting started doesn't even require an AWS account.

Learn how to build a product that lets your users:

Sign up using social or username/password combinations

Sign up using social or username/password combinations

Pay monthly using Stripe

Pay monthly using Stripe

Use the site offline

Use the site offline

Using a JAMStack site that:

Deploys to a CDN, close to your users

Deploys to a CDN, close to your users

Pre-renders relevant pages as static html

Pre-renders relevant pages as static html

Authenticates users to access their data using dynamic, client-side apps

Authenticates users to access their data using dynamic, client-side apps

And serverless functions that:

Provide GraphQL APIs

Provide GraphQL APIs

Implement Role Based Access Control

Implement Role Based Access Control

Interact with serverless databases like Fauna and DynamoDB

Interact with serverless databases like Fauna and DynamoDB

You will be introduced to real-world scenarios that put the pieces together. Along the way we'll cover topics such as: development and deployment best practices for JAMStack and serverless functions, dealing with canary deployments, CORS, implementing billing, site analytics, and observability. You'll also learn architectural patterns that enable patterns like webhooks, job queues, and how to use lambdas for dynamodb change data capture.

Initializing a new git repo with Github's hub CLIInitialize a new Gatsby project with a gitignore in yarn workspacesSetting up continuous deployment for a Gatsby site in yarn workspaces using NetlifyStart Watching

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

13 video lessons51mCommunity Resource

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

  • starting with the Gatsby client
  • handling authentication with Netlify Identity
  • Shipping a GraphQL server on Netlify Functions
  • Building in access control with a serverless capable database

    It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

10 video lessons42mCommunity Resource

This collection is a sequel to the Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

  • Fauna vs DynamoDB and when to use each
  • Setting up AWS accounts
  • Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
  • Converting our Netlify Functions deployment to a Serverless Framework deployment
  • Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.

  • 1

    We're moving to DynamoDB! We compare Fauna's features, pricing, and approach to Dynamos using motivating examples to explain why we'd move from Fauna to Dynamo.

  • 2

    To create a new DynamoDB table, first we have to create a new AWS account

  • 3

    We

    • create a DynamoDB table
    • talk about primary keys, partition keys, and sort keys
    • insert an item with a pk, sk and some JSON data
    • take a look at the dynamo representation of that data, including type information
    • then delete the item
  • 4

    We talk about The differences between a FaunaDB data model and a DynamoDB data model. We go on to explore single table design patterns, keys, access patterns and time to live attributes in Dynamo. We also touch on the adjacency list pattern.

  • 5

    We use the node.js DynamoDB document client from the aws-sdk package, along with the uuid package, to insert, update, and query items in DynamoDB. We also cover related topics like reserved words in queries and how to get around that, KeyConditionExpressions like begins_with, and other extras on the way.

  • 6

    We take a set of DynamoDB queries that insert, update, and query for TODOs and replace the entire backend of our GraphQL API which is currently using FaunaDB. We cover DynamoDB operation ReturnValues for put, update, and query operations, implementing transformer functions to coordinate the stored representation in DynamoDB with your business objects, and then we get into Netlify. Netlify's environment variables don't allow us to use AWS_ACCESS_KEY_ID as an environment variable name. Once we fix that, we set up a pull request on GitHub, which results in a Deploy Preview that includes our new GraphQL function deployment!

  • 7

    We compare Netlify Functions with AWS Lambda and talk about why we'd move from one to the other. Netlify Functions is a high level DX on top of AWS Lambda, so we'll have to find a new DX as well.

  • 8

    The Serverless Framework is an open source npm package that makes it easier to deploy functions to various platforms like AWS Lambda. It is not the same thing as "serverless", which is the concept while "Serverless Framework" is an npm package and a hosted product.

  • 9

    We set up a Serverless Framework account on their website, then go in write our first serverless.yml file, set up CI/CD, cover iamRoles, http events, cors, stages, and finally where to get the URL for your deployed endpoint.

  • 10

    We have a GraphQL service deployed but the service was moved from Netlify Functions to AWS Lambda. AWS Lambda doesn't do the same magic that Netlify Identity+Functions did for us, so we have to explore the GoTrue API, figure out which endpoints to hit, write an AWS custom authorizer, and make sure the authorizer will run before our lambda function.