Quickstart

Here’s a quick guide to help you create a sample multilingual website 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:

Create and Configure a Stack
Generate Management Token
Import Content Types and Content
Create Delivery Token
Build and Configure the Website
Add Language
Deploy the Website

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 stack API key as you will need these in Step 3.
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 as you will need it to import content into your stack in the next step.
Import Content Types and Content
For quick setup, we have created a sample code bundle that contains the required website code, content types, content (entries and assets), languages, and environments that you need to get the website up and running.
You can directly import the content 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. Now go to our GitHub repository and download the code bundle needed for this guide. It will include the content folders to import in your stack and the sample website code.
4. After downloading the code bundle from GitHub, extract it and within the data folder navigate to contents folder and note down its path to use in the next step.
5. 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.
Create Delivery token
A delivery token lets you fetch the published content of an environment. After running the import command two environments i.e. development and production will be imported in your stack. Create a delivery token for the development environment that we will use in the next step.
Later, while deploying your site, you can create tokens for other environments.
Build and Configure the Website
In this step let's build and configure the website.
Go to the website code we downloaded from our GitHub repository and 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:
Note: To run the gatsby develop command, you should install Gatsby CLI by using the npm install -g gatsby-cli command.
```
npm install
gatsby develop
```
Tip: If for some reason the gatsby develop command doesn't work, you can use the npm run develop command after npm install.
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 your environment. You should be able to see the changes on the website at localhost.
Also, you can switch between English and Spanish languages to view their corresponding content.

Add language

When you run the website locally, you’ll see the “languages” dropdown (at the header) that lets you switch between languages.

To add any other language to this website, let’s say “French,” you’ll need to make the following changes:

Go to the stack where you have imported the content.
Add French to your stack, create localized copies of your entries in French (locale code: fr) that contains the French-equivalent/translated content, and publish them on the development/production environments.
To create code files for fetching content localized in “French,” go to the website code and create the following files within the pages folder.
1. blogs.fr.js
2. index.fr.js
  Note: For this tutorial, we are adding the “French” language whose code is “fr.” If you are adding some other language, ensure to name the additional files in this format: blogs.{locale_code}.js and index.{locale_code}.js

Add the following code to the blog.fr.js file to fetch blogs localized in the French language:

/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/prop-types */
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { graphql } from 'gatsby';
import '../style/css/style.css';
import BlogsContent from '../components/blogsContent';

const SecondPage = (props) => {
  const { data, location } = props;
  return (
    //specify the language code in "lang"
    <BlogsContent location={location} data={data} lang="fr" /> 
  );
};

export default SecondPage;

export const pageQuery = graphql`
  {
    allContentstackFooter {
      nodes {
        title
        copyright
        social {
          title
          social_links {
            fontawesome_class
            link {
              title
              href
            }
          }
        }
        publish_details {
          locale
        }
        group {
          address
          title
        }
      }
    }
    allContentstackHeader {
      nodes {
        title
        menu {
          link {
            title
            href
          }
        }
        publish_details {
          locale
        }
      }
    }
    allContentstackBlogPosts {
      nodes {
        title
        url
        hero_banner {
          banner_title
          banner_image {
            url
            filename
          }
        }
        blog_body {
          rich_text_editor {
            rich_text
          }
        }
        created_at(formatString: "")
        author {
          title
        }
        publish_details {
          locale
        }
      }
    }
  }
`;

Add the following code to the index.fr.js file to fetch the landing page’s content localized in the French language:

/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/prop-types */
/* eslint-disable react/no-array-index-key */
/* eslint-disable react/no-danger */
import React from 'react';
import { graphql } from 'gatsby';
import IndexContent from '../components/indexContent';

const IndexPage = ({ data, location }) => (
 //specify the language code in "lang"
  <IndexContent location={location} data={data} lang="fr" />
);
export const pageQuery = graphql`
  {
    allContentstackHome {
      nodes {
        title
        url
        seo {
          meta_title
        }
        banner {
          filename
          url
        }
        group {
          title
          description
        }
        publish_details {
          locale
        }
      }
    }
    allContentstackFooter {
      nodes {
        title
        copyright
        social {
          title
          social_links {
            fontawesome_class
            link {
              title
              href
            }
          }
        }
        group {
          address
          title
        }
        publish_details {
          locale
        }
      }
    }
    allContentstackHeader {
      nodes {
        title
        menu {
          link {
            title
            href
          }
        }
        publish_details {
          locale
        }
      }
    }
  }
`;

export default IndexPage;

Add the language choice to the dropdown element by going to the src > components > header.js file, as shown below:
Save all the files and run gatsby develop in your terminal to view the updated code’s output.

Deploy the Website
You can deploy this Gatsby website on production either using Gatsby Cloud or Vercel platforms.
Note: The ‘Deploy’ button below hosts the default code, which contains the code for only the English and Spanish content.
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 specifically for the Europe region, set the URL as 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

Automation Hub

Go Composable

Forrester: The Total Economic Impact™ of Contentstack Headless CMS Platform

Composable vs. monolithic: Which is right for you?

Freeletics

Elastic

Bringing together

Understanding and Resolving CORS Error

Webhook

ASICS chooses Contentstack to modernize and accelerate global online experience ...

Contentstack launches new marketplace to accelerate composable digital ...

Sample Apps

Build a Java Web Application Using GraphQL API and Spring Boot

Gatsby Starter Website

Gatsby Sample App

Gatsby Multilingual Website

Next.js Starter Website

Next.js SSG Starter Website

Universal Next.js Website

React.js Starter Website

React.js Marketing App

Angular Starter Website

Angular E-commerce App

Static Marketing Website

Build an Android TV app using Contentstack’s Android SDK

Vue.js Starter Website

Nuxt.js Starter Website

Universal Vue.js Website - Nuxt.js

Ecommerce Website

Stencil.js Starter Website

ASP.NET Blazor Starter Website

Sveltekit Starter Website

Metalsmith Website

iOS News App

Augmented Reality (AR) App

Android News App

React Native News App

Ruby Ecommerce Product Catalog

PHP Blog Demo

Sample Liquid Template App using Contentstack .NET SDK

E-commerce Website Using Contentstack DataSync

commercetools E-commerce Website

TypeScript News App

Flutter News App

Python News App

Android E-commerce App

Flutter E-commerce App

E-commerce App using Contentstack's Swift SDK

Product Catalog App Using Ruby on Rails, GraphQL Client, and Contentstack GraphQL APIs

Web Application Using Contentstack Java SDK and Spring Boot

Product Catalog App Using GraphQL Client and .Net

Product Catalog Website Using ASP.Net Razor Pages and Contentstack .Net SDK