Served static HTML file fails to load resources

Ouverte
  • Quelque chose ne va pas ?
#776 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
css, javascript, node.js, typescript
Domaine
backend, cli

Piste de recherche

Reproduisez le projet généré par fastify-cli v7.0.1 avec le script dev et examinez dist/routes/root.js, dist/public/index.html et le répertoire dist/assets. Commencez par l’enregistrement de fastifyStatic et la route racine, puis vérifiez comment l’application générée expose les fichiers publics. La tâche est terminée lorsque les ressources CSS et JavaScript liées se chargent sans réponses 404 dans le projet généré.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
735
Forks
180
Merge moyen
3 min
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de fastify/fastify-cli

Toutes les issues de fastify/fastify-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.