Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Served static HTML file fails to load resources

Abierto
  • ¿Algo no está bien?
#776 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
css, javascript, node.js, typescript
Área
backend, cli

Línea de trabajo

Reproduce el proyecto generado por fastify-cli v7.0.1 con el script dev e inspecciona dist/routes/root.js, dist/public/index.html y el directorio dist/assets. Empieza por el registro de fastifyStatic y la ruta raíz; después, verifica cómo la aplicación generada expone los archivos públicos. La tarea está terminada cuando los recursos CSS y JavaScript enlazados se cargan sin respuestas 404 en el proyecto generado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
JavaScript
Estrellas
733
Forks
179
Merge medio
8 d 12 h
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de fastify/fastify-cli

Todos los issues de fastify/fastify-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.