Use single Gatsby app to deploy localized sites across domains.

[scnroy]

As I understand it, the i18n pattern that I’ve seen for Gatsby allows you to toggle between different locales on the same path via the app’s internal routing system:

• domain.com/site/es
• domain.com/site/en

I'm trying to figure out how to, at build, churn out a whole site per locale so that we can deploy each at its own country-specific domain:

• domain.com/site
• domain.es/site
• domain.fr/site

The imagined output is similar to #2189 (multiple public folders—public_en-US public_en-UK ...), instead, there's a single src folder that would be locale-aware and query for data accordingly during each build. Could this be accomplished with a plugin or would this be an enhancement?

This project has been a godsend, thanks to everyone for all the work ❤️

[m-allanson]

@scnroy this sounds similar to #5270 and #2335, is there anything in those issues that helps?

[scnroy]

#5270 could help, since we'd likely be able to use the same JS bundle for each locale, but i'm not sure if it gets to the i18n piece.

After thinking about it more, it seems as though #4050 may get me going in the right direction, where we pass in a locale and use it as an argument in a graphql query.

[kitos]

I am still interested in this.
My team is currently working on migration of our app from nextjs to gatsby (some pages were already moved). We have several markets on different domains: tourlane.de, tourlane.com, ... and we have to host them as a separate applications in netlify, which is not ideal, since we have to manage 5 apps now.

What I would prefer to do is to build pages for all markets within a single app.

I tried to archive this by appending /${market}/ prefix to pages urls and then cut it off using netlify rewrites:

• build
  /en/africa
/de/afrika
  ...
• rewrite
  tourlane.com/* /en/:splat 200
tourlane.de/* /de/:splat 200

And this works fine on netlify side, but for gatsby /afrika is still /de/afrika, so it changes url on the client. Probably there are some other difficulties (I didn't investigated properly).

I wonder if somebody else has similar issue and found the solution (other than using separate applications 😃 ). Since using domains instead of subfolders is pretty popular approach.

[scnroy]

For what it's worth, we never found a good solution here. Our workaround has been a little node script that runsgatsby build once for each domain, then moves and renames the generated public folder into a final dist folder.
In some cases, we're running gatsby build 18 times in a row, which takes ~45 min.

[oowowaee]

Facing this issue right now - all the other pages within my app are fine (I am using the localized slugs for those pages, so the paths are different), but I am trying to rewrite domain1.com to domain2.com/spanish. Everything works fine on the netlify side, but unfortunately gatsby updates the url in the navbar to domain1.com/spanish.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[genert]

@kitos Did you manage to figure this out?

[iriepixel]

@scnroy Hi, did you find an answer to your issue? I have the same problem.

[moigonzalez]

Hey, I managed to have several domains (*.com, *.es, *.uk...) by disabling client side routing.

I followed this issue: #4337 and the redirect and was gone after adding this plugin: https://github.com/wardpeet/gatsby-plugin-static-site

Hope it helps!

[HashemKhalifa]

exports.onPreBootstrap = ({ store }) => {
  const { program } = store.getState()
  const filePath = path.join(program.directory, '.cache', 'production-app.js')

  const code = fs.readFileSync(filePath, {
    encoding: `utf-8`,
  })

  const newCode = code.replace(
    `const { pagePath, location: browserLoc } = window`,
    `const { pagePath } = window
    let { location: browserLoc } = window

    if (window.parent.location !== browserLoc) {
      browserLoc = {
        pathname: pagePath
      }
    }
  `
  )

  fs.writeFileSync(filePath, newCode, `utf-8`)
}

that also works for me without using a plugin.

[happimaker]

I am using Gatsby, Contentful for delivery APIs, and deployed on Netlify.
So I made several brands for its location e.g. Los Angeles, Irvine, Palm Desert, etc.
And the locations are own domains such as losangeles.mybrand.com, irvine.mybrand.com, etc.
Then how to run website refer to its location, get the current domain, and show entries of the current brand.