Where to put files uses via the filesystem rather than import?

[silvenon]

Hey Remix community! 👋

I'm refactoring my blog to Remix, and it's a crazy, but wonderful journey! My posts are MDX files, and I'm using mdx-bundler to compile them. So these files are not located in app/routes (which is also possible in Remix), instead I have a dynamic route app/routes/posts/$slug.tsx that maps the slug parameter to the corresponding MDX file through the filesystem. However, I'm not sure where to put my posts.

Initially I put them in the app/posts directory, which worked fine in development, but then I noticed that the Developer Blog tutorial recommends putting them in the project root, and upon deployment I figured out why — because the app directory doesn't get deployed 😆

However, by putting them outside of app I'm losing live reload upon editing posts. Currently I have deployment set up so that I copy app/posts to the root, and ignore that destination in git, but I'm looking for some guidance here whether I'm misunderstanding something. 🙏

Thanks!

EDIT: This relates to #1492 that has just been posted 😄

[Adbib]

make your Posts function like this I solve this problem and its work for me on vercel

export async function getPosts() {
  const postsPath = await fs.readdir(
    `${__dirname}/../../app/posts`,
    { withFileTypes: true }
  );

  const posts = await Promise.all(
    postsPath
      .map(async (dirent) => {
        const file = await fs.readFile(
          path.join(`${__dirname}/../../app/posts`, dirent.name)
        );
        const { attributes } = parseFrontMatter(file.toString());
        return {
          slug: dirent.name.replace(/\.mdx/, ""),
          title: attributes.title,
        };
      })
  );

  return posts;
}

[silvenon]

Thanks! Even though I'm not able to try this because of a separate issue with esbuild currently not working in Vercel serverless functions, but based on #1492 (reply in thread) I'm sure that it works so I'm marking this as the answer.

Ideally this should also be mentioned in the Remix docs, but one thing at a time 😄

[cagarweyne]

Yes, can confirm this works - agreed, should be in the docs, but that obviously takes time :)

[IsNotASword]

How can we do this on Remix v2?

__dirname is undefined on node 18

[kiliman]

Remix v2 defaults to ESM so __dirname is not available.

Here's an article that discusses alternative solutions.

https://blog.logrocket.com/alternatives-dirname-node-js-es-modules/