Skip to content

Configuration and Environment Setup

Proper configuration and environment setup are crucial for running your applications smoothly. This involves setting up the necessary configuration values and handling environment variables effectively.

Configuration File

The index.ts file, located in <root>/frontend/packages/config/, is responsible for storing various settings, routes, environment variables, and environment validation rules used in the application. It exports a config object that contains the following properties:

  • routes: Defines the routes in your application, including their paths and titles.
  • pathToRoute: Maps paths to their corresponding route keys.
  • auth: Holds authentication-related configurations, such as the reset password redirect URI and Google authentication settings.
  • env: Stores environment values, such as URLs, API keys, and other sensitive information.

Environment Variables

Environment variables are used to handle environment values. These variables are set based on the environment in which your application is running. The process.env object is used to access these variables.

To ensure the validity of the environment variables, the validateEnv function is provided. It uses the envSchema object from the zod library to validate the values in the config.env property.

Configuring env

Navigate to the corresponding directory for the env. Duplicate the .env.example file and create .env file. Add your environment variables accordingly in the .env file.

We have four different env files, each for :
Expo App
Terminal window
  cd frontend/apps/expo && cp .env.example .env
Next App
Terminal window
  cd frontend/apps/next && cp .env.example .env
ExpressJS Backend
Terminal window
  cd backend/express-js && cp .env.example .env
Supabase
Terminal window
  cd backend/supabase && cp .env.example .env

Handling Environment Variables

To handle environment variables in both Expo and NextJS environments, the index.ts file uses a combination of process.env.NEXT_*** and process.env.EXPO_*** variables. This allows you to set different values for each environment.

For example, the SITE_URL variable is set using the following logic:

SITE_URL:
        process.env.NEXT_PUBLIC_SITE_URL ??
        process.env.EXPO_PUBLIC_SITE_URL ??
        '',

This means that the SITE_URL value will be taken from process.env.NEXT_PUBLIC_SITE_URL if it exists. If not, it will fall back to process.env.EXPO_PUBLIC_SITE_URL. If neither is set, an empty string will be used as the default value.

By following this pattern, you can easily configure different values for each environment without modifying the code.

Remember to update the environment variables in your deployment environment to match the expected values in the index.ts file.

Verification and typing of environment variables

  • We use zod to verify the environment variables. You can refer to the zod documentation for more information on how to use it.
  • We have also provided a envSchema object in the index.ts file to define the expected environment variables and their types.
  • We have provided a validateEnv function in the index.ts file to validate the environment variables. It uses the envSchema object to validate the values in the config.env property.
  • We have also defined a type ConfigProps for the environment variables in the index.ts file.

Note

In case you don’t want to use supabase and its functions, you can remove the supabase related code from the index.ts file. Remove the supabase typing from the ConfigProps type, the envSchema and the config object in the index.ts file.

You can also remove any env and any config values that you don’t need. You can also add new env and config values if you need them.

For a detailed guide on setting up environment variables for different services, see the Environment Variables Configuration guide.