Nuxt•9mo ago

Question about reading deployed file system using server/api

Hey everyone, Sorry if this is an obvious question, but I'm trying to figure something out. I have a nuxt3 app deployed to netlify with ssr set to true. I've been experimenting with the server/api capabilities and was thinking it could be a fun exercise to move some of the logic to the api folder. In one section I have an array of projects with a reference to the image folder (in /public/images) that contains all the images i've uploaded for those projects. I want to access those folders and get the length of how many images are in the folder, which I then use to generate some slides in the UI. I wrote some code in server/api/projects.ts which works locally

import path from 'path'
import fs from 'fs'

export default defineEventHandler(async event => {
  let projects = [{title: 'Abstract', imageFolder: 'abstract',
    },
    { title: 'Snack Foods', imageFolder: 'food',
    },
  ]

  const folderPath = path.join('public', 'images')

  const getFolderSize = async (folder) => {
    try {
      const files = await fs.promises.readdir(folder)
      return files.length
    } catch (err) {
      console.error('Error reading folder:', err)
    }
  }

  try {
    const folder = await fs.promises.readdir(folderPath)
    for (const project of projects) {
      const foundFolder = folder.find(item => item === project.imageFolder)
      if (foundFolder) {
        const foundPath = path.join(folderPath, foundFolder)
        const folderSize = await getFolderSize(foundPath)
        Object.assign(project, { folderSize: folderSize })
      }
    }
    return projects
  } catch (err) {
    console.error('Error,', err)
    throw err
  }
})

import path from 'path'
import fs from 'fs'

export default defineEventHandler(async event => {
  let projects = [{title: 'Abstract', imageFolder: 'abstract',
    },
    { title: 'Snack Foods', imageFolder: 'food',
    },
  ]

  const folderPath = path.join('public', 'images')

  const getFolderSize = async (folder) => {
    try {
      const files = await fs.promises.readdir(folder)
      return files.length
    } catch (err) {
      console.error('Error reading folder:', err)
    }
  }

  try {
    const folder = await fs.promises.readdir(folderPath)
    for (const project of projects) {
      const foundFolder = folder.find(item => item === project.imageFolder)
      if (foundFolder) {
        const foundPath = path.join(folderPath, foundFolder)
        const folderSize = await getFolderSize(foundPath)
        Object.assign(project, { folderSize: folderSize })
      }
    }
    return projects
  } catch (err) {
    console.error('Error,', err)
    throw err
  }
})

This is working locally but when I try to deploy it via netlify, it no longer works. I suspect it's because the built file structure is different On netlify, shows dist/images as being where the images would be... but trying that still returns null. Anyone have any idea? Is this even a good idea / appraoch? Thanks!

4 Replies

Room 208OP•9mo ago

Also for some background: This is a project portflio i'm building for my partner. I wanted to make it so that she can upload new images via a portal, and then those images are added to the slide ui that I have on the site. I am building the slide ui using swiperjs, and am looping through the projects folder size to add swiper slides to the swiper carousel.

Eric•9mo ago

Do you get an error message?

Room 208OP•9mo ago

I don't get an error message, at least not that I can see, it just returns value: null when i log the result of useFetch (to be honest i'm not sure where to look on netlify to see backend console logs)

Eric•9mo ago

I was justa wandering if the fs modules was trying to run client side. I'm not familiar with it, but it seems to be a nodejs module? might not be compatible client side

Gaming

Programming

Question about reading deployed file system using server/api