Project Configuration

Each project needs a configuration file that lives inside the Git repo of the project.

To get started, you can use the init command to create an initial configuration which uses storybook by default, you can change the mode in the config file later:

npx lost-pixel init-js

This will create a new file lostpixel.config.js that looks the following way:

module.exports = {
  storybookShots: {
    storybookUrl: 'examples/storybook-build/storybook-static',
  },
  // OSS mode 
  generateOnly: true,
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

TypeScript

In case you prefer TypeScript (recommended), you will need to do a bit more but will benefit from a much better experience when it comes to configuring the project.

To initialize the configuration run this command:

npx lost-pixel init-ts

We will also need the lost-pixel NPM package to get access to the configuration types. Run this command to add it as a developer dependency:

npm i -D lost-pixel

Finally, we can take a look at the created configuration file lostpixel.config.ts. You can notice that it includes types already, which makes writing the configuration so much easier (IDE IntelliSense, type safety, ...).

import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
  storybookShots: {
    storybookUrl: 'examples/storybook-build/storybook-static',
  },
 // OSS mode 
  generateOnly: true,
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

Don't forget to include the configuration file in your tsconfig.json