Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Served static HTML file fails to load resources

オープン
  • 何か問題がありますか？
#776 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
css, javascript, node.js, typescript
領域
backend, cli

調査の方向性

dev スクリプトを使って fastify-cli v7.0.1 で生成されたプロジェクトを再現し、dist/routes/root.js、dist/public/index.html、dist/assets ディレクトリを調べます。fastifyStatic の登録と root ルートから始め、生成されたアプリがどのように公開ファイルを公開しているかを確認します。生成されたプロジェクトで、リンクされた CSS および JavaScript リソースが 404 応答なしで読み込まれれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Prerequisites
  • I have written a descriptive issue title
  • I have searched existing issues to ensure the issue has not already been raised
Issue

Ok - I'm at the end of my rope on this one and I need a little help!

In short, the problem is. I'm serving a static html file with links to external javascript files and css files and these files are not being found. It seems like the Fastify router is trying to route the links (if that makes sense).

Here are the details:

I have created a new Fastify project using fastify-cli v7.0.1 with: fastify generate my-project --esm --lang=ts
Using the npm scripts from the generated project, I run "dev" and the html file is served ok, but I get a 404 on GET http://localhost:8000/assets/mdr.css (the css file linked to the html file).

The error on route "/":
{
"message": "Route GET:/assets/mdr.css not found",
"error": "Not Found",
"statusCode": 404
}

Here is the index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
    <link rel="stylesheet" href="assets/mdr.css"> <!-- CANNOT FIND THIS FILE -->
    <!-- I ommitted the JS script as this is producing the same error and need to simplfy -->
  </head>
  <body 
      <div>Serving HTML from dist/public REV 1</div>
  </body>
</html>

Here is my /dist folder structure:

/dist
    app.js
    /assets
        mdr.css
    /plugins
        sensible.js <-- generated
        support.js <-- generated

    /public
        index.html
    /routes
        /example
            index.js <-- generated
        root.js

And my root.js route:

    import { FastifyPluginAsync } from "fastify";
    import path from "path";
    import { fileURLToPath } from "url";
    import fastifyStatic from "@fastify/static";

    const __filename = fileURLToPath(import.meta.url);
    const __dirname = path.dirname(__filename);

    const root: FastifyPluginAsync = async (fastify, opts): Promise<void> => {

      fastify.register(fastifyStatic, {
        root: path.join(__dirname, "../","public"),
        prefix: "/assets/", //<-- secondary problem - if set to "/public" I get an error that it is already defined somewhere else (not by me)
      });

      fastify.get("/", async function (request, reply:any) {
        return reply.sendFile("index.html");
      });


    };

    export default root;

The generated app is using Autoload on routes and plugins, all created by the generator.
I have just about everything I can think of to fix this and have not been able to.
Any help would be appreciated!

Thanks
_mark

主要言語
JavaScript
スター
733
フォーク
179
平均マージ
8日 12時間
マージ済み PR（30日）
2

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

fastify/fastify-cli のほかの issue

fastify/fastify-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。