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

View on Github

Setup steps

  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-dev-middleware -D
  7. npx sb init
  8. 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

  1. npm install @storybook/storybook-deployer -D (NOTA: el proyecto se debe agregar a un repositorio de github)
  2. Agregar en el package.json:
"scripts": {
  //...
  "deploy-storybook": "storybook-to-ghpages"
}
  1. Publicar en GitHubPages ejecutando:
npm run deploy-storybook

NOTA: primero de debe ejecutar: build-storybook y luego: deploy-storybook