Storybook: Mempertahankan jalur untuk direktori statis dalam pembuatan

Hmm jadi masalah ini adalah tentang build-storybook itu adalah sesuatu yang perlu saya lihat cara kerjanya.

Anda dapat mencoba middleware khusus ?, saya tidak yakin ini akan berhasil, tetapi mungkin.
https://github.com/storybooks/react-storybook/pull/435#issuecomment -264813688
https://github.com/storybooks/react-storybook/blob/master/src/server/middleware.js#L35

: +1: Ini adalah masalah - bukan untuk membuat buku cerita tetapi hanya digunakan untuk pengembang.

Inilah cara saya membuatnya bekerja dengan 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;

Saya akan mencoba mendapatkan PR untuk ini tetapi tidak yakin apakah saya punya waktu atm

Terima kasih telah membagikan solusi Anda! ❤️

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi kirimkan permintaan bantuan jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 60 hari. Terima kasih!

Hai, ini aku lagi! Saya akan menutup masalah ini untuk membantu pengelola kami fokus pada peta jalan pengembangan saat ini. Jika masalah yang disebutkan masih menjadi perhatian, buka tiket baru dan sebutkan yang lama. Bersulang dan terima kasih telah menggunakan Buku Cerita!

Hai! @ndelangen @hansthinhle @patrickgordon

Saya menghadapi masalah yang sama persis. Apakah ini pernah terpecahkan?

Terima kasih!

hai @aviramga - solusi saya yang saya posting beberapa menyelesaikannya untuk kami. Saya tidak pernah sempat melakukan PR untuk menyelesaikannya.

Mungkin masih melakukan itu sebenarnya sekarang karena ingatan saya telah berlari :)

Hai @prickygordon. Sayangnya masalah saya hanya dengan build-storybook: /

Saya menggunakannya dengan alat bernama Percy untuk menemukan masalah ui di aplikasi saya.

Apakah Anda berhasil menemukan solusi untuk build tersebut?

Sepertinya Anda dapat mengatasinya dengan menggunakan symlink:

Tambahkan direktori dengan nama sembarang (misalnya static-link , dan letakkan di sana file bernama public (tanpa ekstensi apa pun) dengan konten berikut:

../public

Maka Anda harus dapat mencapai apa yang Anda butuhkan dengan -s static-link

@Hypnosphi terima kasih atas tipnya! ini sepertinya tidak berhasil.
Bisakah Anda menjelaskan cara kerjanya?

Semua file statis saya berada di bawah direktori bernama "statis" (bukan publik).
Saya mencoba cara yang tidak berhasil:

1. Buat direktori arbitrer dengan file bernama "statis" dan ../static di dalamnya - membuat kesalahan saat saya menjalankan build-storybook
2. Sama seperti di atas tetapi dengan file bernama "publik" - masih tidak melihat gambar apa pun

Ada saran?

Terima kasih

OS apa yang Anda gunakan?
https://en.wikipedia.org/wiki/Symbolic_link#Overview

Apa kesalahannya?

Mac high sierra

@Hypnosphi tetapi hanya untuk memastikan saya mengerti dengan benar, untuk menyesuaikan contoh Anda dengan kasus penggunaan saya, saya perlu membuat ulang direktori baru misalnya tautan-statis di dalamnya letakkan file bernama statis dan di dalamnya tulis ../static

Benar?

OK sepertinya instruksi saya untuk membuat symlink salah. Cara yang benar adalah ini:

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

Ini akan membuat "file" di direktori tautan-statis yang dapat dibagikan di git (meskipun tidak akan berfungsi di Windows)

@ Hypnosphi Saya akan mencobanya. tetapi apakah itu berarti saya harus menjalankannya setiap kali saya menjalankan build-storybook?

Tidak, itu harus gigih

@ Hypnosphi tidak, masih tidak berfungsi. Saat membangun, saya mendapatkan log yang mengatakan:
cp: tidak ada file atau direktori seperti itu: static-link / static

Saya mengikuti instruksi Anda di atas. Jadi saya memiliki direktori kosong bernama static-link dengan symlink dari static ke static-link / static

Apa yang saya lakukan salah?

Sangat menghargai Anda meluangkan waktu untuk membantu :)

Dan Anda menggunakan opsi -s static-link , bukan?

@ Hypnosphi yang Anda maksud membangun-buku cerita -c .storybook -s static-link ?

Iya

Saya lakukan

Maaf, saya salah mengetik:

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

@Bayu_joo
kenapa ../static?

Apakah saya benar bahwa direktori tautan-statis kosong?
Mungkin Anda ingin mencoba pindah ke percakapan pribadi dan menerbitkan di sini hasil akhir kami? Saya merasa kami sangat dekat dan itu hanya miskomunikasi :)

Ini adalah jalur relatif dari lokasi tautan ke target tautan

@Hypnosphi Saya dapat membuatnya bekerja dengan menggunakan jalur absolut ..... tetapi saya perlu membuatnya bekerja dengan jalur relatif karena saya ingin menerapkan logika yang sama di semaphore

@Hypnosphi menemukan solusi. Terima kasih banyak atas semua bantuan Anda, Anda adalah penyelamat !!

ada tip untuk mengatasinya?

Ya, jalankan saja solusi yang disarankan di atas. Bekerja dengan symlink
ln -s /<absolute-path-your-static-directory> storybook-static-symlink/static

@aviramga apakah metode ini masih berfungsi untuk Anda? Saya tidak beruntung menggunakan symlink.

Struktur folder saya

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

Saya bisa mendapatkan ini berfungsi saat menyajikan buku cerita start-storybook -c sandbox -s sandbox,docs -p 6006 menggunakan file middleware:

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

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

Tetapi menambahkan symlink menggunakan ln -s /docs sandbox/docs dan menjalankan build-storybook -c sandbox -s sandbox,docs -o storybook masih tidak berhasil.

Folder di docs disalin tetapi karena jalur file yang saya butuhkan adalah /docs/folder/image.png gambar 404.

Juga berhasil menggunakan tautan statis untuk menyelesaikan ini:

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

Saya akan menyarankan untuk tidak membuat symlink melalui skrip package.json karena alasan kompatibilitas, jika tidak setiap pengembang menggunakan OS yang sama.

Sebagai alternatif saya sarankan untuk menggunakan copy-webpack-plugin di file .storybook / webpack.config.js , seperti ini:

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

Ini misalnya akan me-mount isi direktori .storybook/static-foo ke http://localhost:6006/ dan isi dari static-bar menjadi http://localhost:6006/bar/ .

Perhatikan juga penggunaan push untuk ditambahkan ke array plugins untuk menghindari penimpaan plugin lain, yang dapat merusak konfigurasi Storybook Webpack Anda.

Untuk referensi di masa mendatang, symlink baik-baik saja untuk digunakan. Jika Anda ingin / perlu menggunakannya dengan jalur relatif, maka Anda cukup menggunakan sakelar -r seperti ini: ln -rs dir1 dir2

Saya pribadi berpikir bahwa jika buku cerita dirasa cocok untuk menyalin seluruh direktori statis, ini harus dinyatakan dengan jelas dalam dokumentasi. Jika tidak, perilaku ini harus diganti untuk perilaku yang membuat symlink yang sesuai. Saya mengetahui tentang hal penyalinan karena server saya mogok karena penggunaan ruang disk yang berlebihan!

Jadi pada dasarnya tidak ada solusi bawaan resmi dan semua "solusi" hanyalah peretasan acak yang sembarangan :)

Saya akan menyarankan untuk tidak membuat symlink melalui skrip package.json karena alasan kompatibilitas, jika tidak setiap pengembang menggunakan OS yang sama.

Sebagai alternatif saya sarankan untuk menggunakan copy-webpack-plugin di file .storybook / webpack.config.js , seperti ini:

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

Ini misalnya akan me-mount isi direktori .storybook/static-foo ke http://localhost:6006/ dan isi dari static-bar menjadi http://localhost:6006/bar/ .

Perhatikan juga penggunaan push untuk ditambahkan ke array plugins untuk menghindari penimpaan plugin lain, yang dapat merusak konfigurasi Storybook Webpack Anda.

ini tidak berhasil;)

ini adalah konfigurasi yang berfungsi:

.storybook / webpack.config.js
(dengan asumsi folder statis ada di folder root proyek)

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 tidak bekerja untuk saya karena beberapa alasan ...

Juga, saya kira Anda memiliki tipe karena folder .storybook berdiri di satu tingkat jauh dari root , bukan dua kali dalam. Jadi, Anda perlu beralih ke:
from - from: path.resolve(__dirname, '../../static')
to - from: path.resolve(__dirname, '../static')

"copy-webpack-plugin": "^ 5.0.4"
Semua jalan sudah benar. Dua kali diperiksa.

Memperbarui
Saya telah mengetahui jawaban @BradMcGonigle atas dengan membuat file middleware.js di dalam folder .storybook/ :

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

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

@BiosBoy untuk menghindari kebingungan di sini dengan cepat ide tentang struktur proyek saya (hanya yang perlu Anda ketahui):

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

Saya juga menggunakan next.js sebagai aplikasi utama di mana ia mengkonsumsi komponen reaksi dari folder komponen.

Di sini pengaturan saya (Anda dapat mereproduksinya di sisi Anda - Saya percaya Anda: 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()

Saya bisa mengatasi masalah serupa dengan menggunakan tag dasar:

1. buat file manager-head.html di direktori .storybook Anda. https://storybook.js.org/docs/configurations/add-custom-head-tags/
2. Menambahkan

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

(dengan script.href = ke jalur apa pun yang Anda inginkan)

file di index.html sekarang diambil dengan awalan yang ditentukan

Bukankah perilaku ini harus dimasukkan ke dalam Buku Cerita, di mana jika Anda menandai -s ./static maka jalur Anda akan bekerja dengan cara yang sama di Buku Cerita seperti yang akan mereka lakukan di produksi? Tampaknya tidak masuk akal bahwa ketika saya memberi tahu Storybook bahwa direktori statis saya adalah ./static , bahwa jalur relatif saya misalnya ./static/image.png harus menjadi ./image.png atau menggunakan beberapa symlink yang konyol 🤔

@eckmLJE Jika Anda menggunakan potongan yang saya posting di atas yang seharusnya berfungsi tanpa konfigurasi webpack tambahan atau symlink. Kami dapat melihat keluaran ini secara otomatis sebagai bagian dari proses pembangunan.

Saya masih menghadapi masalah di tahun 2020 ...
Kasus saya sangat sederhana: package.json memiliki skrip ini: "storybook": "start-storybook -s ./dist/img -p 8888"

Jadi ketika saya menjalankan npm run storybook , ini akan menampilkan info => Loading static files from: /home/vagrant/projects/MySuperProject/web/themes/ofb/ofb_ui/dist/img .

tetapi ketika saya mencoba mengakses file di direktori dist/img dari browser dengan URL ini, tidak berhasil: http://localhost:8888/myImage.png ...

Jadi teman-teman, apakah ini bug atau saya melakukan sesuatu yang salah?

@ndelangen, menurut Anda, apakah kami dapat memasukkan ini ke dalam 6.0 perubahan yang melanggar? Saya pikir itu akan menjadi perbaikan yang bagus, tetapi yang melanggar.

Sepertinya api CopyWepbackPlugin telah berubah dan Anda perlu menambahkan kunci pattern ke solusi @mtrabelsi seperti itu:

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

Saya akan menambahkan dua sen saya terkait dengan masalah ini. Meskipun saya pikir ini terkait erat, solusi saya berbeda dari @mtrabelsi karena saya menemukan bahwa hanya menyalin aset saya ke direktori ./static yang merupakan hasil dari perintah build-storybook tidak cukup. Khususnya jika saya menerapkan aplikasi statis ke server Tomcat yang melayani aplikasi statis dari http://example.com/docs , di mana dokumen adalah direktori yang terletak di webapps / di server Tomcat.

Karena subpath, tidak ada file di luar direktori / css di direktori / static yang dimuat. Saya menggunakan path relatif untuk gambar dan font (ini adalah aset statis yang gagal untuk memuat pada versi dikerahkan). Jadi permintaan seperti https://example.com/img/path/to/my/image gagal, padahal seharusnya ditambahkan / statis, yaitu. https://example.com/static/img/path/to/my/image Solusi saya, seperti yang saya katakan, sangat dekat dengan @mtrabelsi tetapi saya hanya menjatuhkan dua direktori jika font dan img ke root output:

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

Setelah ini, gambar dan font dimuat dengan benar.

@tmeasday menyarankan: mengapa kita tidak bisa menjadikan ini opsi main.js sehingga muncul di start-storybook dan build-storybook

@ vcastro45 Saya telah menguji ini untuk start-storybook & build-storybook, dan tampaknya berhasil (diuji pada next branch).

Bisakah Anda membuat repo reproduksi untuk saya?

@shilman Itu mungkin, tapi kita harus menaikkan pengaturan preset dari
https://github.com/storybookjs/storybook/blob/9ea455a1746c489b7364448212663f2445af8a8b/lib/core/src/server/manager/manager-config.js#L101 -L102

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

Dan kemudian teruskan ke semua fungsi yang lebih rendah dalam rantai build / dev.
Ini cukup refactor, bukan sesuatu yang bisa saya lakukan dalam 1 hari.

Ini juga akan menjadi momen lain kami benar-benar ingin memindahkan semuanya ke TS. Karena kami akan menyentuh 50% dari file lib / core.

@ndelangen OOF, jangan lakukan itu sekarang 🙈

Ya, kami akan melakukannya suatu hari nanti

@ndelangen Saya telah mendokumentasikan solusi tersebut per diskusi dengan @tmeasday di # 11370. Usulkan agar kita memindahkan konfigurasi ini ke main.js dan menambahkan opsi untuk mendukung kasus penggunaan ini di 6.x sebagai fitur bukan perubahan yang dapat mengganggu.

Apakah menurut Anda solusi seperti start-storybook -p 6006 -s "./public:/static" untuk melayani file statis dari ./public di jalur /static diimplementasikan? Ini akan mengarah pada penggunaan yang sangat fleksibel dan sesuai dengan konvensi pemetaan jalur Docker yang sudah banyak dari kita kenal.

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi kirimkan permintaan bantuan jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 30 hari. Terima kasih!

@nfroidure, itu adalah ide yang menarik!

@ndelangen Saya bisa mencobanya dengan PR jika Anda mau. Adakah kemungkinan itu akan digabungkan?

@nfroidure bisa dilakukan:
Di sinilah kode akan pergi:
https://github.com/storybookjs/storybook/blob/9182d9f5ddbe136e9cd5fc9f11fa962a3cfe08f1/lib/core/src/server/build-dev.js#L77 -L93

Saya punya sesuatu di sini: https://github.com/storybookjs/storybook/pull/12222

Beberapa pengujian gagal tetapi saya tidak dapat melihat hubungan apa pun antara kegagalan tersebut dan perubahan saya.

LMKWYT;)

Terima kasih untuk PR ini @nfroidure !

Saya akan melihatnya minggu ini!

ZOMG !! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.6 berisi PR # 12222 yang mereferensikan masalah ini. Tingkatkan versi hari ini untuk mencobanya!

Anda dapat menemukan prarilis ini di tag @next NPM.

Menutup masalah ini. Harap buka kembali jika menurut Anda masih banyak yang harus dilakukan.

Adakah contoh cara menggunakan fitur baru ini?