====== Preact アプリを構築する ====== {{:javascript:deno:astro-logo-light-gradient.svg?240|Astro}} {{:javascript:preact_logo.svg?240|React}} 公式: [[https://docs.astro.build/ja/install-and-setup/|Astroのインストールとセットアップ | Docs]]\\ 　[[https://docs.astro.build/ja/guides/integrations-guide/preact/|@astrojs/preact | Docs]]\\ ===== インストール ===== 公式: [[https://docs.astro.build/ja/install-and-setup/|Astroのインストールとセットアップ | Docs]]\\ 参考: [[https://deno.com/blog/astro-on-deno|Build and Ship Astro Sites with Deno and Deno Deploy]] [[gtr>https://deno.com/blog/astro-on-deno|翻訳]]\\ [[git>denoland/deno-astro-template|🚀 Astro + 🦕 Deno Template]] でインストールする🤔\\

$ deno run -A npm:create-astro@latest -- --template denoland/deno-astro-template


 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./second-shepherd

   dir   Where should we create your new project?
         ./preact-haruo-world_astro
      ◼  tmpl Using minimal as project template

  deps   Install dependencies? (recommended)
         ● Yes  ○ No

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository? (optional)
         ○ Yes  ● No

  git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

 ██████  Project initializing...
         ■ Template copied
         ▶ Dependencies installing with deno...

      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./preact-haruo-world_astro 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

[[https://docs.astro.build/ja/guides/integrations-guide/preact/|@astrojs/preact | Docs]]\\ deno で Astro を最新に更新し、Preact などのフレームワークを追加する...🤔\\

$ cd preact-haruo-world_astro
$ deno add --allow-scripts npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact

Add npm:astro@5.6.1
Add npm:@deno/astro-adapter@0.3.0
Add npm:@astrojs/preact@4.0.8
Add npm:preact@10.26.5

''package.json'' の内容...🤔\\

$ bat -p --pager no package.json

{
  "name": "preact-haruo-world-astro",
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "dev": "deno run -A --unstable-kv npm:astro dev",
    "start": "deno run -A --unstable-kv npm:astro dev",
    "build": "astro build",
    "preview": "deno run -A ./dist/server/entry.mjs",
    "format": "deno fmt && prettier --write ."
  },
  "dependencies": {
    "@astrojs/preact": "^4.0.8",
    "@deno/astro-adapter": "^0.3.0",
    "astro": "^5.6.1",
    "preact": "^10.26.5"
  },
  "devDependencies": {
    "prettier": "^3.3.1",
    "prettier-plugin-astro": "^0.14.0"
  },
  "prettier": {
    "tabWidth": 2,
    "plugins": [
      "./node_modules/prettier-plugin-astro/dist/index.js"
    ],
    "overrides": [
      {
        "files": "*.astro",
        "options": {
          "parser": "astro"
        }
      }
    ]
  }
}

===== Deno ランタイム機能を使用する設定 ===== 公式: [[https://docs.deno.com/runtime/reference/cli/unstable_flags/#--unstable-kv|Unstable feature flags - Deno Documentation]]\\

$ nano package.json

{
  "name": "preact-haruo-world-astro",
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "dev": "deno run -A --unstable-kv npm:astro dev",                                                             
    "start": "deno run -A --unstable-kv npm:astro dev",                                                           
    "build": "astro build",
    "preview": "deno run -A ./dist/server/entry.mjs",
    "format": "deno fmt && prettier --write ."
  },

===== プロジェクト実行 =====

$ deno run dev

Task dev astro dev
09:22:49 [ERROR] [config] The adapter @deno/astro-adapter does not currently support the feature "sharp". Your project may not build correctly.
09:22:49 [types] Generated 2ms
09:22:49 [content] Syncing content
09:22:49 [content] Synced content

 astro  v5.6.1 ready in 408 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

09:22:49 watching for file changes...

2025/04/08 現在 @deno/astro-adapter@0.3.0 は Astro 5 に対応中...😅\\ [[https://docs.astro.build/ja/guides/deploy/deno/|AstroサイトをDenoにデプロイする | Docs]]\\ [[git>denoland/deno-astro-adapter/issues/40|Is Astro 5 supported? · Issue #40 · denoland/deno-astro-adapter]]\\

Task dev astro dev
09:22:49 [ERROR] [config] The adapter @deno/astro-adapter does not currently support the feature "sharp". Your project may not build correctly.

動作確認🤔\\ [[http://localhost:4321/|]]\\ {{:javascript:deno:astro_preact_001.png|Astro Preact 001}} ===== トラブルシューティング ===== deno でのパッケージ追加の仕方が誤っている...😅\\ ''deno add'' でパッケージ追加するのが正しい🤔\\

$ deno run -A npm:astro add preact

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────╮
 │ deno add @astrojs/preact@^4.0.7 preact@^10.26.4  │
 ╰──────────────────────────────────────────────────╯

? Continue? › (Y/n)

✔ Continue? … yes
✖️ Installing dependencies...

 The command `deno add @astrojs/preact@^4.0.7 preact@^10.26.4` exited with code 1 

Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
  Location:
    /home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31
  Stack trace:
    at add (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31)
    at processTicksAndRejections (ext:deno_node/_next_tick.ts:59:10)
    at eventLoopTick (ext:core/01_core.js:185:21)
    at async cli (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/index.js:175:5)

これも誤り...😢\\

$ deno run -A npm:add @astrojs/preact

Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:sharp@0.33.5
┃
┠─ This may cause the packages to not work correctly.
┠─ Lifecycle scripts are only supported when using a `node_modules` directory.
┠─ Enable it in your deno config file:
┖─ "nodeModulesDir": "auto"
error: Failed resolving binary export. '/home/tomoyan/.cache/deno/npm/registry.npmjs.org/add/2.0.6/package.json' did not have a bin property

これも誤り...😭\\

$ cat << 'EOF' > deno.json
{
  "nodeModulesDir": "auto"
}
EOF

$ deno run -A npm:astro add preact

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────╮
 │ deno add @astrojs/preact@^4.0.7 preact@^10.26.4  │
 ╰──────────────────────────────────────────────────╯

? Continue? › (Y/n)

✔ Continue? … yes
✖️ Installing dependencies...

 The command `deno add @astrojs/preact@^4.0.7 preact@^10.26.4` exited with code 1 

Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
  Location:
    /home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31
  Stack trace:
    at add (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31)
    at processTicksAndRejections (ext:deno_node/_next_tick.ts:59:10)
    at eventLoopTick (ext:core/01_core.js:185:21)
    at async cli (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/index.js:175:5)

これも誤り...😇\\

$ deno run -A npm:add @astrojs/preact

error: Failed resolving binary export. '/home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/add@2.0.6/node_modules/add/package.json' did not have a bin property

==== エラー： @astrojs/preact にプレフィックスがありません。 `deno add npm：@astrojs/preate`を意味しましたか？🤔 ====

$ deno add @astrojs/preact

error: @astrojs/preact is missing a prefix. Did you mean `deno add npm:@astrojs/preact`?

''deno add %%--%%allow-scripts'' でパッケージに ''npm:'' プレフィックスを付けて実行しなおす😉\\

$ deno add --allow-scripts npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact

Add npm:astro@5.6.1
Add npm:@deno/astro-adapter@0.3.0
Add npm:@astrojs/preact@4.0.8
Add npm:preact@10.26.5

==== 警告: 次のパッケージには、実行されなかったNPMライフサイクルスクリプトが含まれていました...🤔 ====

$ deno add npm:@astrojs/preact
Add npm:@astrojs/preact@4.0.7
Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:sharp@0.33.5
┃
┠─ This may cause the packages to not work correctly.
┖─ To run lifecycle scripts, use the `--allow-scripts` flag with `deno install`:
   deno install --allow-scripts=npm:sharp@0.33.5

''deno add %%--%%allow-scripts'' で実行しなおす😉\\

$ deno add --allow-scripts npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact

Add npm:astro@5.6.1
Add npm:@deno/astro-adapter@0.3.0
Add npm:@astrojs/preact@4.0.8
Add npm:preact@10.26.5

==== これにより、パッケージが正しく機能しない可能性があります。`node_modules` ディレクトリを使用する場合にのみ、ライフサイクルスクリプトはサポートされます...🤔 ====

$ deno run -A npm:@astrojs/upgrade

Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:esbuild@0.15.18
┠─ npm:esbuild@0.17.19
┃
┠─ This may cause the packages to not work correctly.
┠─ Lifecycle scripts are only supported when using a `node_modules` directory.
┠─ Enable it in your deno config file:
┖─ "nodeModulesDir": "auto"

 astro   Integration upgrade in progress.

      ◼  @astrojs/preact is up to date on v4.0.8
      ▲  astro will be updated  from v4.9.3 to v5.6.1 

  wait   One package has breaking changes. Continue?
         Yes

''%%--%%node-modules-dir'' オプションを付けて実行する、または、''deno.json'' を設定する🤔\\

$ deno run -A --node-modules-dir npm:@astrojs/upgrade

$ cat << 'EOF' > deno.json
{
  "nodeModulesDir": "auto"
}
EOF

==== エラーの依存関係がインストールに失敗しました。次のコマンドを手動で実行してください。deno astro@5.6.1 を追加します...🤔 ==== deno では ''@astrojs/upgrade'' ができない😢\\

$ deno run -A --node-modules-dir npm:@astrojs/upgrade


 astro   Integration upgrade in progress.

      ◼  @astrojs/preact is up to date on v4.0.8
      ▲  astro will be updated  from v4.9.3 to v5.6.1 

  wait   One package has breaking changes. Continue?
         Yes

 check   Be sure to follow the CHANGELOG.
         astro Upgrade to Astro v5

 ██████  Installing dependencies with deno...

      ▲  error Dependencies failed to install, please run the following command manually:
deno add astro@5.6.1

''deno add %%--%%allow-scripts npm:astro'' で追加すれば更新できる😉\\

$ deno add --allow-scripts npm:astro

Add npm:astro@5.6.1

===== 参考文献 ===== [[https://deno.com/blog/build-astro-with-deno|Build an Astro site with Deno]]\\ [[https://deno.com/blog/astro-on-deno|Build and Ship Astro Sites with Deno and Deno Deploy]]\\ [[https://docs.astro.build/en/guides/deploy/deno/|Deploy your Astro Site with Deno | Docs]]\\ [[git>denoland/deno-astro-adapter|denoland/deno-astro-adapter: A Deno adapter for running Astro applications on the Deno runtime.]]\\ [[git>denoland/deno-astro-adapter/issues/40|Is Astro 5 supported? · Issue #40 · denoland/deno-astro-adapter]]\\