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).
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.
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
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.
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.
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:
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 firstname.lastname@example.org:you/your_repo_name.git
Then just commit your code and push code to origin.
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.
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.
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.