3

I built a website using Gatsby, Contentful, and deployed on Netlify. I am going to run this website with multiple domain aliases.

ex: alias1.example.com alias2.example.com

In that case, the aliases work well and the website have to show contents that belong to the own alias in Contentful. For example, let's say the current alias is alias1, then the website have to fetch data only have alias1 entry from Contentful.

What I was trying is to add the codes to identify alias in gatsby-config.js using windows.location.href, and set siteUrl as dynamic, but it didn't work.

I am not sure it could be possible and how to implement it.

Thank you.

2

2 Answers 2

2

The best (and almost the only) approach to achieving this is to use an environment variables for each site/alias and configure the deploy command to trigger and use the variables for each site. In that way, each deploy will fetch the data from each Contentful environment.

In your gatsby-config.js (above the module exportation) add:

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

The next step is to create one environment file for each alias. In your project root:

  • .env.alias1
  • .env.alias2

Each file should contain your environment variables from Contentful:

CONTENTFUL_ACCESS_TOKEN:12345
CONTENTFUL_SPACE_ID:12345

Then, in your gatsby-config.js just replace your hardcoded variables for the ones in your environment files:

{
  resolve: `gatsby-source-contentful`,
  options: {
    spaceId: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
  },
},

The last step is to configure the deploy scripts to trigger each desired alias. In your package.json:

  "scripts": {
    "clean": "gatsby clean",
    "test": "jest",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
    "develop-alias1": "gatsby develop GATSBY_ACTIVE_ENV=alias1"
    "build-alias1": "gatsby build GATSBY_ACTIVE_ENV=alias1"
    "develop-alias2": "gatsby develop GATSBY_ACTIVE_ENV=alias2"
    "build-alias2": "gatsby build GATSBY_ACTIVE_ENV=alias2"
  },

Note that you will replace the default gatsby develop and gatsby build for your aliased commands.

By adding this bunch of configuration, for each develop or build/deploy you are telling your Gatsby project to which environment file should look at (it will take your .env.alias* instead). Each file will contain the keys for each environment in Contentful with different content in it, allowing you to deploy aliased sites with different content using a unique CMS.

3
  • Hi @Frerran. Thanks for your detailed answer. And what I want to build is to use only one Contentful space. I could fetch data from Contentful comparing entries with alias over graphQL queries. So just want to get only alias in gatsby-config.js file and could use it in the pages.
    – hotcakedev
    Sep 8, 2020 at 22:22
  • So is it possible to get domain before defining type of windows using windows.location.href?
    – hotcakedev
    Sep 9, 2020 at 0:45
  • You can if you use a environment variable to add manually the subdomain or if you fetch it via CMS/API request before the building process. At the moment you use a window object you can't because the project is built. Sep 9, 2020 at 6:08
1

This might be the most critical problem of Gatsby, and almost people has hard time with it.

The core problem is the "browser environment" is not available when you "build" Gatsby project. And gatsby-config.js is used for NodeJS environment. In other words, everything sticked with window variable is not accessible.

You should read the offical docs about gatsby build process here: https://www.gatsbyjs.com/docs/overview-of-the-gatsby-build-process/#build-time-vs-runtime.

Solution: you can define different "scripts" in package.json for each alias which you can provide environment variables for NodeJS environment. Then in gatsby-config.js, use dotenv package to read passed variables.

You can read more here about using environment variables: https://www.gatsbyjs.com/docs/environment-variables/#reach-skip-nav

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.