Gatsby multi website deployments

Splitting up the build process

export const onPostBuild = (): void => {
try {
// Copy public folder content to build
copyFolderRecursiveSync(publicDir, buildDir)
} catch (error) {
console.error('Error during build replication hook', error)
}
}

Main slugs

const mainSiteSlugs = getMainSiteSlugsFromArgs()

const buildMainSlugSite = slug => {
const buildWebsite = spawn('node', ['build-subwebsite.js', slug])

buildWebsite.stdout.on('data', data => {
console.log(`OUT [${slug}]: ${data}`)
})

buildWebsite.stderr.on('data', data => {
console.error(`ERROR [${slug}]: ${data}`)
})

buildWebsite.on('close', code => {
console.log(`Main site [${slug}] build process finished with code ${code}`)
if (mainSiteSlugs.length) {
buildMainSlugSite(mainSiteSlugs.shift())
}
})
}

buildMainSlugSite(mainSiteSlugs.shift())
  • We don’t want to go over the ram our hardware has available. For this project we also had no budget to horizontal scale up the hardware.
  • If we did do it asynchronously and also deploy asynchronously it would add the extra complexity of which main slugs are already deployed. If we have an overview page of the the main slugs, we would need to know which slugs are currently available.

Sub slugs

const R = require('ramda)
const COUNTRY_BATCH_AMOUNT = 20

const buildSubsite = countriesLeftover => {
const currentCountryBatch = countriesLeftover.slice(
0,
COUNTRY_BATCH_AMOUNT
)
const leftoverCountriesForNextBuild = R.difference(
countriesLeftover,
currentCountryBatch
)

const buildWebsite = spawn('npm', [
'run',
'build',
mainSiteSlug,
JSON.stringify(currentCountryBatch)
])

buildWebsite.stdout.on('data', data => {
console.log(`${data}`)
})

buildWebsite.stderr.on('data', data => {
console.error(`${data}`)
})

buildWebsite.on('close', code => {
console.log(`Sub site build process finished with code ${code}`)
if (leftoverCountriesForNextBuild.length) {
buildSubsite(leftoverCountriesForNextBuild)
}
})
}

buildSubsite(allCountriesToBuild)

The process

  1. Get all main slugs from the data package
  2. For each main slug
  • Start main slug build process
  • Batch the sub slugs and start the Gatsby build process
  • Upload build output for the main slug and all it’s sub slugs to the CDN

Conclusion

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

It is one of the other popular methods of incorporating machine learning in apps, mostly when you…

Node JS Event loop Craziness you may not know!

React Bootstrap Tutorial: upgrade React apps with a CSS framework

JavaScript Recursion and Memoization for Dummies

Insights: Converting Angular Applications into a PWA

Test for value, not vanity. The testing “pyramid” is dead.

UI and UX in Cordova

How to Build an Ionic Angular Capacitor App with a QR Code Scanner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sacha Reinert

Sacha Reinert

More from Medium

Docusaurus authentication with Firebase

How to install Strapi v4 with MySQL 8 (part 2)

Payload is now completely free and open source

Quickstart: Sign in users and get an access token in a Node web app using the auth code flow