Programming with Jon
What is the JAMStack
March 7th, 2020
![[object Object]](http://images.ctfassets.net/zsg9nc1plobz/2sd6R7GeNXQ5o0bWklfyji/ecac8bee792d0fa8bb6ebd5e72710898/jamstacklogo.png)
JAMStack
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 tutorial we are going to use basic HTML and JavaScript to build this simple website.
First File
cd source\repos
mkdir JAMStackSite
cd JAMStackSite
<!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>
cd <project folder>
npx serve
We now have a website that is running and is technically a JAMStack app. You can now deploy the app to...I'm kidding. This is just the start.
Adding Some Style
Let's add some styling. Create a file called style.css then put this code in. I chose this set of colors as they are based off of Gatsby which is what I use when building out personal websites. Feel free to change the colors if you would like.
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. To do this we will write the below line of code inside our html file.
<link ref="stylesheet" href="./style.css" />
Let's add some basic JavaScript to make this an official JAMStack app. We are going to use vanilla 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.
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 you don't see the content please rerun this command after pressing ctrl + c on your terminal:
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 can be used to create JAMStack apps. Gatsby just happens to be my favorite and the one I use. You can however use anything from Vanilla JavaScript, as demonstrated in this post to your favorite framework such as Angular, React or Vue.
Quick Side Note
This post has been influenced by Jason Lengstorf's Frontend Masters course "Introduction to the JAMStack" which can be found here. It is a great course and I highly recommend watching it if you are interested in learning more about the JAMStack or Gatsby as he uses Gatsby to create the main project in the course.
Closing arguments
I hope that you enjoyed this brief tutorial as much as I enjoyed writing it. I will continue to add more tutorials on using Gatsby and the JAMStack as I complete more and more project. Stay tuned.
Cheers.