Building your first JAMStack website with AWS Amplify, Gatsby Starter, and Contentful

You know the feeling of opening up your laptop, firing up a terminal window, and getting to work on an application? Well, times that by 10. Welcome to the world of JAMStack development! No servers, no deployments, just code. This tutorial takes you from zero to hero in building a modern website with Javascript APIs as AWS Amplify and Contentful built right in. We’ll use GatsbyJS as our React framework for blazing-fast page loads without any backend logic at all! Let’s get started!

What is the JAMStack and why should you care about it

JAMStack is standing by the developers at Netlify for “a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. JAM stands for JavaScript, API, and Markup.”

A typical website built using the JAMStack can be developed without a backend language like PHP or Ruby (or any other language). It’s simply a web app built with client-side JavaScript, API services, and a content management system (CMS).

As a developer, it will be easier to iterate your website if it’s built with JAMStack because you can deploy the changes without affecting the server (unless otherwise).

Why use AWS Amplify, Gatsby, and Contentful

Your content is stored as files and is generated using templates while your precious user data is stored in an API service like Contentful. There is no need for a database to store your data as the API service will handle it for you too.

If you want to build a website using JAMStack, this is the fastest way of getting started because there is no database involved, making dynamic responses extremely fast.

At some point, you might want to deploy it to a server and configure it to run in production mode. This is where AWS Amplify comes into play.

To achieve this, we will use GatsbyJS (Gatsby), the React-based static site generator that built back in 2016. It is now used by large companies like Telenor and Ubisoft.

To deploy a React app to AWS web servers, there are two options: the first is using Gatsby’s CLI, which will be introduced in this article; the second is to use Next.js with its deployment module.

Building a simple blog using AWS Amplify, Gatsby Starter, and Contentful

A simple blog build with JAMStack principles:

It’s a React app that uses GraphQL to retrieve the content from Contentful. The blog is built using Gatsby, so the source code looks like this:

The gatsby-source-contentful plugin covers two things: data retrieval and transformation of your objects into React components, by calling a GraphQL API.

This post will describe how to build the above-mentioned demo, using GraphQL to get the Contentful data injected into Gatsby’s static pages. You can find the source code on Github.

I’m assuming that you are already familiar with AWS Amplify, Gatsby, and Contentful

Otherwise, you can start here to get up to speed.

Setting up Contentful to use GraphQL API

Create an account on contentful.com and create a new space by clicking New Space.

Next, you’ll need to create an empty space in Contentful. Then you will get started with setting up contentful, you’ll have to add a new API project by clicking ”+ New API” in Settings -> API Keys menu.

This will take you to the API Projects dashboard, where you can create API projects for your space. In this place, you can input the project name, description and get your access token and Space ID for configuring Gatsby Starter Project later.

Creating a new project with Gatsby Starter

Gatsby is a powerful static site generator built with React.js and GraphQL. It’s open-source, actively developed by Gatsby, Inc. To create your first Gatsby Starter blog with Contentful, complete the below steps:

git clone https://github.com/contentful/starter-gatsby-blog.git
npm install

or use the Gatsby CLI

gatsby new contentful-starter-blog https://github.com/contentful/starter-gatsby-blog/

gatsby cli new command is used to create a gatsby project with gatsby-starter-blog.

Thus, this creates gatsby-config.js and gatsby-node.js files in the root of your directory from where you executed gatsby new command.

Set up the needed content model and create a configuration file for Contentful

This project comes with a Contentful setup command

npm run setup

This command will ask you for a space ID, and access tokens for the Contentful Management and Delivery API and then import the needed content model into the space you define and write a config file (./.contentful.json).

yarn run setup automates that for you but if you want to do it yourself rename .contentful.json.sample it to .contentful.json and add your configuration to this file.

You can test in a local environment by running the command:

 gatsby develop

Finally, you just need to add your project to a git repository and push it to your private GitHub repository. You can use normal git commands like eg git push origin master or if you are a cocky git user and want to do it via SSH just type in terminal

git remote add origin git@github.com:you/your_repo_name.git

Then just commit your code and push code to origin.

Setting up an AWS free tier account

Setting up your AWS infrastructure

First things first, you’ll have to create an account on aws.amazon.com. There are no upfront charges, so you can simply sign up for the free tier.

More information about the free tier can be found here.

Setting up the project with AWS Amplify

Login to your AWS account and navigate to the AWS Console website, select Services, and search for “Amplify”.

Select “AWS Amplify” and click on the Create a new AWS App button.

Deploying our app on AWS’s free tier Amplify

The final step is to deploy our app on AWS Amplify. Simply access the AWS Amplify Console and create a new app to host your web app.

After that, choose your existing source code from the github repository and click to continue. Just login to authorize to github account and choose repository.

Now, you can configure build settings by changing commands on the building and deploying process. In this case, Amplify will auto-detect our project as gatsby starter project. It will auto-configure and add some commands for us. We don’t need to change anything.

Don’t forget to add your environment variables for contentful space ID, access tokens for the Contentful Management. The environment variable name will be like CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN.

After configuring build settings, just click next to review and click to save and deploy.

And we are deploying our app on AWS’s free tier, which is a super good deal. Because I have verified that it works perfectly well and you can create an unlimited amount of public websites for free. AWS services usually charge users monthly or yearly fees when you use their free tier for the first time. You can check on your free tier service quota here.

After finishing the process you will see your hosted app running on the URL provided by AWS.

The URL will look like this:

https://dotxxx.amplifyapp.com if you click on the link, you can see the the blog page.

Now that we have deployed our first JAMstack website using AWS’s free service tier and Amplify it is important to know what are all those components behind the scene.

It’s easy to create a gatsby blog right? Just do it yourself. If you want to see how we did the whole thing, check out this tutorial on setting up your own AWS Amplify project with Gatsby and Contentful. We’ll walk you through creating a new project from scratch using Gatsby Starter, integrating Contentful into our API backend as well as connecting all of these services together in AWS Amplify. But don’t worry if that sounds too complicated - there are plenty of tutorials online (including ours) that make this process really simple! You can also try doing it yourself by following this guide here which will be updated every time we update any part.