What is the JAMStack
Tags: javascript, gatsby, react
Published: 2020-03-07 23:40:01

# JAMStack
JAMStack stands for 
Javascript
APIs
Markup
The stack portion is basically just the tools that you use. The important takeaway is JAM. The JAMStack is an approach to web design that emphasizes shipping only static assets. It removes the hassle and headache that comes with setting up servers whether that be with node.js, Python, Ruby etc. As a frontend developer utilizing the JAMStack is definitely the way to go. The benefits of the JAMStack are:
reduced complexity
lower costs
faster shipping
increased autonomy

JAMStack apps allow us, as frontend devs, to use only a CDN which lets us skip servers, databases, load balancers, etc. CDNs are cheap - most often than not free. On top of that, the lowered complexity requires less time and effort spent on devops. Fewer moving parts make it easier to ship quickly and with more confidence. This is one of the first times where the proverbial saying "It works on my machine" most often than not means that the site is actually working. A simplified stack means a single developer is able to take projects from an idea all the way to deployment. Not saying you can't still have a team to work on the app but because you won't need a fullstack engineer or a frontend and backend developer in order to maintain the entire app. 

# Let's build a JAMStack App
So first things first we are going to need a few things installed. Although you don't need to write any backend code you will still need node and npm installed to download several tools that we are going to use. In this post we are going to use basic HTML and JavaScript to build this simple website. 

# First File
```bash
cd source\repos
mkdir JAMStackSite
cd JAMStackSite
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My First JAMStack Site</title>
</head>
<body>
  <main>
    <h1>Hello Dev.to Readers!</h1>
    <h2>Recently Updated Repos</h2>
    <div id="content">Loading...</div>
  </main> 
  <script type="module" src="./main.js"></script> 
</body>
</html>
```

```bash
cd <project folder>
npx serve
```
We now have a website that is running and is technically a JAMStack app. You can now deploy...I'm kidding. This is just the start. 

# Let's add some styling. Create a file called style.css then put this code in. I chose the colors that Gatsby uses. If you don't like the colors or you have a favorite color of your own that you would rather use then by all means modify the code below to match colors you like.
```css
html,
body {
   color: #555;
   font-family: sans-serif;
   font-size: 18px;
   margin: 0;
}

main {
   margin: 3rem auto;
   max-width: 90vw;
   width: 50ch;
}

h1 {
   color: #b17acc;
}

h2 {
    color: #639;
}
```
Now we need to add the link tag to the stylesheet.
```html
<link ref="stylesheet" href="./style.css" />
```
Let's add some basic JavaScript to make this an official JAMStack app. We are going to use basic JavaScript. Those of you that are familiar with Babel are going to be surprised that we don't have to use it in order to get our modern JavaScript to work. Let's check it out.
```js
const listRepos = async username => {
    const repos = await fetch(
      `https://api.github.com/users/${username}/repos?type=owner&sort=updated`
    )
      .then(res => res.json())
      .catch(error => console.error(error));
  
    const markup = repos
      .map(
        repo => `
          <li>
            <a href="${repo.html_url}">${repo.name}</a>
            (⭐️ ${repo.stargazers_count})
          </li>
        `
      )
      .join('');
  
    const content = document.getElementById('content');
  
    content.innerHTML = `<ul>${markup}</ul>`;
  };
  
  listRepos('RedHoodJT1988'); // insert your GitHub username here or use mine if 
                             // if you don't have one.
```
I know it isn't much of a site but you are now using an api to fetch github repos that have been updated recently and rendered them to a page. If for whatever reason when you refresh your browser if you don't see the content there please rerun this command:
```bash
npx serve
``` 

# What does Gatsby have to do with this post?
At the moment nothing. If enough people ask or seem interested in learning more on the JAMStack I will definitely do a series that will show how to build a pretty awesome eCommerce site using Gatsby and the JAMStack. Gatsby is by no means the only static site generator out there that is used or can be used with the JAMStack. You can use anything from Vanilla JavaScript, as demonstrated in this post to your favorite framework such as React or Angular. 
 

# Quick side note
I didn't necessarily steal this code or pirate it in any way. I did make changes and modify it from the Intro to JAMStack course on frontendmasters.com by Jason Lengstorf. I highly recommend checking the course out if you are able to afford the subscription. I know they have a free subscription if you are just starting out in JavaScript. This course however is not on it. I love frontendmasters and I hope they are not upset by this post. I will be more than happy to remove it if it upsets anyone on frontendmasters or with Mr. Lengstorf.

Hope you enjoyed the article and had as much fun writing and creating this basic site as I did.

Cheers.