integration.md

Integrating with Colorway

Once we've created our unique manifest for our Application, we can work on integration!

Installing

Within your application, add Colorway as a devDependency in your package.json. You can do this by running the command:

npm install @helpscout/colorway --save-dev

Creating scripts

In your package.json, add a dedicated npm script to run Colorway. It my look something like this:

{
  "scripts": {
    ...
    "colorway": "colorway --manifest=hsds-react",
    ...
  }
}

In the above example, we've created a colorway npm script. This can be executed by running this command:

npm run colorway

The --manifest=hsds-react tells Colorway to use the hsds-react manifest to generate the file.

Building with Colorway

Add the new colorway script to run before your build scripts. It is recommended that you also do this for your start or development/dev scripts.

{
  "scripts": {
    ...
    "colorway": "colorway --manifest=hsds-react",
    "prebuild": "npm run colorway",
    "build": "...",
    "prestart": "npm run colorway",
    "start": "...",
    ...
  }
}

Using the Colorway generated files

It is up to your Application to import and use the contents generated by Colorway. Typically, this is only required to be set up once. After the initial set up, the process of updating and maintaining the color values should automatically come from the build scripts.

Next

Next, let's look into how we can handle updating with Colorway.