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 it’s a great way to go. The benefits of the JAMStack are: - reduced complexity - lower cost - faster shipping - increased autonomy

JAMStack apps allow frontend devs to use only a CDN which skips servers, databases, load bacners, 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 two devs, one for the frontend and the other for backend, to maintain the 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 can be used if using JavaScript. There are a few others that allow the use of other languages that aren’t JavaScript. Hugo is one that I recently discovered. It is built with Go and uses Go templates for creating the frontend. So if you are a Go developer than you will be able to use this static site generator. Another one is Jekyl which I haven’t used or looked too much into but I believe it’s a Ruby based SSG. In this post I will show how to use plain TypeScript to write a basic site. Let’s get started

Setup

cd Desktop
mkdir jamstack
cd jamstack
mkdir jamstackSite
cd jamstackSite
code .

The above commands change to the Desktop of your computer and create a jamstack folder for you to house all of your JAMStack projects. Then we create a new directory for our project called jamstackSite. Then we change into that directory and we open up our editor. You can of course change the command if say you are using atom it would be bash atom . instead. Next we can create our html file

<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>

npx serve

We now have a website that is running and is technically a JAMStac app. You can now deploy…I’m kidding. This is jut 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 would like to change the colors feel free. After all this is meant to be your JAMStack site.

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 can add the style.css to our index.html file by adding:

<link ref="stylesheet" href="./style.css" />

Let's add some create a TypeScript file that we can use to be a bit safer with our code. Remember though we have a script tag in our html already configured to take in our JavaScript file. We will name the TypeScript file the same name as our JavaScript file just with a .ts. This will compile and generate a JavaScript file that will be what we use.

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 you don’t quite have one created yet.

I know it isn't much of a site but you are now using an api to fetch GitHub repos that 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 ```

Static Site Generators

I want to give a brief section here on static site generators. Static Site Generators(SSG) are tools a developer can use to create sites that serve up static content. If you are on my site right now, I used a static site generator called Hugo to create this site. There are a few others. If you are curious here is a list with their sites so you can check them out: - Hugo - Gatsby - Next.js - Jekyl - Gridsome - Nuxt.js

There are probably some more of them but these are the ones that are talked about most these days.

Quick Side Note

For any of you that may have seen the Intro to JAMStack course on Frontend Masters taught by Jason Lengstorf, you will notice a lot of similarities in the code he writes in that course and this post. That is because I borrowed his first app to use as a means to introduce some of you that don’t have the subscription to FrontendMasters. I think the code here sums how quick you can get a JAMStack site up and running and gives a pretty decent look into the concept of not using a backend but still having data dynamically rendered to a page. If you have an opportunity to sign up for the subscription plan on Frontend Masters I highly recommend watching all of Jason Lengstorf’s material as he is a great instructor.

Programming with Jon

What is the JAMStack?