Project generated with typescript support cannot serve static file using fastify-static plugin

[isaif]

trafficstars

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the bug has not already been reported

Fastify version

4.0.0

Plugin version

5.7.1

Node.js version

v19.3.0

Operating system

Linux

Operating system version (i.e. 20.04, 11.3, 10)

manjaro

Description

I have generated a project with typescript support and installed fastify-static to serve hello.html file at the root url.

I am getting this error Route GET:/hello.html not found on log when trying to access the root on browser. On browser I get {"message":"Route GET:/hello.html not found","error":"Not Found","statusCode":404}

I have checked the /dist directory and it doesn't have the hello.html file in it. I tried to delete the dist directory and then restart the server using npm run dev but it doesn't solve the issue.

But when I tried to create a project without typescript it works as expected.

src directory

src
├── app.ts
├── plugins
│   ├── README.md
│   ├── sensible.ts
│   └── support.ts
└── routes
    ├── example
    │   └── index.ts
    ├── hello.html        // file I want to serve in root url
    ├── README.md
    └── root.ts

dist directory

dist
├── app.d.ts
├── app.js
├── app.js.map
├── plugins
│   ├── sensible.d.ts
│   ├── sensible.js
│   ├── sensible.js.map
│   ├── support.d.ts
│   ├── support.js
│   └── support.js.map
└── routes
    ├── example
    ├── root.d.ts
    ├── root.js
    └── root.js.map

root.ts

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

const root: FastifyPluginAsync = async (fastify, opts): Promise<void> => {
  fastify.register(fastifyStatic, {
    root: join(__dirname, ""),
  });

  fastify.get("/", async function (request, reply) {
    reply.sendFile("hello.html");
  });
};

export default root;

Project without typescript

Directory structure

.
├── app.js
├── package.json
├── package-lock.json
├── plugins
│   ├── README.md
│   ├── sensible.js
│   └── support.js
├── README.md
├── routes
│   ├── example
│   ├── hello.html   // file I want to serve in root url
│   ├── README.md
│   └── root.js
└── test
    ├── helper.js
    ├── plugins
    └── routes

root.js

"use strict";
const path = require("path");

module.exports = async function (fastify, opts) {
  fastify.register(require("@fastify/static"), {
    root: path.join(__dirname, ""),
  });

  fastify.get("/", async function (request, reply) {
    reply.sendFile("hello.html");
  });
};

Most likely I am making some mistake causing this issue but I want to be sure. Thanks.

Steps to Reproduce

1. Generate project

   typescript support

   fastify generate . --lang=ts
   

   without typescript

   fastify generate .
   

2. install fastify/static npm i @fastify/static

3. Create hello.html file in /src/routes/

4. Make changes in root.js or root.ts in /src/routes/

Expected Behavior

I want to serve hello.html in the root URL.

[mcollina]

This is one of the major issues of typescript. You need to use some other tools to to copy those files.

cc @fastify/typescript

[fox1t]

In my projects, I moved away from tsc as a compilator because of these limitations: I use it only as a type-checker before running https://github.com/egoist/tsup. Maybe we should move the starter to something similar. @fastify/typescript, thoughts?

[climba03003]

It doesn't matter if you are using tsup or tsc for this issue. You should not place any static file inside the TypeScript source code.

~~Or if you do, please do not specify the outDir, so both source code and transpiled code inside the same folder.~~ Edit: remove outDir doesn't work because of how it detect code changes. Move the static file to separate folder.

[fox1t]

What I meant is that is metter of providing out of the box a way to copy static files from src to dist/build folders during the "compilation" process. Otherwise, we should add a paragraph that explains to put static files inside a folder outside the src. WDYT?

[climba03003]

What I meant is that is metter of providing out of the box a way to copy static files from src to dist/build folders during the "compilation" process.

I thought it is the fundamental knowledge of using TypeScript. I believe all of the TypeScript transpiler do not copy static assets to the destination folder by default.

Otherwise, we should add a paragraph that explains to put static files inside a folder outside the src. WDYT?

Yes and no. It is good to explain some special case in document, but just afraid if the same issue happened for others plugin. The document will be hard to read and understand.

[isaif]

I did create a directory "public" at the root. I was getting the same issue of missing static files.

Then I tried creating a static file inside the"src/routes" to see if it fixes the issue as I was unaware of the underlying cause.

Documentation regarding the recommended way of serving static files when using typescript will be helpful.

[netgfx]

I think I'm having the same issue as I have a /build folder where the outDir is placing the js files but with this setup:

server.register(fastifyStatic, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
});

it can't read from the /public folder