Setting Environment Variables for Your Project

Environment variables are important settings that control how your Node.js app works. They're pairs of names and values that help your app function correctly. These variables often contain sensitive information, so they're usually kept separate from your main code for safety and easy changes (stored in files not synced with the git repo in most cases).
When you use Codux to preview your app, it needs these environment variables too. This ensures your preview has the same project styles and data, looking and functioning just like it will for users in the production app.
To make everything run smoothly in Codux, simply provide the same environment variables your app uses normally. This allows Codux to accurately display your project and work as expected.
Environment variables may include:
  • API keys and tokens
  • Database connection strings
  • Feature flags
  • Configuration settings
For Codux to work correctly with your project, you may need to set up environment variables in one of two ways:
  • Use a .env file in your project: This is the standard way to manage environment variables in Node.js applications. Codux can read this file to access the necessary variables.
  • Configure Codux-specific variables: In some cases, you might need to set up environment variables specifically for Codux integration. For example, when connecting a project to a Wix Headless site, this is where Codux saves the site's client ID.

previewConfiguration 

  • Description: Specifies environment variables to use globally across the project.
  • Type: Object {}
  • Properties: envFile (string), environmentVariables (Obj)

Property: envFile 

The envFile property points to a path where the environment file in the project is located. By default, we use a file called .env in Codux templates (and add it to .gitignore file so it isn't published to the repository), but it can be named anything. A sample environment file could look like this:
WIX_CLIENT_ID = 7c891560-6d8x-4yf9-b213-4461b58c4c91

Property: environmentVariables 

The environmentVariables property is an object containing key value pairs of variables accessed from process.env.

Example 

1
2
3
4
5
6
7
8
9
10

{  
  $schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
  ...
  "previewConfiguration": {
    "envFile": ".env",
    "environmentVariables": {
      "SOCIAL_TWITTERX": "someValue1",
      "SOCIAL_INSTAGRAM": "someValue2",
      "SOCIAL_LINKEDIN": "someValue3"
    }
Important!
If the same environment variable is defined in the project's .env file and in the environmentVariables configuration, the values from environmentVariables will take precedence.

Accessing Environment Variables 

You can access environment variables in your project using process.env. For example: const clientId = process.env.WIX_CLIENT_ID;
1
console.log(`Your Wix client ID is: ${clientId}`);
Note:
To consume global variables through the window object, use the global board setup field configuration described here.
Important!
Codux will always override any value that you might set for the NODE_ENV key, as this key is special, and Codux requires its value to always be set to development to render and edit components.
IN THIS ARTICLE
Previous article
Next article