Getting Started with Jamstack

"Jamstack" is an architecture for web apps that promises to be faster and easier to create than the traditional client/server architecture.

What you'll learn#

In this article, we'll take a dive into the Jamstack architecture to better understand how it works and the advantages it offers.

We'll also build and deploy a very simple Jamstack app using Eleventy and deploy it to Netlify.

Prerequisites#

You should be familiar with:

For the practical part of this article, you'll need to have Node & NPM installed on your computer. The examples included assume a Linux-based system.

What is Jamstack?#

Rather than serving pages from a web server, Jamstack sites are static pages served directly from a CDN which allows for greater speed and security.

Interactivity and personalization can be provided by JavaScript, which can be used for HTTP connections to API services like cloud databases, payment gateways, content management, etc.

Static pages#

Rather than having a backend web app serving dynamic pages by generating HTML on the fly, Jamstack apps consist of pre-rendered static pages. Since most developers wouldn't want to write their app in HTML, a static-site generator is usually employed.

CDN#

Since Jamstack sites consist only of static assets, this means the site can be served by a distributed file-serving network aka a Content Delivery Network (CDN).

Without any web server to provide functionality, how can a Jamstack site be as dynamic as a traditional web app? For example, how can you personalize your site without a database with customer data to populate authenticated pages?

JavaScript#

Most dynamic functionality in a Jamstack app will be provided by JavaScript running in the user's browser. With the emergence of the single-page application app architecture provided by JavaScript frameworks like React, Angular, and Vue, frontend apps can simulate multi-page sites without the need for a web server.

API services#

Recently, there here have sprung up many companies providing API-based services including cloud databases (e.g. Hasura, Fauna), cloud computation (e.g. AWS Lambda), identity management (e.g. Auth0), eCommerce (e.g. Snipcart), payment processing (e.g. Stripe) and so on.

These API services can all be connected to static apps using AJAX requests during the app lifecycle, thereby greatly enhancing the possible feature set for a Jamstack app.

Why use Jamstack?#

While the idea of Jamstack apps has existed in one form or another for quite a while, Jamstack has only recently become a viable and attractive architecture as the evolution of the ecosystem permitted it.

For example, without modern JavaScript frameworks and the emergence of API services, Jamstack apps would be severely lacking in functionality when compared to traditional apps.

Let's look at some of the advantages Jamstack provides that make it an attractive option.

Cheap#

Since a Jamstack app does not have a backend server, it can be quite cheap to host. This is because backend apps usually require a web server to be listening all the time for requests, whereas CDN file serving is done with a centralized web server that you won't have to pay as much for.

Fast#

Jamstack apps will often be faster, since CDN content is served at the network edge. This means that your static files may be served from data centers around the world that are physically closer to your users, reducing latency of requests.

While a web server can also be distributed it will still likely be slower than an optimized CDN.

Even more importantly, static files are computationally much easier to serve than rendering HTML on the fly, and therefore can be served significantly faster.

Secure#

Since there is no backend server, Jamstack apps can be more secure than traditional apps since there are much fewer exploitable public interfaces. This means that you, as the developer, don't need to be concerned about server security, authentication management, database exploits etc, which are all sources of vulnerability.

Also, CDNs can provide DDoS mitigation since the content is distributed across a network, providing another way in which Jamstack can be more secure.

It should be noted that Jamstack apps still have security vulnerabilities - just less than traditional apps. For example, your serverless functions and API calls to cloud services can still introduce security holes.

Disadvantages#

Of course, Jamstack is not a silver bullet and it may not always be the superior solution.

Getting rid of the web server definitely provides advantages, but there are downsides too.

It might be argued that it's harder to develop Jamstack apps, especially for developers who are traditionally backend developers. Also, Jamstack can't take advantage of the enormous ecosystem of backend software that makes web development easier, including frameworks like WordPress, or Laravel.

It's also worth noting that most of the advantages of Jamstack are accrued for apps with many users. If you're building an internal tool, like an admin dashboard, you won't get near as many advantages of Jamstack, and it may be wise to stick with a traditional web server solution.

Making Jamstack apps#

Now we're clear on what Jamstack apps are and why you might create one. The question now, is, how do you make them?

Static-site generators#

The center-piece of a Jamstack app is usually the static-site generator. This is a framework that will turn your content into static files ready to be deployed.

These can range from simply (e.g. Eleventy) to more complex (e.g. Next.js). On the simple end, the generator might be little more than a CLI tool that turns markdown into HTML. On the complex end, the generator may allow you to create a feature-rich single-page app to present your static content.

Examples of static-site generators include Next.js, Gatsby, Nuxt.js, Eleventy, and Jekyll.

Static hosting#

As discussed, static sites are usually hosted on a CDN. While you could use a CDN service directly, like Cloudflare, or AWS S3, it's easier to use a static hosting provider like Netlify or Vercel.

The advantage these services offer is that they're geared for Jamstack sites (indeed, the term "Jamstack" was coined by Mattias Billman, CEO of Netlify) and include many useful features that will help in deploying static sites.

For example, both Netlify and Vercel provide a Git server that you can push to to trigger a build of your site, environment variable management, serverless functions, CI, and more.

Jamstack example#

Let's see how to build a simple Jamstack site - a blog. To do this, we'll use the Eleventy static-site generator and deploy it to Netlify.

To begin with, let's create a folder for our project and change into it.

Creating content with Markdown#

Let's now create a markdown file which will be used for the home page content:

We'll then add some content to the file:

One of the advantages of Eleventy is that it is very simple to use. In fact, with just one file we can create a build!

We'll use npx (a CLI tool packaged with NPM that allows you to run a package without installing it) and call the Eleventy binary which will create a build:

Eleventy will generate a file _site/index.html that looks like this:

Layout#

Of course, this is not a valid HTML page since it's missing document tags. So let's create a layout that Eleventy will use to render our markdown file with.

The liquid templating language is one that Eleventy can read and provides a very simple way to provide layouts. Here's the content you should add to your layout file:

Frontmatter#

Let's add some frontmatter to the top of the file to allow for some configuration. We'll add a layout property which tells Eleventy the layout template to use, as well as a title property.

Run Eleventy again, and here's the updated content you'll see for _site/index.html:

While very simple, this is a perfectly valid static site!

Deploy#

Let's use Netlify to deploy this site. First, register for a free Netlify account at https://netlify.com.

Then, go to https://app.netlify.com, and drag the _site folder generated by Eleventy into the browser window.

Netlify will automatically create a new app and deploy the static files. You can then view your site at https://[your-site].netlify.app!

Wrap up#

In this article, you've learned about the Jamstack architecture and should now have an understanding of how it works and the advantages it offers.

You've also built and deployed a very simple static blog using Eleventy and Netlify. If we connected an API service to this app, we'd have a bonafide Jamstack app.

To continue your discovery of Jamstack, I recommend the following next steps: