Nuxt•3w ago

Third party static content

I'm working on a nuxt project which I now want to extend using a third party generated content (a static website generated using another toolchain). What would be the best way to go? I'm not able to properly use this kind of module (it didn't work):

export default defineNuxtModule({
  setup() {
    addServerHandler({
      route: `docs/*`,
      handler: './docs/index.ts'
    });
  }
});

export default defineNuxtModule({
  setup() {
    addServerHandler({
      route: `docs/*`,
      handler: './docs/index.ts'
    });
  }
});

With ./docs/index.tsbeing defined as below:

import { defineEventHandler, serveStatic } from 'h3';
import { stat, readFile } from 'node:fs/promises';
import { join } from 'pathe';

export default defineEventHandler((event) => {
  const publicDir = '../public/docs/';

  return serveStatic(event, {
    getContents: (id) => readFile(join(publicDir, id || 'index.html')),
    getMeta: async (id) => {
      const stats = await stat(join(publicDir, id)).catch(() => {});

      if (!stats || !stats.isFile()) {
        return;
      }

      return {
        size: stats.size,
        mtime: stats.mtimeMs
      };
    }
  });
});

import { defineEventHandler, serveStatic } from 'h3';
import { stat, readFile } from 'node:fs/promises';
import { join } from 'pathe';

export default defineEventHandler((event) => {
  const publicDir = '../public/docs/';

  return serveStatic(event, {
    getContents: (id) => readFile(join(publicDir, id || 'index.html')),
    getMeta: async (id) => {
      const stats = await stat(join(publicDir, id)).catch(() => {});

      if (!stats || !stats.isFile()) {
        return;
      }

      return {
        size: stats.size,
        mtime: stats.mtimeMs
      };
    }
  });
});

11 Replies

kapa.ai•3w ago

Hi @kogratte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To integrate a third-party generated static website into your Nuxt project, you have a couple of options. Based on the knowledge sources provided, here's a recommended approach: 1. Use the public/ directory: The simplest and most straightforward way to serve static content in a Nuxt 3 project is to use the public/ directory. According to the Nuxt documentation on the public directory: "The public/ directory is used to serve your website's static assets. Files contained within the public/ directory are served at the root and are not modified by the build process." You can place your third-party generated static website content in the public/ directory of your Nuxt project. For example:

/public/docs/index.html
/public/docs/assets/
/public/docs/other-pages/

/public/docs/index.html
/public/docs/assets/
/public/docs/other-pages/

This way, you can access your static content at /docs/index.html or /docs/ without any additional configuration. 2. Adjust your server middleware: If you need more control over how the static content is served, you can create a server middleware. However, your current implementation seems overly complex for this use case. Instead, you can simplify it using the serveStatic utility from h3. Create a file in your server/middleware/ directory, for example server/middleware/serve-docs.ts:

import { defineEventHandler, serveStatic } from 'h3'
import { resolve } from 'pathe'

export default defineEventHandler((event) => {
  const staticRoot = resolve('./public/docs')
  return serveStatic(event, {
    root: staticRoot,
    index: 'index.html'
  })
})

import { defineEventHandler, serveStatic } from 'h3'
import { resolve } from 'pathe'

export default defineEventHandler((event) => {
  const staticRoot = resolve('./public/docs')
  return serveStatic(event, {
    root: staticRoot,
    index: 'index.html'
  })
})

This middleware will serve the static content from your public/docs directory. By using this approach, you don't need to create a separate Nuxt module or manually handle file reading and stats. The serveStatic utility from h3 will efficiently serve your static files. Remember to place your third-party generated content in the public/docs/ directory of your Nuxt project. This solution combines the simplicity of using the public/ directory with the flexibility of server middleware, allowing you to serve your third-party generated static website alongside your Nuxt application. Nuxt Documentation on the public directory Nuxt Documentation on server directory ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@639111892144619539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kogratteOP•3w ago

@kapa.ai Serving content through public folder leads to an issue with mjs content being referenced.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're encountering an issue with serving content through the public folder, specifically related to mjs (ES modules) content being referenced. This is indeed a known issue with Nuxt and static asset handling. Let me provide some insight based on the available information. The problem you're experiencing is likely related to how Nuxt handles static assets and ES modules. According to a GitHub issue discussion, Nuxt uses a performance optimization that can sometimes cause problems with recently uploaded or changed static assets. The core of the issue is that Nuxt, for performance reasons, hardcodes the list of files it will support reading, rather than reading from the file system on each incoming request. This can lead to situations where newly added or changed files are not immediately recognized by Nuxt. There are a few potential workarounds you can try: 1. Use the nitro:build:public-assets hook to manually add assets: You can add a custom hook in your nuxt.config.ts file to manually add assets that Nuxt should recognize. Here's an example:

export default defineNuxtConfig({
  hooks: {
    'nitro:build:public-assets'(nitro) {
      // Add your mjs files here
      nitro.options.publicAssets.push({
        dir: 'public/your-mjs-directory',
        maxAge: 60 * 60 * 24 * 365 // or whatever cache duration you prefer
      })
    }
  }
})

export default defineNuxtConfig({
  hooks: {
    'nitro:build:public-assets'(nitro) {
      // Add your mjs files here
      nitro.options.publicAssets.push({
        dir: 'public/your-mjs-directory',
        maxAge: 60 * 60 * 24 * 365 // or whatever cache duration you prefer
      })
    }
  }
})

2. Consider using a different file extension: If possible, you might want to consider using a different file extension for your static content. Nuxt treats .mjs files differently because they are expected to be ES modules. 3. Use server routes: Instead of serving the content directly from the public folder, you could create a server route that serves the content. This gives you more control over how the files are served. It's worth noting that this issue is more complex than it might seem at first glance, and the Nuxt team is aware of it. There's an ongoing discussion about improving how Nuxt handles static assets, especially in the context of ES modules. If these workarounds don't solve your specific issue, you might want to consider opening an issue on the Nuxt GitHub repository with more details about your specific setup and the exact error you're encountering. GitHub Issue Discussion ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@639111892144619539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kogratteOP•3w ago

@kapa.ai for the record. The solution is to use serveStaticthrough a file placed in /server/routes/__path__/[...].ts. Otherwise, idwill never be hydrated. Full event handler :

import { defineEventHandler, serveStatic } from 'h3';
import { stat, readFile } from 'node:fs/promises';
import { join, resolve } from 'pathe';

const publicDir = resolve('./docs/');

export default defineEventHandler((event) => {
  function cleanupId(id: string) {
    return id.replace('/docs', '');
  }

  return serveStatic(event, {
    getContents: (id) => {
      return readFile(join(publicDir, cleanupId(id)));
    },

    getMeta: async (id) => {
      const stats = await stat(join(publicDir, cleanupId(id))).catch(() => {});

      if (!stats || !stats.isFile()) {
        return;
      }

      return {
        size: stats.size,
        mtime: stats.mtimeMs
      };
    }
  });
});

import { defineEventHandler, serveStatic } from 'h3';
import { stat, readFile } from 'node:fs/promises';
import { join, resolve } from 'pathe';

const publicDir = resolve('./docs/');

export default defineEventHandler((event) => {
  function cleanupId(id: string) {
    return id.replace('/docs', '');
  }

  return serveStatic(event, {
    getContents: (id) => {
      return readFile(join(publicDir, cleanupId(id)));
    },

    getMeta: async (id) => {
      const stats = await stat(join(publicDir, cleanupId(id))).catch(() => {});

      if (!stats || !stats.isFile()) {
        return;
      }

      return {
        size: stats.size,
        mtime: stats.mtimeMs
      };
    }
  });
});

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for sharing your solution. It's great that you found a way to make it work. Let's break down why this approach is effective and how it aligns with Nuxt's server handling capabilities. Your solution utilizes the server routes feature of Nuxt, which is indeed a powerful way to handle custom server-side logic. By placing your handler in /server/routes/__path__/[...].ts, you're creating a catch-all route that can serve your static content. Here's why this approach works well: 1. Catch-all Route: The [...].ts filename creates a catch-all route, which means it will handle any request that matches the path prefix. This is perfect for serving a directory of static files. 2. serveStatic Usage: You're correctly using the serveStatic utility from h3, which is designed to efficiently serve static files. 3. Custom Content Handling: By providing custom getContents and getMeta functions, you have fine-grained control over how files are read and what metadata is returned. 4. Path Cleaning: Your cleanupId function ensures that the /docs prefix is removed from the requested path, allowing you to serve files from the correct location. The reason this works better than the previous approaches is: - It avoids the limitations of the public/ directory, which can have issues with certain file types like .mjs. - It gives you more control than a simple middleware approach. - It allows for proper hydration of the id parameter, which is crucial for correct routing and file serving. This solution effectively combines the flexibility of Nuxt's server routes with the efficiency of h3's serveStatic utility. It's a great example of how to integrate external static content into a Nuxt application while maintaining full control over the serving process. Thank you for sharing this solution. It will undoubtedly be helpful for other developers facing similar challenges when integrating external static content into their Nuxt projects. Nuxt Documentation on Server Routes ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@639111892144619539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kogratteOP•2w ago

@kapa.ai , the result is working fine, except for anchors. Do I need to add this prerendered content to the nitro.prerender.routes rules in order to make them available "at build time"?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in the knowledge sources and your specific situation, it appears that adding the prerendered content to the nitro.prerender.routes rules could indeed help with making the anchors work correctly at build time. Let me explain why and how you can do this. When you're using static site generation or prerendering in Nuxt, it's important to ensure that all your routes, including those for your external static content, are known to Nuxt at build time. This is especially true for features like anchors that rely on the content being available when the page is generated. To add your prerendered content to the build process, you can use the nitro.prerender.routes option in your nuxt.config.ts file. Here's how you can do it:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/docs', '/docs/**']
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/docs', '/docs/**']
    }
  }
})

This configuration tells Nuxt to prerender the /docs route and all routes under it (/docs/**). The crawlLinks: true option allows Nuxt to discover and prerender linked pages within your docs content. However, there are a few important points to consider: 1. Dynamic Content: If your docs content is truly dynamic or generated at runtime, prerendering might not capture all possible routes. In this case, you might need to explicitly list out all the routes you want to prerender. 2. Build Time: Adding many routes to prerender can significantly increase your build time. Be mindful of this if you have a large number of doc pages. 3. Anchor Handling: While prerendering should help with anchors, you might also need to ensure that your client-side routing (if any) properly handles anchor links within your docs content. 4. Crawling Limitations: As mentioned in the Nuxt documentation on prerendering, the crawler can only discover pages that are linked from a discoverable page. If you have pages that are not linked, you'll need to add them explicitly to the routes array. If you're still experiencing issues with anchors after adding this configuration, you might need to investigate further. It could be related to how your static content is being integrated with Nuxt's routing system. Remember, the prerenderRoutes utility, as described in the Nuxt documentation on prerenderRoutes, can also be used within your pages to hint additional routes for prerendering, which might be useful if you need more dynamic control over which routes are prerendered. Nuxt Documentation on Prerendering Nuxt Documentation on prerenderRoutes ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@639111892144619539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Third party static content

Did you find this page helpful?