Wasp•3mo ago

Load Custom fonts from `src/client/fonts/HossRound`

I added a custom font to the path: app/src/client/fonts/HossRound/Hoss-Round-Bold.otf and setup my Tailwindconfig and css to load that font. Whenever I load the font, vite gives me a 403 error: The request url "/app/src/client/fonts/HossRound/Hoss-Round-Bold.otf" is outside of Vite serving allow list. I tried changing my vite config to the below to allow the font:

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        path.resolve(__dirname, "../src/client/static/fonts"),
      ],
    },
  },
});

But it still failed with the error: app/.wasp/out/web-app/src/index.tsx" is outside of Vite serving allow list.. It seems that under the hood Wasp is somewhere setting the fs allow path and not allowing me to change it.

8 Replies

kapa.ai•3mo ago

Hi @abiroot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're encountering an issue with Vite's default configuration, which doesn't allow serving files from outside the .wasp/out directory. This is a common issue when trying to use assets like fonts or images that reside outside of this directory. To resolve this issue, you can adjust your vite.config.ts to include the path to your fonts. However, you need to use the resolveProjectPath helper function provided by Wasp. This function is used to bridge the gap between where users define paths in their config files and where the web app is running. Here's how you can adjust your vite.config.ts:

import { resolveProjectPath } from 'wasp/dev'
import path from 'path'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Add the path to your fonts here
        resolveProjectPath('./src/client/fonts'),
      ],
    },
  },
});

import { resolveProjectPath } from 'wasp/dev'
import path from 'path'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Add the path to your fonts here
        resolveProjectPath('./src/client/fonts'),
      ],
    },
  },
});

This will tell Vite to allow serving files from the specified directory. Note that the path you provide to resolveProjectPath should be relative to your project root directory. For more information, you can refer to these discussions on the Wasp Discord server: fontsource not included in .wasp/out (https://discord.com/channels/686873244791210014/1216399816750534728) and Importing external CSS (https://discord.com/channels/686873244791210014/1217414076569751563). You can also check out the Wasp documentation on customizing the Vite config (https://wasp-lang.dev/docs/project/custom-vite-config). Remember to be careful when making changes to the Vite config, as it can break the Wasp's client build process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @abiroot, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

abirootOP•3mo ago

Now I get this error: [ Client!] 02:23:17 [vite] Pre-transform error: Failed to load url /src/index.tsx (resolved id: /Users/lamba/Projects/WASP/my-saas/app/.wasp/out/web-app/src/index.tsx). Does the file exist? [ Client!] The request url "/Users/lamba/Projects/WASP/my-saas/app/.wasp/out/web-app/src/index.tsx" is outside of Vite serving allow list. @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @abiroot, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

abirootOP•3mo ago

I added resolveProjectPath('../app/.wasp/out/web-app/src/') to my fs allow list, and it worked: import { defineConfig } from "vite"; import { resolveProjectPath } from "wasp/dev";

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Add the path to your fonts here
        resolveProjectPath('./src/client/fonts'),
        resolveProjectPath('../app/.wasp/out/web-app/src/'),
      ],
    },
  },
});

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Add the path to your fonts here
        resolveProjectPath('./src/client/fonts'),
        resolveProjectPath('../app/.wasp/out/web-app/src/'),
      ],
    },
  },
});

But I feel like now I made my whole app public? Is this a security mistake?

miho•3mo ago

We have this snippet for this specific situation: https://gist.github.com/infomiho/9682e664948b84112074a69268f5673a

Gist

Using Wasp with @fontsource (Solution for the "The request url * is...

Using Wasp with @fontsource (Solution for the "The request url * is outside of Vite serving allow list" issue) - main.wasp

miho•3mo ago

Let me know if it works for you 😄 But I'm not sure if it's the same thing. Maybe move the fonts to the public folder? That's what it is designed for.

abirootOP•3mo ago

Thank you @miho Isin't it better if Wasp had the default vite.config with searchForWorkspaceRoot(process.cwd()), in its fs.allow config?

miho•3mo ago

If you are not changing server.fs.allow - it's the default, of course. Buuuut, this bit from the Vite docs explains it:

When server.fs.allow is specified, the auto workspace root detection will be disabled. To extend the original behavior, a utility searchForWorkspaceRoot is exposed:

Gaming

Programming

Load Custom fonts from `src/client/fonts/HossRound`

Did you find this page helpful?