Storybook: Behalten Sie den Pfad für das statische Verzeichnis beim Erstellen bei

Hmm, bei diesem Problem geht es also um build-storybook Ich muss untersuchen, wie das funktioniert.

Sie könnten benutzerdefinierte Middleware ausprobieren? Ich bin nicht sicher, ob es funktionieren wird, aber es könnte sein.
https://github.com/storybooks/react-storybook/pull/435#issuecomment -264813688
https://github.com/storybooks/react-storybook/blob/master/src/server/middleware.js#L35

: +1: Dies ist ein Problem - nicht zum Erstellen eines Storybooks, sondern nur zum Verwenden für Entwickler.

So habe ich es mit Middleware zum Laufen gebracht:

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;

Ich werde versuchen, eine PR dafür zu bekommen, bin mir aber nicht sicher, ob ich die Zeit atm habe

Vielen Dank, dass Sie Ihre Lösung geteilt haben! ❤️

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 60 Tagen geschlossen. Vielen Dank!

Hey, ich bin es wieder! Ich werde dieses Problem schließen, um unseren Betreuern zu helfen, sich stattdessen auf die aktuelle Entwicklungs-Roadmap zu konzentrieren. Wenn das erwähnte Problem weiterhin ein Problem darstellt, öffnen Sie bitte ein neues Ticket und erwähnen Sie dieses alte. Prost und danke, dass du Storybook benutzt!

Hallo! @ndelangen @hansthinhle @patrickgordon

Ich stehe vor genau dem gleichen Problem. Wurde das jemals gelöst?

Vielen Dank!

hi @aviramga - meine Lösung, die ich ein paar gepostet habe, hat es für uns gelöst. Ich bin nie herumgekommen, um eine PR zu machen, um das Problem zu lösen.

Könnte das jetzt noch tun, da mein Gedächtnis aufgerüttelt wurde :)

Hallo @patrickgordon. Leider ist mein Problem nur mit Build-Storybook: /

Ich verwende es mit einem Tool namens Percy, um UI-Probleme in meiner App zu finden.

Haben Sie es geschafft, eine Lösung für den Build zu finden?

Sieht so aus, als könnten Sie dies mithilfe von Symlinks umgehen:

Fügen Sie ein Verzeichnis mit einem beliebigen Namen hinzu (z. B. static-link , und legen Sie dort eine Datei mit dem Namen public (ohne Erweiterung) mit folgendem Inhalt ab:

../public

Dann sollten Sie in der Lage sein, mit -s static-link zu erreichen, was Sie brauchen

@ Hypnosphi danke für den Tipp! Dies scheint jedoch nicht zu funktionieren.
Können Sie bitte erklären, wie es funktioniert?

Alle meine statischen Dateien befinden sich in einem Verzeichnis mit dem Namen "static" (nicht öffentlich).
Ich habe versucht, Wege zu finden, die nicht funktionierten:

1. Erstellen Sie ein beliebiges Verzeichnis mit einer Datei mit dem Namen "static" und ../static - Fallfehler beim Erstellen von build-storybook
2. Wie oben, jedoch mit einer Datei namens "public" - es werden immer noch keine Bilder angezeigt

Irgendein Rat?

Vielen Dank

Welches Betriebssystem verwenden Sie?
https://en.wikipedia.org/wiki/Symbolic_link#Overview

Was war der Fehler?

Mac High Sierra

@ Hypnosphi, aber nur um sicherzugehen, dass ich es richtig verstehe, um Ihr Beispiel an meinen Anwendungsfall anzupassen, muss ich ein neues Verzeichnis erstellen, z. B. einen statischen Link, in den eine Datei mit dem Namen static eingefügt und ../static geschrieben wird

Richtig?

OK, anscheinend war meine Anweisung zum Erstellen von Symlink falsch. Der richtige Weg ist folgender:

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

Es wird eine "Datei" im statischen Link-Verzeichnis erstellt, die in git freigegeben werden kann (es funktioniert jedoch nicht unter Windows).

@ Hypnosphi Ich werde es

Nein, es sollte hartnäckig sein

@ Hypnosphi
cp: keine solche Datei oder kein solches Verzeichnis: static-link / static

Ich habe Ihre obigen Anweisungen befolgt. Ich habe also ein leeres Verzeichnis namens static-link mit einem Symlink von static zu static-link / static

Was mache ich falsch?

Wirklich dankbar, dass Sie sich die Zeit genommen haben, um zu helfen :)

Und Sie verwenden die Option -s static-link , richtig?

@ Hypnosphi meinst du build-storybook -c .storybook -s static-link ?

Ja

ich mache

Entschuldigung, ich habe falsch geschrieben:

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

@ Hypnosphi
warum ../static?

Stimmt es, dass das Verzeichnis für statische Links leer ist?
Vielleicht möchten Sie versuchen, zu einem privaten Gespräch überzugehen und hier unsere endgültigen Ergebnisse zu veröffentlichen? Ich fühle mich wie wir sind sehr nah und es ist nur Missverständnisse :)

Dies ist der relative Pfad vom Verbindungsort zum Verbindungsziel

@ Hypnosphi Ich konnte es mit dem absoluten Pfad zum Laufen bringen, da ich dieselbe Logik in Semaphor implementieren möchte

@ Hypnosphi hat eine

Gibt es einen Tipp, um das zu lösen?

Ja, führen Sie einfach die oben vorgeschlagene Lösung aus. Arbeite mit einem Symlink
ln -s /<absolute-path-your-static-directory> storybook-static-symlink/static

@aviramga funktioniert diese Methode noch für Sie? Ich habe kein Glück mit einem Symlink.

Meine Ordnerstruktur

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

Ich kann dies zum Laufen bringen, wenn ich das Storybook start-storybook -c sandbox -s sandbox,docs -p 6006 mithilfe einer Middleware-Datei bereitstelle:

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

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

Das Hinzufügen eines Symlinks mit ln -s /docs sandbox/docs und das Ausführen von build-storybook -c sandbox -s sandbox,docs -o storybook funktioniert jedoch immer noch nicht.

Die Ordner in docs werden kopiert, aber da der Dateipfad, den ich benötige, /docs/folder/image.png die Bilder 404.

Es ist auch gelungen, einen statischen Link zu verwenden, um dies zu lösen:

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"
}

Ich würde aus Kompatibilitätsgründen davon abraten, den Symlink über das Skript package.json zu erstellen, falls nicht jeder Entwickler dasselbe Betriebssystem verwendet.

Als Alternative schlage ich vor, das copy-webpack-plugin in der Datei .storybook / webpack.config.js wie

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;
}

Dies würde zum Beispiel den Inhalt des Verzeichnisses .storybook/static-foo auf http://localhost:6006/ und den Inhalt von static-bar auf http://localhost:6006/bar/ montieren.

Beachten Sie auch die Verwendung von push zum Hinzufügen zum plugins -Array, um zu vermeiden, dass andere Plugins überschrieben werden, wodurch die Storybook Webpack-Konfiguration beschädigt werden könnte.

Zum späteren Nachschlagen sind Symlinks vollkommen in Ordnung. Wenn Sie sie mit relativen Pfaden verwenden möchten / müssen, verwenden Sie einfach den Schalter -r wie folgt: ln -rs dir1 dir2

Ich persönlich denke, wenn das Storybook es für angebracht hält, ein gesamtes statisches Verzeichnis zu kopieren , sollte dies in der Dokumentation klar angegeben werden. Andernfalls sollte dieses Verhalten für ein Verhalten ausgeschaltet werden, das stattdessen die entsprechenden Symlinks erstellt. Ich habe von dem Kopieren erfahren, weil es meinen Server durch übermäßige Speicherplatznutzung zum Absturz gebracht hat!

Im Grunde gibt es also keine offizielle integrierte Lösung und alle "Lösungen" sind nur zufällige beschissene Hacks :)

Ich würde aus Kompatibilitätsgründen davon abraten, den Symlink über das Skript package.json zu erstellen, falls nicht jeder Entwickler dasselbe Betriebssystem verwendet.

Als Alternative schlage ich vor, das copy-webpack-plugin in der Datei .storybook / webpack.config.js wie

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;
}

Dies würde zum Beispiel den Inhalt des Verzeichnisses .storybook/static-foo auf http://localhost:6006/ und den Inhalt von static-bar auf http://localhost:6006/bar/ montieren.

Beachten Sie auch die Verwendung von push zum Hinzufügen zum plugins -Array, um zu vermeiden, dass andere Plugins überschrieben werden, wodurch die Storybook Webpack-Konfiguration beschädigt werden könnte.

das funktioniert nicht;)

Dies ist eine funktionierende Konfiguration:

.storybook / webpack.config.js
(vorausgesetzt, der statische Ordner befindet sich im Stammordner des Projekts)

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 funktioniert aus bestimmten Gründen nicht für mich ...

Ich denke auch, dass Sie einen Typ haben, da Ihr Ordner .storybook auf der einen Ebene tief von root und nicht doppelt so tief. Sie müssen also wechseln zu:
from - from: path.resolve(__dirname, '../../static')
to - from: path.resolve(__dirname, '../static')

"copy-webpack-plugin": "^ 5.0.4"
Alle Wege sind richtig. Doppelt geprüft.

Aktualisieren
Ich habe es mit der @BradMcGonigle- Antwort oben herausgefunden, indem ich die middleware.js -Datei in meinem .storybook/ -Ordner erstellt habe:

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

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

@BiosBoy um Verwirrung hier schnell zu vermeiden eine Idee über meine Projektstruktur (nur was Sie wissen müssen):

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

Ich verwende next.js auch als Hauptanwendung, in der Reaktionskomponenten aus dem Komponentenordner verwendet werden.

Hier mein Setup (Sie könnten es auf Ihrer Seite reproduzieren - ich vertraue Ihnen: 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()

Ich konnte ein ähnliches Problem mithilfe eines Basis-Tags umgehen:

1. Erstellen Sie eine manager-head.html -Datei in Ihrem .storybook-Verzeichnis. https://storybook.js.org/docs/configurations/add-custom-head-tags/
2. hinzufügen

<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>

(mit script.href = zu welchem ​​gewünschten Pfad auch immer)

Dateien in index.html werden jetzt mit dem angegebenen Präfix abgerufen

Sollte dieses Verhalten nicht in Storybook integriert werden. Wenn Sie -s ./static markieren, funktionieren Ihre Pfade in Storybook genauso wie in der Produktion? Scheint unsinnig, dass, wenn ich Storybook sage, dass mein statisches Verzeichnis ./static ist, meine relativen Pfade, zB ./static/image.png , stattdessen ./image.png oder einen doofen Symlink verwenden müssen 🤔

@eckmLJE Wenn Sie das oben veröffentlichte Snippet verwenden, sollte dies ohne zusätzliche Webpack-Konfiguration oder Symlink funktionieren. Wir könnten jedoch versuchen, dies automatisch als Teil des Erstellungsprozesses auszugeben.

Ich stehe 2020 immer noch vor dem Problem ...
Mein Fall ist sehr einfach: Mein package.json hat dieses Skript: "storybook": "start-storybook -s ./dist/img -p 8888"

Wenn ich also npm run storybook ausführe, wird info => Loading static files from: /home/vagrant/projects/MySuperProject/web/themes/ofb/ofb_ui/dist/img . angezeigt

Wenn ich jedoch versuche, über den Browser mit dieser URL auf eine Datei im Verzeichnis dist/img zuzugreifen, funktioniert dies nicht: http://localhost:8888/myImage.png ...

Also Leute, ist es ein Fehler oder mache ich etwas falsch?

@ndelangen denkst du, wir können dies in 6.0 bahnbrechende Änderungen

Die API von CopyWepbackPlugin scheint sich geändert zu haben, und Sie müssen der @ mtrabelsi- Lösung wie pattern -Schlüssel hinzufügen :

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;
}

Ich werde meine zwei Cent im Zusammenhang mit diesem Problem hinzufügen. Obwohl ich denke, dass es eng verwandt ist, unterscheidet sich meine Lösung von @mtrabelsi darin, dass ich festgestellt habe, dass das einfache Kopieren meiner Assets in das Verzeichnis ./static, das das Ergebnis des Befehls build-storybook nicht ausreicht. Insbesondere, wenn ich die statische App auf einem Tomcat-Server bereitstelle, der die statische App ab http://example.com/docs bereitstellt, wobei docs ein Verzeichnis ist, das sich in den Tomcat-Webanwendungen / auf dem Server befindet.

Aufgrund des Unterpfads wurde keine der Dateien außerhalb des Verzeichnisses / css im Verzeichnis / static geladen. Ich benutze relative Pfade für Bilder und Schriften (das waren die statischen Vermögenswerte , die auf die bereitgestellte Version laden versagten). Anfragen wie https://example.com/img/path/to/my/image fehlgeschlagen, wenn es / static hätte hinzufügen sollen, dh. https://example.com/static/img/path/to/my/image Meine Lösungen sind, wie gesagt, sehr nahe an @mtrabelsi, aber ich

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;
}

Danach wurden die Bilder und Schriftarten entsprechend geladen.

@tmeasday schlägt vor: Warum können wir dies nicht zu einer main.js Option machen, so dass es sowohl in start-storybook als auch in build-storybook

@ vcastro45 Ich habe dies sowohl für das Start-Storybook als auch für das Build-Storybook getestet und es scheint zu funktionieren (getestet im Zweig next ).

Könnten Sie ein Reproduktions-Repo für mich erstellen?

@shilman Es ist möglich, aber wir abheben
https://github.com/storybookjs/storybook/blob/9ea455a1746c489b7364448212663f2445af8a8b/lib/core/src/server/manager/manager-config.js#L101 -L102

vorher hier:
https://github.com/storybookjs/storybook/blob/19c2420db80fcb3b89b34cdbbe03bf9010b0b3b2/lib/core/src/server/build-static.js#L190 -L191

Und geben Sie es dann an alle unteren Funktionen in der Build / Dev-Kette weiter.
Es ist ein ziemlicher Refaktor, den ich an einem Tag nicht machen kann.

Es wäre auch ein weiterer Moment, in dem wir wirklich alles auf TS migrieren möchten. Da würden wir sowieso 50% der lib / core-Dateien berühren.

@ndelangen OOF, lass uns das jetzt nicht machen dann 🙈

Ja, wir werden es eines Tages tun

@ndelangen Ich habe die Problemumgehung pro Diskussion mit main.js und eine Option hinzufügen, um diesen Anwendungsfall in 6.x als eine Funktion zu unterstützen, die keine grundlegende Änderung darstellt.

Denken Sie, dass eine Lösung wie start-storybook -p 6006 -s "./public:/static" implementiert werden kann, um statische Dateien von ./public auf dem Pfad /static bereitzustellen? Dies würde zu äußerst flexiblen Verwendungszwecken führen und den Konventionen des Dockers zur Pfadzuordnung entsprechen, mit denen viele von uns bereits vertraut sind.

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

@nfroidure das ist sicher eine interessante Idee!

@ndelangen Ich kann es mit einem PR versuchen, wenn Sie es wünschen. Gibt es eine Chance, dass es zusammengeführt wird?

@nfroidure wäre machbar:
Hier ist, wohin der Code gehen würde:
https://github.com/storybookjs/storybook/blob/9182d9f5ddbe136e9cd5fc9f11fa962a3cfe08f1/lib/core/src/server/build-dev.js#L77 -L93

Nun, ich habe hier etwas: https://github.com/storybookjs/storybook/pull/12222

Einige Tests schlagen fehl, aber ich kann keinen Zusammenhang zwischen diesen Fehlern und meinen Änderungen erkennen.

LMKWYT;)

Vielen Dank für diese PR @nfroidure !

Ich werde es mir diese Woche ansehen!

ZOMG !! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.6 veröffentlicht, das PR # 12222 enthält und auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Sie finden diese Vorabversion auf dem NPM-Tag @next .

Dieses Problem schließen. Bitte öffnen Sie erneut, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

Gibt es ein Beispiel für die Verwendung dieser neuen Funktion?