Codux Help Center

Browse our articles to find the answers you need

Configuration for Customizing Projects

Configuration for Customizing Projects

Codux Configuration Reference

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. Ot

Customizing the Path for New Components and Component Templates

Codux needs to know where you'd like to save the components you create and their related files. If you started the project from one of the templates we offer in Codux, a path is already set for you. If not, you

Customizing the Path for New Boards

The boardsPath configuration key for codux.config.json lets you define the relative path for storing new board files in your project.boardsPath Description: Default directory for new boards, relative to the pro

Using classNames in Codux

The conditionalClassnamesConfig key specifies options for using the classNames utility library by JedWatson in Codux.conditionalClassnamesConfig Description: Options for using the classNames utility library, in

Component Scanning and Discovery

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.The scope for this search can be configure

Configuring Project Scripts for Users

Note: This article focuses on configuring scripts to run in Codux. For information on running scripts in Codux, refer here.Scripts run for a wide range of reasons, and are often necessary as part of a workflow.

Changing the Codux Server Port

As you may know, sometimes there can be conflicts or unexpected behavior can arise on a computer when more than one application or service is trying to use the same server port. For this reason, Codux uses a dy

Excluding Where Codux Looks for Components

The ignoredSubPaths key in Codux allows you to define an array of glob patterns representing paths that Codux should overlook during the project scanning process. This can be particularly useful if you wish to

Setting Environment Variables for Your Project

Environment variables play a crucial role in configuring and controlling the behavior of Node.js applications. These variables, such as tokens and flags, are accessible via the process.env object.To use the pro

Specifying the Default Styling Solution

The styling key lets you specify the main styling solution of the project. New stylesheets created by Codux will use the relevant file extension for the solution by default.How to add to codux.config.json If yo

Adding Rendering Support for Sass

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that enables the use of nested rules, variables, imports, etc.sassCompilation The sassCompilation key adds Sass support so that you can:Specify w

Customizing Code Format Settings

Codux uses default formatting settings for Typescript when presenting your code in the built-in code editor. For example, the Codux code editor converts tabs to spaces by default, and uses 4 spaces for the inde

Configuring Module Directories, Aliases, Fallbacks, and Conditions

The resolve configuration key provides options to locate your project's node module directories, create package and workspace aliases, a fallback mechanism for resolving packages, and custom conditions for pack

Configuring Git and Node.js Paths

You need to have Git and Node.js installed on your computer to work with Codux. When Codux loads, it attempts to locate your Git and Node.js installations by looking at your PATH environment variable. Because t

Configuring Maximum Rendered Elements

Components can sometimes render infinitely, either by intention, or by accident. Infinite rendering occurs when you have an Element A that calls an Element B, and then Element B calls Element A back, repeating

Configuring the Path to Tailwind Configuration

The tailwindcssConfig key lets you customize the path (and/or file name) for your tailwind.config.js file containing the configuration options for Tailwind CSS.By default, Codux expects to find your tailwind.co

Using CSS Modules in Projects

CSS modules are CSS files with class and animation names scoped locally. The cssCompilation key enables the use of these in your project, and configures the extensions that Codux should identify as CSS modules.

Loading SVG Assets

The svgLoader configuration key controls how SVG assets are loaded. There are three options: asset (default), svgr, and both. The asset option returns the asset's URL, the svgr option returns a React component,

File-Naming Convention for Component Creation

By default, Codux uses the kebab-case naming convention for the file names of new components, their paths, and board files. For example, if you create a component named HelloWorld, Codux creates hello-world.tsx

Globally Importing CSS and JS to Boards

The boardGlobalSetup key (a string) allows you to specify which modules should be evaluated before boards are rendered in your project. You can statically import CSS and JS files, or dynamically append links to

Configuring the Static Server Root Path

Important! if you're working on a specific package in a monorepo, you'll need to use this configuration to serve assets that are outside your package.The staticServerRoot configuration key for codux.config.json

Configuring Proxy Servers for Codux

The serverProxyMap key in Codux is responsible for managing the redirection of requests to proxy servers. This can be particularly useful when you need to create an instance of a proxy server for using API rout

Class and Variable Suggestions from Common Style Files

The styleFilesConfig configuration key for codux.config.json makes working with classes and variables in Codux easier. With this configuration set up, Codux will make suggestions from your common style files wh

Conditionally Rendering Children with Routes

The conditionalRenderers key in the codux.config.json file is used to list the components that render different parts of your application based on certain conditions. For instance, if you're using <Routes /> to

Creating Board Templates

Boards often require a rendering environment that serves as a context for components, providing the necessary wrappers for data providers, routers, and styles that are external to the component itself. This env

Consuming Your NPM Packages Through the Add Elements Panel

If you've created and published your own component library, you can easily configure Codux so that other project users can consume it visually through the Add Elements panel using the addPanel/assets key.addPan

Adding a Delay for Board Thumbnail Snapshots

In some cases, a board may need to fetch data/assets over the network or perform other asynchronous operations before it's ready to have a snapshot taken to be used as a thumbnail on a project's home screen. To