Hi @violet crescent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Different base url based on "modes" for build
pastel lintelBOT
Astro uses Vite’s built-in support for environment variables, and lets you use any of its methods to work with them. You can use these environment variables to set different base URLs for different environments like development, staging, and production.
Astro includes a few environment variables out-of-the-box, one of which is import.meta.env.MODE. This variable is set to development when running astro dev and production when running astro build source (https://docs.astro.build/en/guides/environment-variables/).
To handle a staging environment, you can create a .env.staging file and set your BASE_URL there. Then, when building for staging, you can use the --mode flag to specify the staging mode. Here's an example:
.env.staging
BASE_URL=<https://placeholder-site.com/staging/current-site-name>
Then, when building for staging, you can use:
astro build --mode staging
This will load the .env.staging file and set the BASE_URL accordingly.
In your Astro configuration file, you can then use import.meta.env.BASE_URL to access the base URL that your site is being served from. This is determined by the base config option source (https://docs.astro.build/en/guides/environment-variables/).
Please note that .env files are not loaded inside configuration files. You can use process.env in a configuration file to access other environment variables, like those set by the CLI source (https://docs.astro.build/en/guides/configuring-astro/).
Also, remember that while all environment variables are available in server-side code, only environment variables prefixed with PUBLIC_ are available in client-side code for security purposes source (https://docs.astro.build/en/guides/environment-variables/).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
violet crescent
@pastel lintel Is it possible to change the base url in astro.config based on the mode I want to build for. FOr example, for staging, my base needs to be /staging/test.. Production build can be the default /
pastel lintelBOT
Let me check the knowledge base for you. One moment! :books:
Yes, it is possible to change the base URL in the Astro configuration file based on the mode you want to build for. You can use environment variables to achieve this.
Astro uses Vite’s built-in support for environment variables. You can create a .env file for each environment (like .env.staging, .env.production) and set your BASE_URL there. Then, when building, you can use the --mode flag to specify the environment.
Here's an example:
.env.staging
BASE_URL=/staging/test
.env.production
BASE_URL=/
Then, in your Astro configuration file, you can use process.env.BASE_URL to access the base URL that your site is being served from. This is determined by the base config option.
astro.config.mjs
export default {
site: '<https://example.com',>
base: process.env.BASE_URL || '/',
// other configurations...
};
Then, when building for staging, you can use:
astro build --mode staging
And for production:
astro build --mode production
This will load the appropriate .env file and set the BASE_URL accordingly.
Please note that .env files are not loaded inside configuration files. You can use process.env in a configuration file to access other environment variables, like those set by the CLI source (https://docs.astro.build/en/guides/configuring-astro/).