This architecture relies on environment variables to function correctly.
Those variables are provided differently depending on the environment.
An environment is “where” the application is running. It can be either “development” (localhost) or “production” (on cloud’s servers)
**The environment is defined by the NODE_ENV environment variable.
Tip**: by default, there are three modes: test,development and production, as explained in Vue modes
When working on your local computer, you automatically use NODE_ENV=developement.
The environment affects how the application is bundled, it is defined at build time. (webpack, hot-reloading, etc.)
e.g: When building the app using the
developmentenvironment, you have access to • Props / events validation, but you won’t when usingproduction.
A stage is “how” the application is running. It can be either “development” (localhost), “staging” or “production” (on cloud’s servers)
The stage is defined by the VUE_APP_STAGE **environment variable.
Tip**: You can use any stage name you like, just make sure to use a slug (no space, no special chars, no accents, etc.).
VUE_APP_STAGE=local (as defined in .env).npm run build:development) this architecture automatically uses VUE_APP_STAGE=stagingnpm run build) this architecture automatically uses VUE_APP_STAGE=productionThe stage changes the behaviour of the application, because we sometimes need the application to behave differently depending on the stage.
e.g: We don’t want to connect with API for development while on production