Project Configuration
Each project needs a configuration file that sits 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',
},
generateOnly: true,
};
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 the job of 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',
},
generateOnly: true,
};
Don't forget to include the configuration file in your
tsconfig.jsonLast modified 6mo ago