1. npm init --y 2. npm install react 3. npm install @babel/core babel-loader -D 4. npm install -D styled-components 5. npm install @storybook/react @storybook/addon-knobs -D 6. npm install webpack webpack-cli html-webpack-plugin webpack-dev-server webpack
Setup steps
- npm init --y
- npm install react
- npm install @babel/core babel-loader -D
- npm install -D styled-components
- npm install @storybook/react @storybook/addon-knobs -D
- npm install webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware -D
- npx sb init
- Anadir en el packege-json
"scripts" :{
"storybook":"start-story-book -p 6006"
}
Publicar en npm
- Loguearse en npm: npm login ==> no es necesario si se esta registrado en npm
- Publicar: npm publish --access public ==> cada vez que se publique se debe cambiar la version en el package.json
- NOTA: si no se tiene usuario creado en npm, se creara automaticamente, y se debe verificar el usuario por correo para que se permita la publicacion del package en npm, y cada vez que se publique una nueva version se debe cambiar en el package.json
Usar StoryBook en GitHubPages para probar los componentes
- npm install @storybook/storybook-deployer -D (NOTA: el proyecto se debe agregar a un repositorio de github)
- Agregar en el package.json:
"scripts": {
//...
"deploy-storybook": "storybook-to-ghpages"
}
- Publicar en GitHubPages ejecutando:
npm run deploy-storybook
NOTA: primero de debe ejecutar: build-storybook y luego: deploy-storybook