Create a Jamstack Site Using Serverless Functions

Serverless architecture is a way to build web applications and services without managing backend infrastructure. In a serverless architecture, cloud providers like DigitalOcean provision, manage, and scale the backend servers and components required to host applications so you can focus on writing and deploying code instead of maintaining the servers that host your applications.

DigitalOcean Functions allow you to deploy pieces of functionality that can perform the same tasks as a traditional API without the requirement of setting up a server to manage the requests. For example, you can write a traditional Node.js function that returns a list of products from a database and then deploy that function to the Functions service. Once deployed, users and applications can retrieve data from the database by making an HTTP request to the function’s URL.

Using serverless functions can make applications more lightweight and secure. Because you only pay for DigitalOcean Functions when a function runs, serverless architecture is often less expensive for apps with variable levels of traffic.

In this tutorial series, you deploy a Jamstack website that uses DigitalOcean Functions to retrieve and post data to a MongoDB database cluster.

What is Jamstack?

The “JAM” in Jamstack stands for JavaScript, APIs, and Markdown. Jamstack applications use a combination of client-side JavaScript, third-party APIs, and static HTML to create a website that has the same robust functionality as a full-stack website but without the usual backend infrastructure to handle and process requests.

In a traditional full-stack web application, all requests pass through centralized backend infrastructure. A web server routes traffic to an application server, which contains business logic and communicates directly with databases and content management systems. This architecture requires managing servers, scaling backend resources, and maintaining long-running services to handle user requests.

  graph LR
  subgraph Traditional_Full_Stack_App
    TClient(<img alt="user icon" src="https://docs.digitalocean.com/images/icons/diagram/user.9dc53cf316f6b341e5485543bbe576847275427675e2b79c4489b6a75aefba86.svg" class="mermaid-icon" />  Client)
    TWeb(<img alt="standard-droplet icon" src="https://docs.digitalocean.com/images/icons/diagram/standard-droplet.2409fa281ef5c3436178f08a67fb78544ae1085a9e9554c602c00982c33c0480.svg" class="mermaid-icon" />  Web Server)
    TApp(<img alt="general-purpose-droplet icon" src="https://docs.digitalocean.com/images/icons/diagram/general-purpose-droplet.dcbe044813700d45d47530efe949890acac7ec782d49767c492283c4242e7c8c.svg" class="mermaid-icon" />  App Server)
    TDB(<img alt="managed-db icon" src="https://docs.digitalocean.com/images/icons/diagram/managed-db.93aae98f4a73975ca2ec90cc3a874193567a2cef119e70d9b0cc9f5f7d14f9e9.svg" class="mermaid-icon" />  Database)
    TCMS(<img alt="documentation icon" src="https://docs.digitalocean.com/images/icons/diagram/documentation.8aa6843d8fb15be236640a20a570a83174e662e946cb85913bb72b50f14151d9.svg" class="mermaid-icon" />  CMS)

    TClient --> TWeb --> TApp
    TApp --> TDB
    TApp --> TCMS
  end

  %% Styling
  style Traditional_Full_Stack_App fill:transparent,stroke:transparent

Jamstack applications decouple the frontend from backend services. Static assets are prebuilt and served from a CDN, while dynamic functionality is handled through APIs and serverless functions that are invoked only when needed. This architecture reduces operational complexity, improves performance through global distribution, and allows each component to scale independently.

  graph LR
  subgraph Jamstack_App
    JClient(<img alt="user icon" src="https://docs.digitalocean.com/images/icons/diagram/user.9dc53cf316f6b341e5485543bbe576847275427675e2b79c4489b6a75aefba86.svg" class="mermaid-icon" />  Client)
    JCDN(<img alt="spaces-cdn icon" src="https://docs.digitalocean.com/images/icons/diagram/spaces-cdn.50f52591e6a11c3e2922fe376b910601304209581927844cd116c8462239ebe7.svg" class="mermaid-icon" />  CDN)
    JFunc(<img alt="API icon" src="https://docs.digitalocean.com/images/icons/diagram/API.1137162121a06117fbd8b2e530781f606eae8e0a33297587916542ec9f7794b3.svg" class="mermaid-icon" />  Functions & Microservices)

    JClient --> JCDN
    JClient --> JFunc
  end

  %% Styling
  style Jamstack_App fill:transparent,stroke:transparent

Serverless functions augment the Jamstack approach to web application development by providing a way to develop and deploy CRUD functionality without relying as heavily on third-party APIs to handle and process the application’s requests.

About the Sample Application

The sample application in this tutorial is an e-commerce storefront with the following functionality:

• On load, the application retrieves a list of available products (in this case, coffee beans) from a MongoDB database and renders the list on the HTML page.

• The application then allows users to subscribe to an email list. This functionality posts the user’s email address to a separate collection in the MongoDB database.

The site uses Bootstrap CSS elements for its design and layout, the Axios HTTP client to make requests to and from the MongoDB database, and a few vanilla JavaScript functions to enable the site’s functionality.

Start Tutorial

The series consists of three parts:

Serverless Jamstack, Part 1: Deploy a MongoDB Database

Deploy a static website and a MongoDB database as part of setting up a Jamstack-style app.

Serverless Jamstack, Part 2: Add Serverless Functions to App

Set up serverless functions and connect them to the database.

Serverless Jamstack, Part 3: Connect Serverless Functions to Website

Connect the serverless functions to the static website, test the site’s functionality and redeploy the app.