How to access configuration values in Astro components

UPDATE 23 Jan 2023: I just found out this does not work any more in latest Astro (had an older version..). Not sure why, some rollup error I can’t find on Google and don’t have the time to figure out. So now I just write in a config.mjs file instead, and load that instead of astro.config.mjs.

I had the need to have a global flag on my site, and when that flag was true I wanted to display something. If false, I wanted that information to be hidden, on multiple page components.

So, a single flag to change how the site looked.

Here’s what I did.

I put that flag in astro.config.mjs

export default /** @type {import('astro').AstroUserConfig} */ ({
  renderers: ['@astrojs/renderer-react'],
  devOptions: {
    tailwindConfig: './tailwind.config.cjs',
  },
  signupsOpen: false,
})

Note the last entry signupsOpen. That’s the one I added.

Then I referenced that value in every component I wanted to use it.

Something like this:

---
import Config from '../../astro.config.mjs'
---

<div>
  {Config.signupsOpen && <p>flag is true</p>}
</div>