Codux Configuration Guide

Codux handles configuration through a file named codux.config.json in the root of the project folder. If you are starting your project using one of our boilerplates, this file will already be in the project. Otherwise, create an empty file named codux.config.json, and place it in the project's root directory (or package root if it's a monorepo).
Important!
While most configuration keys are optional, you do need to configure a path for new components in your project. Otherwise, users will not be able to create new components in Codux. To learn how to add this key to codux.config.json, refer here.

Configuration Schema 

When you're working on you project's configuration, you can make use of autocompletion and validation with the $schema property in your project's configuration file like this:
1
2
3
4
 {  
     "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
     …
 }
Then, while working in your IDE of choice, Codux can help you out.
Codux also takes the schema a step further by allowing you to see all configuration options and edit them visually. Just navigate to the Codux Config panel and choose this file.

Configuration Reference 

These are the available configuration options for Codux:
  • newComponent (REQUIRED): Configures the default paths for new component and template files.
  • addPanel: Enables scoped NPM package of your own libraries to be consumed through the Add Elements panel.
  • boardGlobalSetup: Specifies modules to evaluate before rendering any boards in your project.
  • boardsPath: Default directory for new boards, relative to the project root.
  • componentsDiscovery: Scopes component discovery in your project.
  • conditionalClassnamesConfig: Options for using the classNames utility library, including path to classNames module, and target export.
  • conditionalRenderers: String[] with names of components like <Routes />, used for conditional rendering based on URL or other logic.
  • cssCompilation: Enables CSS modules in your project.
  • disableProjectSharing: Disables sharing the project in the Codux Online Playground.
  • defaultImagesDir: Configures the default directory where the Codux Media Manager stores new assets.
  • fileNamingConvention: Configures file-naming convention for new component creation.
  • httpServerPort: Port of HTTP server to serve previews and the project itself.
  • ignoredSubPaths: Specifies project folders to exclude from component search.
  • maxThumbnailSnapshotDelay: Maximum time (in milliseconds) to postpone capturing a thumbnail for the board.
  • newBoard: Additional configuration for new boards (templates path).
  • previewConfiguration: Specifies environment variables to use globally across the project.
  • resolve: Provides ways to manage your NodeJS project's module directories, create aliases, set fallback mechanisms, and customize package exports.
  • safeRender: Configures maximum rendered elements (safe mode).
  • sassCompilation: Adds Sass support to compilations.
  • scripts: Configures scripts for project users to run from Codux or to run automatically through triggered actions.
  • serverProxyMap: Configures proxy servers for Codux to redirect requests to.
  • staticServerRoot: A path relative to the project root to serve static files from.
  • styleFilesConfig: Configuration related to style files.
  • styling: Default styling solution of the project.
  • svgLoader: Configures how SVG assets load in Codux.
  • tailwindcssConfig: Customizes the path for the Tailwind configuration file.
IN THIS ARTICLE
Next article