Default Project Exporters

When you have built or installed an exporter and run it successfully for the first time, it is likely you will want to do that again - for instance, any time new design system data is added. Supernova can define default project exporters that will run on demand and always output the resulting code to your selected folder.

The default project exporters can be configured through the VS Code extension and are shared with the rest of your team, as the configuration file is written to the root of the repository, similarly to how you would define the configuration for your CI or similar services.

Configuring the default project exporter

To configure the default project exporter, first, make sure you have at least one exporter available in your VS Code extension. Then, at the bottom-left of the Supernova panel, you will see the ability to configure the default exporter.

Tap on Configure Default Exporter and fill in the following information:

• Workspace: Workspace where your specific design system you want to use resides

• Design System: The design system you want the exporter to target

• Version: The design system version. If you use Shared Draft, you will always get the latest data

• Exporter: Exporter you want to use with this project

Lastly, you will be asked to provide the directory you want the code to be written to:

You are expected to provide a relative path starting from the root of the project. Some examples:

• /design-system/styles - Will move the export root to {projectRoot}/design-system/styles/

• /build - Will move the export root to {projectRoot}/build/

• [empty] - The export root will be the root of the current

When you have identified the folder you want to write to, confirm the last step. It is important that you provide all configuration information, otherwise, the configuration will not be used.

Note that the build folder doesn't mean all exported files will go into that folder as a flat structure - because exporters themselves can define a relative file structure.

In that case, the folder you provided is considered the export root and the exporter can write to it and to its subdirectories. The exporter will NEVER write outside of your targeted folder, for security reasons.

Running the default project exporter

Once you have configured the default exporter, the button that you used to invoke the configuration action will now say Synchronize current codebase.

You can now tap it every time you want to request new production-ready code - the exporter will download the current design system data and generate the code into the folder you have provided.

Default exporter running

Configuration file - supernova.json

When you configure the default exporter, you will find a new file in the root folder of your workspace called supernova.json. This file contains the machine and human-readable configuration of the default exporter which is picked up by the VS Code extension.

We strongly recommend committing this file to your source control, because everyone with the Supernova VS Code extension will then share the same project configuration, allowing every developer on the team to request data from the design system at any moment.

Never change supernova.json manually unless you know what you are doing - The IDs you need to configure in order to make the default exporter work well are not generally visible in the Supernova interface and the VS Code extension makes the configuration very easy.

Automating the process

We recommend that you always set the default exporter inside the VS Code extension for a specific project that consumes design system data. However, in some cases, you want to run the code export automatically when the design system data changes. This is where Supernova Design Continuous Delivery (DCD) comes into play.