Get started with Gatsby and Contentstack

Quickstart

Here’s a quick guide to help you create a sample web page using Contentstack and Gatsby

Prerequisites

• Contentstack account
• Node.js version 10 or above
• Install Gatsby CLI: npm install -g gatsby-cli

Here is an overview of the steps involved in creating our Gatsby app:

1. Create and Configure a Stack
2. Generate Management Token
3. Import Content Types and Content
4. Create Delivery Token
5. Build and Configure the Website
6. Deploy the Website

1. Create and Configure a Stack

   A stack holds all the data (entries and assets) that you would need to create a website. Log in to your Contentstack account, and create a new stack. Note down the master language and the stack API key as you will need these in Step 3.

2. Generate Management Token

   Management Tokens provide you with read-write access to your stack resources. Create a Management token as shown in the documentation. Note down the Management token and the stack API key. You will need these to import content into your stack in the next step

3. Import Content Types and Content

   For quick setup, we have already created a zip file that contains the required content types, content (entries and assets), languages, and environments that you need to get the website up and running.

   You can directly import these resources into your stack by using our command-line interface (CLI):

   1. Install the CLI:

      npm install -g @contentstack/cli

   2. Use the Add Token command to add the management token to this CLI session with an alias:

      csdx auth:tokens:add -a <alias_for_token> -k <API_key_of_stack> -t <value_of_management_token>

      For example:

      csdx auth:tokens:add -a mytoken -k blt1d********** -t cs57e**********

   3. Download the content zip file, extract it, and note down its path to use in the next step.

   4. In the Import content command, pass the management token along with the content location (noted in the above step) to import the content:

      csdx cm:import -a <management_token_alias> -d "<path_where_content_folder_is_stored>"

      For example:

      csdx cm:import -a mytoken -d "C:\Users\Name\Desktop\cli\content\contents"

   This will import all the assets, content types, entries, languages, and environments into your stack, and then automatically publish the imported entries and assets to all the environments.

4. Create Delivery token

   A delivery token lets you fetch the published content of an environment. You can create a delivery token for the “local” environment for testing that we will use in the next step. Later, while deploying your site, you can create tokens for other environments.

5. Build and Configure the Website

   Download the website code.

   Navigate to the root folder, create a configuration file named .env.development, and provide your credentials:

   CONTENTSTACK_API_KEY = {api_key_of_your_stack}
   CONTENTSTACK_DELIVERY_TOKEN = {delivery_token_of_the_environment}
   CONTENTSTACK_ENVIRONMENT = {environment_name}
   CONTENTSTACK_CDN =   // Compulsory param for EU users. Provide URL of CDN endpoint. For e.g. https://eu-cdn.contentstack.com/v3. Optional param for US users

   Note: To use the European region, set CONTENTSTACK_CDN=https://eu-cdn.contentstack.com/v3

   Fire up your terminal, point it to your project location, and run the following commands:

   npm install
   gatsby develop

   That’s it!
   You can now view the website at http://localhost:8000/. And you also have the stack that has all the content and resources for the website. Try experimenting by creating new entries and publishing on the “local” environment. You should be able to see the changes on the website at localhost.

6. Deploy the Website

   You can deploy this Gatsby website on production either using Gatsby Cloud or Vercel platforms.

   You need to deploy the updated code by performing the steps mentioned in the respective deployment platform’s guide:
   • Gatsby Cloud: Deploy using Gatsby Cloud guide
     
   • Vercel: Deploy using Vercel CLI guide

   Deploy to Gatsby Cloud

   Before you deploy your website to Gatsby Cloud, you need a Gatsby Cloud account.

   

   Note: If you are using the North America region, then on the Environment Variables window, remove the CONTENTSTACK_CDN variable.
   But, if you are using the Europe region, set the value of the CONTENTSTACK_CDN variable to https://eu-cdn.contentstack.com/v3

   Deploy to Vercel

   Similar to the above process, before you deploy your website to Vercel, you need a Vercel account.

   Note: During deployment, for the CONTENTSTACK_CDN variable, set the URL as follows: 
   For US region: https://cdn.contentstack.io/v3
   For EU region: https://eu-cdn.contentstack.com/v3

Points to Remember

• To avoid build errors, if you've created the .env.production file that contains the configuration for the “production” environment, make sure to also create the .env.development file with the configuration for the “development” environment.

• Before running the gatsby build command, ensure you've created both the .env.development and .env.production files.

More Resources

• Gatsby Documentation
• Android News App
• iOS News App