Jamstack Web Dev

4.17.22

Those last three posts ended up being really code heavy. Those posts ended up essentially being an in-depth walkthrough on how start a fullstack web-app using Django/Python and React. I want to shift gears and go back to a higher level overview of a different stack I have been focusing on and am pretty excited about.

If you are into web development professionally or as a hobby it is likely that you have at least come across the term ‘jamstack’. Let’s define the acronym: J stands for JavaScript, the A stands for APIs and the M is Markup. Markup as in the same M that is in HTML; meaning human readable code for defining elements on a document. Jamstack web development comes with an entire ethos. Jamstack.org calls it a movement. The core principles of jamstack development are decoupling the frontend and backend and connecting them via an API, pre-rendered static first frontends, and enhancing them with JavaScript. If you follow these principles your app/website will have excellent performance, security, scalability and most importantly will be so cost effective that your app/site could potentially be free to run.

JavaScript and APIs… are you a jamstack dev without even fully realizing it? Probably, or at least close. It’s pretty hard to avoid that first letter in the acronym. JavaScript is modern web development so let’s start there. About a year ago I actually wrote a blog post on Next.js. I was just exploring it at that point and still getting comfortable with React and Node.js. Now, Next.js is my preferred React framework for web development. Next.js has become insanely popular and with good reason. It is a hybrid framework capable of static generation and server side rendering. A traditional React app is loaded and rendered on the client (browser) but Next.js allows for pages to be rendered by the server. Why does that matter? SEO. With traditional React apps and DOM manipulation it is difficult for web crawlers to read what is going on. Next.js comes out of the box with some of familiar web elements in its index.js entry point like head, main and footer. You don’t have to be a web expert to know that the head of a webpage is important for defining meta data which is SEO 101. This is probably why Next.js calls itself the production ready React framework. Next.js also has a ton of features that make it awesome like built in support for environment variables, testing with Jest and Cypress, TypeScript support, and automatic dynamic route building for pages and APIs.

If you are using Next.js and adhering to the jamstack ethos, you will probably need a headless CMS for your project. Check out this graph comparing satisfaction to usage among polled jamstack devs from last year.



WordPress having the number one spot for most used CMS is no shock but there are some other really cool options in the top 10. If we are going by satisfaction score, the top 2 are Sanity and Strapi. Tuning into the jamstack world, this wasn’t really a surprise either as both seem to be super popular right now. I dug into both to see what would be better for a project I have coming up.

Off the bat, I can see why Sanity has so much hype behind it. They make it super easy to launch a live project. You authorize your GitHub and Netlify accounts and you can have Sanity automatically bootstrap a project, create a git repository and then launch it live on Netlify with no more than a few clicks. Once that is set up, you clone into the repo and every time you push changes to the main branch the changes are live. The CMS is also obviously automatically set up and pushes updates to their template. It was pretty cool that they allow you to do launch a live backend for free. I will say, I tried a few of their templates and with almost certainty that there was no user error, some of the builds did fail. I am very comfortable with both GitHub and Netlify besides all the configuration was supposed to be automatic. Not a big deal, but it was a little bit of a turn off.

On to Strapi. Like Next.js, I actually touch on Strapi in a blog post from about 10 months ago when I was exploring headless CMS. I probably did one of their quickstart tutorials and moved on but this time I was looking at it with fresh eyes. Unlike Sanity, Strapi is more of a true Node.js backend. It almost reminded me of an Express.js backend. To create content types you actually must develop with Strapi locally. Strapi will not even allow admins to create content types on a live server. I definitely learned that the hard way… but now I’ll never forget. It comes out of the box with an SQLite database, which is very familiar to Django devs and just like Django you can configure it to use other databases such as PostgreSQL which is really cool. It also comes with an API server that is served on port 1337 by default. If you are an old school internet nerd, you know the developers of Strapi are too. For those who don’t know, 1337 is code for an elite hacker language. Another cool thing is that similar to Next.js, it will automatically create your API routes for you based on your content types. What that means is that whatever you create will be available via http://localhost:1337/api/ . Then you just call in your data from the frontend with your preferred fetch method, mine is axios, and the authentication bearer token that you generate from Strapi like this:

    const { data } = axios.get(API_URL, {
        headers: {
            'Authorization': `bearer ${API_TOKEN}`
        }
    })
    .then(function(response) {
        // get your data
    })
    .catch(function (error) {
        console.log("There's an API error")
    })

Let’s see what this actually looks like. On your local Node.js server at http://localhost:1337/admin/ you can create content types for your needs. I made one for a news section that would have title, a body and an image:



When creating any API, I like to test it using Postman before building the frontend:



So that is what the Strapi API actually looks like. If all is well at this point, you can render your data out to your frontend:





Now the content that I entered through the CMS admin panel is being dynamically rendered to the Next.js frontend via the API and is being stored in the SQLite database. This is technically now a fullstack app that a client would be able to update and make posts without touching the code. And best of all, a simple application like this can be hosted for free.

If you noticed the third logo on my little blog header graphic, you can probably guess that I want to talk about Tailwind CSS now. I won’t go too deep about Tailwind here, l could/should probably do an entire post about it. Tailwind is a CSS utility-first framework and it is awesome. With a little background in CSS concepts, you can make your elements look super modern using prebuilt but customizable inline CSS classes right into your JSX (or regular HTML). It is not entirely different than using a styled component library like Bootstrap but since they both use inline classes it is probably best to choose one or the other. Tailwind wins over styled component libraries for a few reasons. Not only is it much more immediately customizable but when compared to a library like Bootstrap specifically, Tailwind builds down to a much smaller size which will ultimately increase performance. The documentation is great, has a huge community around it, it feels intuitive, and honestly I think it looks cool. They even have some prebuilt component libraries but they are not free.

So that is a little about jamstack web dev. Obviously, you can use any of these tools alone or combined with other tech. If I ultimately decide to use Strapi or not I will for sure be using Next.js styled up with Tailwind a lot more from now on.