Storybook: Mantener la ruta del directorio estático en la construcción

Hmm, entonces este problema es de build-storybook eso es algo que necesito para ver cómo funciona.

¿Podrías probar el middleware personalizado ?, no estoy seguro de que funcione, pero podría funcionar.
https://github.com/storybooks/react-storybook/pull/435#issuecomment -264813688
https://github.com/storybooks/react-storybook/blob/master/src/server/middleware.js#L35

: +1: Este es un problema, no para la creación de un libro de cuentos, sino solo para el desarrollo.

Así es como lo hice funcionar con middleware:

const express = require('express');
const path = require('path');
const paths = require("../config/paths");

const expressMiddleWare = (router) => {
    console.log(path.join(__dirname), paths.appPublic);
    router.use('/public', express.static(paths.appPublic))
};

module.exports = expressMiddleWare;

Intentaré conseguir un PR para esto, pero no estoy seguro de tener tiempo en el cajero automático.

¡Gracias por compartir tu solución! ❤️

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 60 días. ¡Gracias!

¡Hola, soy yo de nuevo! Voy a cerrar esta edición para ayudar a nuestros mantenedores a centrarse en la hoja de ruta de desarrollo actual. Si el problema mencionado sigue siendo motivo de preocupación, abra un nuevo ticket y mencione el anterior. ¡Saludos y gracias por usar Storybook!

¡Hola! @ndelangen @hansthinhle @patrickgordon

Estoy enfrentando exactamente el mismo problema. ¿Se resolvió esto alguna vez?

¡Gracias!

hola @aviramga : mi solución, que

Todavía podría hacer eso ahora que mi memoria ha sido mejorada :)

Hola @patrickgordon. Lamentablemente, mi problema es solo con build-storybook: /

Lo estoy usando con una herramienta llamada Percy para encontrar problemas de interfaz de usuario en mi aplicación.

¿Conseguiste encontrar una solución para la construcción?

Parece que puede solucionar esto utilizando enlaces simbólicos:

Agregue un directorio con un nombre arbitrario (por ejemplo, static-link , y coloque allí un archivo llamado public (sin ninguna extensión) con el siguiente contenido:

../public

Entonces debería poder lograr lo que necesita con -s static-link

@Hypnosphi ¡ gracias por el consejo! Sin embargo, esto no parece funcionar.
¿Puede explicar cómo funciona?

Todos mis archivos estáticos están en un directorio llamado "estático" (no público).
Intenté formas que no funcionaron:

1. Crear un directorio arbitrario con un archivo llamado "estático" y ../static en él - error de compilación en mayúsculas cuando ejecuté build-storybook
2. Igual que el anterior, pero con un archivo llamado "público", todavía no veo ninguna imagen

¿Algún consejo?

Gracias

¿Qué sistema operativo estás usando?
https://en.wikipedia.org/wiki/Symbolic_link#Overview

Cual fue el error?

Mac alta sierra

@Hypnosphi, pero solo para asegurarme de que lo entiendo correctamente, para ajustar su ejemplo a mi caso de uso, necesito volver a crear un nuevo directorio, por ejemplo, enlace estático, coloque un archivo llamado estático y escriba ../static

¿Correcto?

OK parece que mi instrucción para crear un enlace simbólico fue incorrecta. La forma correcta es esta:

mkdir static-link
ln -s static static-link/static

Creará un "archivo" en el directorio de enlace estático que se puede compartir en git (aunque no funcionará en Windows)

@Hypnosphi Lo

No, debe ser persistente

@Hypnosphi no, todavía no funciona. Mientras construyo, obtengo un registro que dice:
cp: no existe tal archivo o directorio: static-link / static

Seguí tus instrucciones anteriores. Entonces tengo un directorio vacío llamado static-link con un enlace simbólico de static a static-link / static

¿Qué estoy haciendo mal?

Realmente aprecio que se haya tomado el tiempo para ayudar :)

Y usas la opción -s static-link , ¿verdad?

@Hypnosphi, ¿ te refieres a build-storybook -c .storybook -s static-link ?

si

hago

Lo siento, escribí mal:

ln -s ../static static-link/static

@Hipnosphi
¿por qué ../static?

¿Estoy en lo cierto de que el directorio de enlaces estáticos está vacío?
¿Quizás quieras intentar pasar a una conversación privada y publicar aquí nuestros resultados finales? Siento que estamos muy cerca y es solo una falta de comunicación :)

Es la ruta relativa desde la ubicación del enlace hasta el destino del enlace.

@Hypnosphi Pude hacer que funcione usando una ruta absoluta ... pero necesito hacer que funcione con una ruta relativa ya que

@Hypnosphi encontró una solución. Muchas gracias por toda tu ayuda, ¡eres un salvavidas!

¿Algún consejo para resolver eso?

Sí, simplemente ejecute la solución sugerida anteriormente. Trabajar con un enlace simbólico
ln -s /<absolute-path-your-static-directory> storybook-static-symlink/static

@aviramga, ¿este método sigue funcionando para ti? No tengo suerte con el uso de un enlace simbólico.

Mi estructura de carpetas

|- docs
  |- folders-with-images
|- sandbox (holds my storybook files)
|- src
  |- README.md with image paths `/docs/folder/image.png`

Puedo hacer que esto funcione cuando sirvo el libro start-storybook -c sandbox -s sandbox,docs -p 6006 cuentos

const express = require('express');
const path = require('path');

module.exports = router => {
  router.use('/docs', express.static(path.join(__dirname, '..', 'docs')));
}

Pero agregar un enlace simbólico usando ln -s /docs sandbox/docs y ejecutando build-storybook -c sandbox -s sandbox,docs -o storybook todavía no funciona.

Las carpetas en docs se copian pero como la ruta del archivo que necesito es /docs/folder/image.png las imágenes 404.

También logré usar un enlace estático para resolver esto:

package.json:

"scripts": {
  "storybook": "(mkdir ./src/static-link || true) && (ln -s ../static ./src/static-link/static || true) && start-storybook -p 6006 -s ./src/static-link"
}

Aconsejaría no crear el enlace simbólico a través del script package.json por razones de compatibilidad, en caso de que no todos los desarrolladores utilicen el mismo sistema operativo.

Como alternativa, sugiero usar el copy-webpack-plugin en el archivo .storybook / webpack.config.js , así:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = config => {
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'static-foo'),
        to: '.'
      },
      {
        from: path.resolve(__dirname, '../static-bar'),
        to: './bar'
      }
    ])
  );

  return config;
}

Esto, por ejemplo, montaría el contenido del directorio .storybook/static-foo en http://localhost:6006/ y el contenido de static-bar en http://localhost:6006/bar/ .

También tenga en cuenta el uso de push para agregar a la matriz plugins para evitar sobrescribir otros complementos, lo que podría romper la configuración de Storybook Webpack.

Para referencia futura, los enlaces simbólicos están perfectamente bien de usar. Si desea / necesita usarlos con rutas relativas, simplemente use el modificador -r así: ln -rs dir1 dir2

Personalmente, creo que si Storybook considera adecuado copiar un directorio estático completo, esto debería indicarse claramente en la documentación. De lo contrario, este comportamiento debe cambiarse por uno que cree los enlaces simbólicos apropiados. ¡Me enteré de lo de copiar porque estaba bloqueando mi servidor debido al uso excesivo de espacio en disco!

Entonces, básicamente, no hay una solución oficial incorporada y todas las "soluciones" son simplemente trucos de mierda aleatorios :)

Aconsejaría no crear el enlace simbólico a través del script package.json por razones de compatibilidad, en caso de que no todos los desarrolladores utilicen el mismo sistema operativo.

Como alternativa, sugiero usar el copy-webpack-plugin en el archivo .storybook / webpack.config.js , así:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = config => {
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'static-foo'),
        to: '.'
      },
      {
        from: path.resolve(__dirname, '../static-bar'),
        to: './bar'
      }
    ])
  );

  return config;
}

Esto, por ejemplo, montaría el contenido del directorio .storybook/static-foo en http://localhost:6006/ y el contenido de static-bar en http://localhost:6006/bar/ .

También tenga en cuenta el uso de push para agregar a la matriz plugins para evitar sobrescribir otros complementos, lo que podría romper la configuración de Storybook Webpack.

esto no funciona;)

esta es una configuración de trabajo:

.storybook / webpack.config.js
(asumiendo que la carpeta estática está en la carpeta raíz del proyecto)

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {

  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../../static'),
        to: './static'
      }
    ])
  );

  return config;
}

@mtrabelsi no me funciona por algunas razones ...

Además, supongo que tiene un tipo ya que su carpeta .storybook encuentra en un nivel de profundidad desde root , no el doble de profundidad. Entonces, necesitas cambiar a:
from - from: path.resolve(__dirname, '../../static')
to - from: path.resolve(__dirname, '../static')

"copy-webpack-plugin": "^ 5.0.4"
Todos los caminos son correctos. Doblemente verificado.

Actualizar
Lo descubrí con la respuesta superior de @BradMcGonigle al crear el archivo middleware.js dentro de mi carpeta .storybook/ :

const express = require('express');
const path = require('path');

module.exports = router => {
  router.use('/docs', express.static(path.join(__dirname, '..', 'docs')));
}

@BiosBoy para evitar confusiones aquí rápidamente una idea sobre la estructura de mi proyecto (solo lo que necesita saber):

My_sweet_projet_ROOT_DIR / components / .storybook / webpack.config.js
My_sweet_projet_ROOT_DIR / static

También uso next.js como la aplicación principal donde consume componentes de reacción de la carpeta de componentes.

Aquí mi configuración (podrías reproducirla de tu lado - confío en ti: D)

My_sweet_projet_ROOT_DIR / package.json

{
  "name": "sweet_like_butter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.10.0"
  }
}

My_sweet_projet_ROOT_DIR / next.config.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Pude solucionar un problema similar usando una etiqueta base:

1. cree un archivo manager-head.html en su directorio .storybook. https://storybook.js.org/docs/configurations/add-custom-head-tags/
2. añadir

<head>
  <script>
    const hostname = window.location.hostname
    if (hostname !== "" && hostname !== "localhost") {
      const script = document.createElement('base')
      script.href = '/storybook-static/'
      document.getElementsByTagName('head')[0].appendChild(script)
    }
  </script>
</head>

(con script.href = a la ruta que desee)

los archivos en index.html ahora se recuperan con el prefijo especificado

¿No debería este comportamiento estar integrado en Storybook, donde si marca -s ./static , sus rutas funcionarán de la misma manera en Storybook que en producción? Parece absurdo que cuando le digo a Storybook que mi directorio estático es ./static , que mis rutas relativas, por ejemplo, ./static/image.png tienen que ser ./image.png o usar algún enlace simbólico tonto 🤔

@eckmLJE Si usa el fragmento de publiqué anteriormente, debería funcionar sin ninguna configuración adicional de paquete web o un enlace simbólico. Sin embargo, podríamos considerar generar esto automáticamente como parte del proceso de compilación.

Sigo enfrentando el problema en 2020 ...
Mi caso es muy simple: mi package.json tiene este script: "storybook": "start-storybook -s ./dist/img -p 8888"

Entonces, cuando ejecuto npm run storybook , muestra info => Loading static files from: /home/vagrant/projects/MySuperProject/web/themes/ofb/ofb_ui/dist/img .

pero cuando intento acceder a un archivo en el directorio dist/img desde el navegador con esta URL, no funciona: http://localhost:8888/myImage.png ...

Entonces, chicos, ¿es un error o estoy haciendo algo mal?

@ndelangen , ¿crees que podemos versión 6.0? Creo que sería una gran solución, pero rompedora.

Parece que la api de CopyWepbackPlugin ha cambiado y necesita agregar una clave pattern a la solución @mtrabelsi como esa:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {
  config.plugins.push(
    new CopyWebpackPlugin({
      pattern: [
        {
          from: path.resolve(__dirname, '../../static'),
          to: './static'
        }
      ]
    })
  );

  return config;
}

Agregaré mis dos centavos relacionados con este tema. Aunque creo que está estrechamente relacionado, mi solución difiere de @mtrabelsi en que descubrí que simplemente copiar mis activos en el directorio ./static que es el resultado del comando build-storybook no era suficiente. Específicamente si estoy implementando la aplicación estática en un servidor Tomcat que sirve la aplicación estática desde http://example.com/docs , donde docs es un directorio ubicado en Tomcat webapps / en el servidor.

Debido a la subruta, ninguno de los archivos fuera del directorio / css en el directorio / static se estaba cargando. Estoy usando rutas relativas para imágenes y fuentes (estos eran los activos estáticos que no se cargaban en la versión implementada). Entonces, solicitudes como https://example.com/img/path/to/my/image fallaron, cuando debería haber sido agregando / static, es decir. https://example.com/static/img/path/to/my/image Mis soluciones, como dije, están muy cerca de @mtrabelsi pero simplemente

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {

  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin({
      pattern: [
        {
          from: path.resolve(__dirname, './_assets'), // My static font and images are located in the .storybook dir
          to: './' // Drop both the fonts/ and img/ directory into the root of the build output.
        }
      ]
    })
  );

  return config;
}

Después de esto, las imágenes y las fuentes se cargaron correctamente.

@tmeasday sugiere: ¿por qué no podemos hacer de esto una opción main.js para que aparezca tanto en start-storybook como en build-storybook

@ vcastro45 He probado esto tanto para start-storybook como para build-storybook, y parece funcionar (probado en la rama next ).

¿Podrías crearme un repositorio de reproducción?

@shilman Es posible, pero tendríamos que levantar la configuración preestablecida desde
https://github.com/storybookjs/storybook/blob/9ea455a1746c489b7364448212663f2445af8a8b/lib/core/src/server/manager/manager-config.js#L101 -L102

a antes aquí:
https://github.com/storybookjs/storybook/blob/19c2420db80fcb3b89b34cdbbe03bf9010b0b3b2/lib/core/src/server/build-static.js#L190 -L191

Y luego pasarlo a todas las funciones inferiores en la cadena de compilación / desarrollo.
Es una gran refactorización, no es algo que pueda hacer en 1 día.

También sería otro momento en el que realmente querríamos migrarlo todo a TS. Ya que estaríamos tocando el 50% de los archivos de lib / core de todos modos.

@ndelangen OOF , no hagamos eso ahora entonces 🙈

Sí, lo haremos algún día

@ndelangen He documentado la solución por discusión con @tmeasday en # 11370. Proponga que muevamos esta configuración a main.js y agreguemos una opción para admitir este caso de uso en 6.x como una característica, no como un cambio importante.

¿Crees que se implementará una solución como start-storybook -p 6006 -s "./public:/static" para servir archivos estáticos desde ./public en la ruta /static ? Conduciría a usos extremadamente flexibles y se ajustaría a las convenciones de mapeo de rutas de Docker con las que muchos de nosotros ya estamos familiarizados.

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

@nfroidure ¡ es una idea interesante sin duda!

@ndelangen Puedo intentarlo con un PR si lo desea. ¿Alguna posibilidad de que se fusione?

@nfroidure sería factible:
Aquí es donde iría el código:
https://github.com/storybookjs/storybook/blob/9182d9f5ddbe136e9cd5fc9f11fa962a3cfe08f1/lib/core/src/server/build-dev.js#L77 -L93

Bueno, tengo algo aquí: https://github.com/storybookjs/storybook/pull/12222

Algunas pruebas fallan, pero no veo ningún vínculo entre esos fallos y mis cambios.

LMKWYT;)

¡Gracias por este PR @nfroidure !

¡Lo veré esta semana!

ZOMG !! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.6 que contiene PR # 12222 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Puede encontrar esta versión preliminar en la etiqueta @next NPM.

Cerrando este tema. Vuelva a abrir si cree que aún hay más por hacer.

¿Hay algún ejemplo de cómo utilizar esta nueva función?