Configure Environment

Env Variables

Just configure in your ~/.zshrc or ~/.bashrc:

# .zshrc

# HYPE env variables start
export NX_CONTENTFUL_PROD_DELIVERY_ACCESS_TOKEN=<delivery_access_token>
export NX_CONTENTFUL_PROD_PREVIEW_ACCESS_TOKEN=<preview_access_token>
# HYPE env variables end

Env Files

Since we're using nx to manage our repo, it provides an environments folder under each app, like lucas.

• environments/index.ts entry file, it loads environment.ts and environment.local.ts in development mode and will be replaced by environment.prod.ts in production mode
• environments/environment.ts default environment for development
• environments/environment.prod.ts default environment for production
• environments/environment.local.ts this is a special file that is not staged, you can create one in local by copying the content of environments/environment.ts

For sensitive information, we use env variables like NX_CONTENTFUL_PROD_DELIVERY_ACCESS_TOKEN in the file

export const environment = {
  production: false,
  contentful: {
    host: '//cdn.contentful.com',
    accessToken: process.env.NX_CONTENTFUL_PROD_DELIVERY_ACCESS_TOKEN,
    space: 'mbwqgs5je33j',
  },
};

Situations

Development

Production

We use the fileReplacement feature of nx to replace the env file with another in production env. E.g. you can find the configuration for lucas in workspace.json

Nextjs Export

Netlify Deployment