Codux makes it easy for designers to dive into React projects without knowing much code. But before they start, developers need to set a few things up. This helps keep the project organized, and ensures that everyone's on the same page. This guide will walk you through the main steps to set up a project in Codux so that designers can work on it independently.

Codux manages its configuration through a file named codux.config.json located at the root of your project directory. If you're starting your project with one of Codux's boilerplates, this file will already be present. If not, you'll need to create an empty file named codux.config.json and place it in the root directory of your project (or package root if it's of a certain monorepo type).

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.

The configuration file comes with a line that provides typing and completions: "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json". This line points to a JSON schema that provides autocompletion and validation for the configuration file, giving you help while configuring the file. If you're creating this configuration file, you'll want to add this line for the best experience.

For more information, refer to Codux Configuration Reference.

Codux requires the @wixc3/react-board helper package to be installed in your project's root directory to run your projects. Codux prompts users to install this package automatically when it doesn't exist, but if they're seeing an error related to it, you can manually install it using the npm or Yarn package managers.

For information on how the installation script appears to users, refer to Understanding Project Scripts.

When using a custom template, Codux generates new component files using the template's code. All the relevant elements, style sheets, and other related files copy over from the template to the new component.

To create a custom component template, you can use the codux.config.json newComponent key that specifies the directory where available templates for new components reside.

For information on configuring custom component templates, see here.

To set up a board in Codux, you can use the boardGlobalSetup key in the codux.config.json file. This key allows you to specify which modules should be evaluated before boards are rendered in your project so that boards automatically have styles, data, and other global logic. If you have code that should run on all pages of your app, consider using this configuration.

Check out Globally Importing CSS and JS to Boards for more information.

If you have common style classes in your design system, Codux will make suggestions from them in the Styles panel when you add or create a class. See here for configuration details.

Scripts run for a wide range of reasons, and are often necessary as part of a workflow. Codux makes it easy for all users to run scripts on demand, whenever needed, as well as for you to set scripts to auto-trigger based on a user's action. You can also create batch scripts to run a series of scripts in order.

Refer to Configuring Project Scripts for Users for information on the topic.

In Node.js applications, environment variables (like tokens, flags, etc.) are often used to configure the app and control its behavior.

For information on setting up environment variables, refer here. For handling environment variables inside Vite projects, see here.

The svgLoader key configures how Codux loads SVG assets.

If you have SVG assets to load, refer to this article.

Codux searches for components in all project files by default, but the search can be scoped to obtain more accurate results and decrease the application's loading time.

Information on this configuration key is located here.