Migrating to the New JSON Config File Format

We are introducing changes to the way that you save configuration settings. Instead of the legacy wcs.config.js file format, you’ll now use a JSON file – a standard format that is supported by many tools and libraries, making it easier to read, write, and work with.
If you have a configuration file in the project root (or package root in a monorepo) named wcs.config.js, you’ll need to convert it to the new file format with the name codux.config.json.

Migrating from wcs.config.js to codux.config.json 

It’s easy to migrate your old configuration to the new format. These are the steps involved:
  1. Change absolute paths to relative paths in your old configuration.
  2. Save the file as codux.config.json and remove the wcs.config.js file from the project root.
  3. Use workspace aliases in your configuration (an optional, but good practice anyway when you have aliases for each package in a monorepo).
  4. Restart Codux (if it’s currently open).

Change absolute paths to relative paths 

Open your wcs.config.js file and replace absolute paths with relative paths. You’ll also want to handle other aspects of the conversion from JS to JSON, including putting keys in double quotes, only using double quotes, removing comments, and removing unnecessary commas and semicolons.
For example, if your sassCompilation.includePaths key is configured like this…
1
2
3
4
5
6
// wcs.config.js
module.exports = {
  sassCompilation: {
    includePaths: [path.join(_dirname, "src/modules")],
  },
};
… change it to:
1
2
3
4
5
6
7
8
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "sassCompilation": {
        "includePaths": [
            "src/modules"
        ]
    }
}
Note:
The $schema line allows you to use JSON schema in your IDE. See here for more details.
Important!
We have a script that you can run to create the new codux.config.json file and copy over the settings from your existing JS configuration file (see below). You still need to change absolute paths to relative paths before using it.

Save the file and remove wcs.config.js 

Once you’ve finished making changes to the content of the configuration file, and it follows JSON syntax, save the file as codux.config.json and remove wcs.config.js from the project.

Use workspace aliases (optional) 

If you have an alias for each package in a monorepo, you should consider changing it to a workspace alias. For example, let’s say that you have aliases that look like this:
1
2
3
4
5
6
7
8
9
10
resolve: {
       alias: {
           'a/dist/*': 'a/src/*',
           'a/*': 'a/src/*',
           'b/dist/*': 'b/src/*',
           'b/*': 'b/src/*',
           'c/dist/*': 'c/src/*',
           'c/*': 'c/src/*',
       },
 },
You can use a workspace alias instead which would look like this:
1
2
3
4
5
6
resolve: {
       workspaceAlias: {
           './dist/*': './src/*',
           './*': './src/*',
       },
 },
Otherwise, you will be left with a high count of line items in the new JSON file.

Restart Codux 

Codux will need a restart if it was open while you changed config files around. Just close and reopen the app for new configuration changes to kick in.

Add the $schema line 

To see configuration documentation inline in your IDE and to benefit from autocompletion and other goodies, you’ll have to add a $schema line to your new configuration file that points to the schema definitions. Copy this line to the top of your configuration:
1
  "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
Once you’ve added it, you’ll be able to hover over existing keys to view descriptions and find links to the articles that describe them.
You’ll also have access to autocomplete, so when you start entering a new key that you found in the Codux configuration reference, you’ll see your IDE helping you complete the entry.

Optional: Run a script 

We prepared a script for you to run to create the new codux.config.json file in the root directory of your project and populate it with the settings from your existing JS configuration file.
Important!
Make sure that you changed absolute paths to relative paths first, as this script will not change them for you.
If you’d like to use it, create a new JS file in the root of your project and paste the following lines of code into it.
1
2
3
4
5
6
7
8
9
10
11
const fs = require('fs');
const path = require('path');
   
const OLD_CONFIG_PATH = path.join(__dirname, 'wcs.config.js');
const NEW_CONFIG_PATH = path.join(__dirname, 'codux.config.json');
   
if (fs.existsSync(OLD_CONFIG_PATH)) {
   const config = require(OLD_CONFIG_PATH);
   fs.writeFileSync(NEW_CONFIG_PATH, JSON.stringify(config, null, 2) + '\n');
   fs.unlinkSync(OLD_CONFIG_PATH);
}
Now save the file and run it. If you saved it as migration.js, for example, run the following command from project directory:
1
node migration.js
After it runs, your wcs.config.js file will be replaced with a codux.config.json file.
IN THIS ARTICLE