Room 208 Posts - Answer Overflow

Room 208

Posts Comments

NNuxt

•Created by Room 208 on 9/27/2024 in #❓・help

Nuxt ScriptYoutubePlayer behavior help

20 replies

NNuxt

•Created by Room 208 on 4/28/2024 in #❓・help

How to send an email from website contact form to yourself.

Hey everyone, as the title states, what steps are needed to link a contact form on my website to be able to gather contact form data and then send it to my own gmail address? I have tried installing nuxt-mail and was able to send an email to myself, but I don't really understand the smtp host and port options. Am I supposed to sign up with some kind of mail delivery service and use whatever credentials they give me?
I feel kind of lost trying to look this up on my own. Any help would be appreciated!

4 replies

NNuxt

•Created by Room 208 on 4/11/2024 in #❓・help

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!

5 replies

Gaming

Programming