How to read static files with Remix + Vercel

[IHIutch]

Thanks to @theMosaad for finding a solution to this. Im making this thread in case anyone comes to discussions looking for how to do this.

In the case of this project, the static files are located in ./json which means you'll use the path __dirname + ../json + /yourFileName.js

In my specific case I was doing something a little more complicated, where I was trying to read the contents of a CSS file I was using elsewhere. In the end, Remix ends up compiling that CSS file to this path ./public/build/_assets/myStyles-someHash.css.

I actually ended up importing my CSS file to grab the path, so my solution ended up looking something like:

import styles from '~/styles/myStyles.css'
...
const stylePath =
    process.env.NODE_ENV === 'production'
      ? __dirname + '/../public' + styles
      : './public' + styles

You can see the difference in how you need to access the files locally vs on Vercel in production. The path Vercel actually uses to find this file is this: /var/task/api/../public/build/_assets/myStyles-someHash.css.

Also thanks to @kiliman for helping me get the local path sorted out

If you're on the Remix discord, you can find more discussion about this here