Nuxt•2mo ago

Deploying Nuxt which has server/api functions to vercel and make them able to load files

i was working on a project where i have nuxt ./server/api/mdx.ts which is responsible for loading a file when requested i tried loading using fs which resulted in errors because the server functions run in a separate enviroment on vercel. then after searching around a bit i decided to have a nitro asset setup like this: nuxt.config.ts:

// the rest of nuxt setup
nitro: {
    storage: {
      mdxassets: {
        driver: 'fs',
        base: "./documentation"
      },
    },
    compressPublicAssets: {
      brotli: true,
      gzip: true
    }
  },
// the rest of nuxt setup

// the rest of nuxt setup
nitro: {
    storage: {
      mdxassets: {
        driver: 'fs',
        base: "./documentation"
      },
    },
    compressPublicAssets: {
      brotli: true,
      gzip: true
    }
  },
// the rest of nuxt setup

mdx.ts:

export default defineEventHandler(async (event) => {
  try {
    // Ensure the request method is POST
    if (event.req.method !== 'POST') {
      console.warn('Mdx Ignoring non-POST request:', {
        method: event.req.method,
        url: event.req.url,
      });
      return {
        statusCode: 405,
        body: 'Method Not Allowed',
      };
    }

    // Read the file path from the request body
    const { filePath } = await readBody(event);

    if (!filePath) {
      console.error('No file path provided');
      return {
        statusCode: 400,
        body: 'No file path provided',
      };
    }

    // Use the storage API to fetch the file
    const storage = useStorage('mdxassets');
    let file = await storage.getItem(filePath).then((x) => x?.toString());

    if (!file) {
      console.log('What was found: ', storage);
      console.error('File not found or could not be read:', filePath);
      return {
        statusCode: 404,
        body: 'File not found or could not be read',
      };
    }

    console.log('File Content:', file);

export default defineEventHandler(async (event) => {
  try {
    // Ensure the request method is POST
    if (event.req.method !== 'POST') {
      console.warn('Mdx Ignoring non-POST request:', {
        method: event.req.method,
        url: event.req.url,
      });
      return {
        statusCode: 405,
        body: 'Method Not Allowed',
      };
    }

    // Read the file path from the request body
    const { filePath } = await readBody(event);

    if (!filePath) {
      console.error('No file path provided');
      return {
        statusCode: 400,
        body: 'No file path provided',
      };
    }

    // Use the storage API to fetch the file
    const storage = useStorage('mdxassets');
    let file = await storage.getItem(filePath).then((x) => x?.toString());

    if (!file) {
      console.log('What was found: ', storage);
      console.error('File not found or could not be read:', filePath);
      return {
        statusCode: 404,
        body: 'File not found or could not be read',
      };
    }

    console.log('File Content:', file);

this setup works fine on my pc bot in dev mode and build but doesn't work on vercel and with useSthorage i don't know the errors because it doesn't give me one but it silently isn't able to load it just on vercel. with my file i am trying to load is in the root dir. of my project inside a folder called docs.

2 Replies

kapa.ai•2mo ago

Hi @khub_official. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions for deploying your Nuxt application with server/api functions to Vercel and enabling them to load files. However, it's important to note that the specific setup you're using isn't directly addressed in the provided knowledge sources. Here's what I can suggest: 1. Vercel KV Storage: Instead of using the local filesystem, which isn't accessible in Vercel's serverless environment, you could consider using Vercel KV for storage. This is supported by Nuxt and can be configured in your nuxt.config.ts file. Here's how you might set it up:

export default defineNuxtConfig({
  nitro: {
    storage: {
      mdxassets: {
        driver: 'vercelKV',
        // Other Vercel KV options
      }
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    storage: {
      mdxassets: {
        driver: 'vercelKV',
        // Other Vercel KV options
      }
    }
  }
})

You'll need to install the @vercel/kv dependency in your project. For more details, see the Unstorage Vercel KV driver documentation. 2. Vercel Blob Storage: If you're dealing with larger files, Vercel Blob storage might be a better option. You can configure it like this:

export default defineNuxtConfig({
  nitro: {
    storage: {
      mdxassets: {
        driver: 'vercelBlob',
        access: 'public', // Required
        // Other Vercel Blob options
      }
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    storage: {
      mdxassets: {
        driver: 'vercelBlob',
        access: 'public', // Required
        // Other Vercel Blob options
      }
    }
  }
})

You'll need to install the @vercel/blob dependency. More information can be found in the Unstorage Vercel Blob driver documentation. 3. Environment Variables: Make sure you've set up the necessary environment variables in your Vercel project settings. For Vercel KV, you'll need KV_REST_API_URL and KV_REST_API_TOKEN. For Vercel Blob, you'll need BLOB_READ_WRITE_TOKEN. 4. Vercel Edge Functions: If you're using Vercel Edge Functions, you might need to set the Nitro preset to 'vercel-edge' in your nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel-edge'
  }
})

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel-edge'
  }
})

5. Debugging: To debug issues on Vercel, you can use Vercel's logging system. Add more detailed logging in your API function and check the Function Logs in the Vercel dashboard. Remember, when deploying to Vercel, your server functions run in a serverless environment, which doesn't have access to the local filesystem. That's why solutions like Vercel KV or Vercel Blob are necessary for persistent storage. If you're still encountering issues, you might want to check Vercel's deployment logs for any error messages. The silent failure you're experiencing might be due to how errors are being handled in the serverless environment. Nuxt Deployment Documentation provides more general information about deploying Nuxt applications, which might be helpful in troubleshooting your deployment issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Deploying Nuxt which has server/api functions to vercel and make them able to load files

Did you find this page helpful?