Multilingual website with Gatsby and Contentful - Part 3

#javascript #react #jamstack #gatsby

Final part, the deployment! 🚀

I'm going to use Netlify because I really appreciate the service, their UI and their features

Prerequisite

My previous tutorials works
Or, you have a Gatsby project who runs locally

🚨 Your project should be hosted on a version-control platform like Github, Gitlab or Bitbucket.

Few steps before going online

create an .env file at your project root repository
add your Contentful credentials and require the dotenv package at the top

CONTENTFUL_SPACE_ID=dbveb9zaujav
CONTENTFUL_ACCESS_TOKEN=StN-7u3ijFP5IoDwg9-fxP4HdbNiQwmVSRnrOO11IUY

replace your credentials in your gatsby-config.js

require("dotenv").config({
  path: `.env`,
})

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@louisbertin`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    {
      resolve: `gatsby-plugin-intl`,
      options: {
        // language JSON resource path
        path: `${__dirname}/src/intl`,
        // supported language
        languages: [`en`, `fr`],
        // language file path
        defaultLanguage: `en`,
        // option to redirect to `/en` when connecting `/`
        redirect: true,
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

If you have to deal with multiple environments, the dedicated topic on GatsbyJS website explains everything Environment Variables - GatsbyJS

Netlify setup

Create your account on Netlify
Then, log you in and click on "New site from Git"
Pick your repository with your prefered platform
Personally, I'm using Github. I have to click on "Configure Netlify on Github". After the redirection you have to choose if you prefer to give all access or restrict to a few repositories.
You can go back to Netlify and select your repository
Use the master branch, gatsby build command line and public/ folder at the configuration step
⚠️ Click on "Show advanced" and add your Contentful environment variables based on your .env values
If everything's good.. click on "Deploy site"! 🚀