The JAMstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
The key aspects of a JAMstack application are the following:
- The entire app runs on a CDN (or ADN). CDN stands for Content Delivery Network and an ADN is an Application Delivery Network.
- Everything lives in Git.
- Automated builds run with a workflow when developers push the code.
- There’s Automatic deployment of the pre-built markup to the CDN/ADN.
- It’s practically Serverless. To put it more clearly, we do not maintain any server-side applications but rather make use of already existing services (like email, media, database, search, and so on).
And here’s a fun fact: 70% - 80% of the features that once required a custom back-end can now be done entirely on the front-end.
In this article, we will learn how to build a JAMstack application that has:
- an API service to serve media files,
- and a Static Site Generator(SSG) to create the pre-built markup.
And finally we’ll deploy it over a CDN.
So, what are we building today?
We will build an image gallery. I love movies, so I have decided to create an image gallery of my favorite actors. I have a fun name for it to: imaginary.
We will use a media management service called Cloudinary to host and manage our images. It also provides developer APIs to upload and fetch media such as images, videos, and so on
We will use a framework called Gatsby to build the front-end of the image gallery. Gatsby is a React-based open-source framework for creating websites and apps.
Finally, we will learn how to deploy the app to a CDN with an automatic build and deploy process. We will use Netlify CDN for this.
At the end of the article, our imaginary app will look like this:
Image Gallery app - Final Look
TL;DR
We will learn things with a step-by-step approach in this article. If you want to jump into the source code or demonstration sooner, here are links to them.
- You can access the image gallery demo from here: http://imaginary.netlify.app/
- All the source code used in this article is in my GitHub repo. Feel free to follow it, as I keep updating the source code frequently. If you liked the work, please support it with a star. https://github.com/atapas/imaginary/tree/1-freecodecamp-poc
Now let’s get started.
#gatsby #cloudinary #jamstack #api #javascript
