How to Build a Jamstack Application in Postman
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-31 17:40:03

---
title: How to Build a Jamstack Application in Postman
published: true
description: Learn to JAM with scripts, mock servers, and the visualizer
tags: javascript,webdev,beginners,tutorial
canonical_url: https://blog.postman.com/how-to-build-jamstack-application-in-postman/
cover_image: https://blog.postman.com/wp-content/uploads/2022/01/jamstack-postman-blog-5.png
---

Jamstack originally referenced a web architecture composed of JAM: JavaScript, APIs, and Markup. Websites could be delivered statically, such as serving HTML from static hosting, while providing dynamic content and an interactive experience through JavaScript and APIs.

> A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup
> —Mathias Biilmann, Co-Founder and CEO of Netlify

This type of architecture decouples the frontend from the backend. So instead of running on a backend web server, a Jamstack site typically deploys to a content delivery network (CDN) so web content can be delivered quickly from edge servers that are close to the end users and API endpoints can be hosted on serverless architecture.

Over the last few years, Jamstack has grown beyond just sites to serve static content, and it has led to a [colorful debate](https://remotesynthesis.com/blog/jamstack-in-2021) about what constitutes Jamstack and even opinions about its capitalization. Regardless of your criteria, these static web apps are becoming very popular among hobbyists and global enterprises alike. And their growth is further driven by the booming API economy that can offer any variety of third-party services and turnkey solutions.

For developers who are new to Jamstack, let’s walk through a simplified example in Postman to see how each part of the JAM works.

## 4 steps to build a Jamstack application in Postman
The modular and decoupled nature of Jamstack architecture means there are a bunch of tools available to help you with each part of the implementation. For example, most Jamstack applications are developed using JavaScript web frameworks like [Next.js](https://nextjs.org/) and [Gatsby](https://www.gatsbyjs.com/). And then they’re deployed using services like [Vercel](https://vercel.com/) and [Netlify](https://www.netlify.com/) and hosted on a content delivery network (CDN).

Let’s build and host a simplified Jamstack application in Postman using code samples from [the Postman documentation for the visualizer](https://learning.postman.com/docs/sending-requests/visualizer/). And then we will take a closer look at the JAM.

**1. Create a collection:** In Postman, create a new collection named `Jamstack`. Then add a `GET` request to the collection named `API call` with the request URL `{{url}}/data`.

![create a collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3o3rgd3putx0iyjo9wk.png)

**2. Add an example response:** Select the overflow menu (…) of the request to add an example response (`e.g.`) called `Example data`. This example response is what will be returned from our mock server. Under the **Body** tab of the example response (on the bottom), select the `JSON` data type from the dropdown menu. Then add the following placeholder JSON. If you’re copying from the Postman documentation, make sure to remove the commented row beginning with `//` and preceding `,` character so that the JSON is valid.

```*json
[
    {
        "name": "Alice",
        "email": "alice@example.com"
    },
    {
        "name": "Jack",
        "email": "jack@example.com"
    }
]
```

Under the **Headers** tab of the example response (still on the bottom), add a header with a key `Content-type` and value `application/json`. Lastly, add a response status code of `200 OK`.

![add an example response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zethzc9traunzkl49i3y.png)

**3. Add a mock server:** Select the overflow menu (…) of the collection `Jamstack` to [add a new mock server](https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/#creating-a-mock-from-a-collection) called `Mock data` to the collection. Once Postman finishes creating a mock server, select the new environment created by Postman called `Mock data`. Hover on `{{url}}` in the request URL to see the value being read from the actively-selected environment.

![Add a mock server to the collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn4i3e2juacnqt8cbhw3.png)

**4. Visualize the data:** Select the request `API call`, and send the request to see the example data returning from the mock server. To update the data returned from the mock server, you can edit the example response body (`e.g.`). We will continue using code samples from [the Postman documentation for the visualizer](https://learning.postman.com/docs/sending-requests/visualizer/). Under the **Tests** tab, add the following code for an HTML table represented as a template string.

```*javascript
var template = `
    <table bgcolor="#FFFFFF">
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        {{#each response}}
            <tr>
                <td>{{name}}</td>
                <td>{{email}}</td>
            </tr>
        {{/each}}
    </table>
`;
```

And then add the following code to pass the response data to render in the template string and instantiate the visualization.

```*javascript
// Set visualizer
pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()
});
```

Save your changes. And then send the call, and toggle over to the **Visualize** tab of the response to see our table.

![Visualize the response data
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewvho1i599krjb5c1fgu.png)

## Watch and learn

{% youtube xyOIWGPUeR4 %}

If you want to skip ahead to the finished product, fork this example collection and environment to your own workspace.

[![fork the sample code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8g64ctk1yufk4tdzqzm.png)](https://god.gw.postman.com/run-collection/13191452-9e1d8008-416a-476b-8e84-6650cfbd6f87?action=collection%2Ffork&collection-url=entityId%3D13191452-9e1d8008-416a-476b-8e84-6650cfbd6f87%26entityType%3Dcollection%26workspaceId%3D02d1963b-f4c4-49cc-bd6b-13f7015dd726#?env%5BMock%20data%5D=W3sia2V5IjoidXJsIiwidmFsdWUiOiJodHRwczovL2Y3OTNiYWU1LTliNjMtNGYzMC1iOWU3LTNkYTkwMTVhYmQ2Ny5tb2NrLnBzdG1uLmlvIiwiZW5hYmxlZCI6dHJ1ZSwidHlwZSI6InRleHQiLCJzZXNzaW9uVmFsdWUiOiJodHRwczovL2Y3OTNiYWU1LTliNjMtNGYzMC1iOWU3LTNkYTkwMTVhYmQ2Ny5tb2NrLnBzdG1uLmlvIiwic2Vzc2lvbkluZGV4IjowfV0=)

In the next section, let’s dissect the JAM in this example, and think about ways to enhance each component.

## A closer look at the JAM

![elements of the JAM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv18qu2ww5t5t7ydgvwv.png)

**JavaScript**
The [visualization](https://learning.postman.com/docs/sending-requests/visualizer/) is instantiated using the `pm.visualizer.set()` function invoked in a test script. The [Postman sandbox](https://learning.postman.com/docs/writing-scripts/script-references/postman-sandbox-api-reference/) provides access to other JavaScript functions and libraries that can be used in pre-request or test scripts. Furthermore, external CDN libraries can be imported using a function like `pm.sendRequest()` among [other ways of using external libraries](https://community.postman.com/t/adding-external-libraries-to-postman/1971/6).

**APIs**
We stored our data using a mock server hosted on Postman cloud, accessing the data with a call to our mock API. This allows us to quickly edit the data and “deploy” our updates by saving our changes to Postman. If we find a third-party service we like, or create our own custom API, we can swap out the API to call. In fact, we can call as many APIs as we wish, synthesize the data and perform calculations to create our own custom services.

**Markup**
We visualized an HTML template string that can be styled with CSS. You can also use Handlebars templating language to generate HTML. If you don’t feel like writing your own Markup, search for [other visualizations](https://go.postman.co/search?q=visualizer&scope=all&type=all) created by other members of the Postman community. And once again, external CDN libraries can be imported, this time using script tags within the template string.

## Extend this to production-level applications
We did it! It is possible to develop, deploy, and host a complete Jamstack application in Postman. But this was a simplified example. At some point, you may choose to swap out your mock data with a third-party service or your own API hosted on serverless architecture. Or you may decide not to visualize the HTML in Postman, but in a web browser instead. There are a bunch of tools, technologies, and workflows to support your Jamstack applications.

The Jamstack architecture lets you get creative with your implementation. JavaScript and APIs allow you to pull data dynamically with interactivity limited only by your imagination. And the thriving API economy means your options for this dynamic behavior are growing fast.