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,

  • this is the entry file for the folder
  • it loads environment.ts and environment.local.ts in development mode
  • it would be replaced by environment.prod.ts in production mode

• environments/environment.ts

  • it's the default environment for development
  • it contains env variables to protect sensitive info like tokens and secrets

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

• environments/environment.prod.ts

  • it's the default environment for production
  • it contains env variables to protect sensitive info like tokens and secrets

• 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
  • you can replace the env variables in the file with the real values

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

• you can customize the whole environment object as you want

export const environment = {
  contentful: {
-   host: '//cdn.contentful.com',
-   accessToken: process.env.NX_CONTENTFUL_PROD_DELIVERY_ACCESS_TOKEN,
+   host: '//preview.contentful.com',
+   accessToken: '<preview_access_token>',
  },
};

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