CODEWITHSUNDEEP
remixremix.run
Suraj Air
Suraj Air

Reputation: 2113

How to add Multiple public folders in remix.run

I am currently trying to build a electron app using Remix. Thanks to this great setup here https://github.com/itsMapleLeaf/remix-electron.

My requirements is as follows.

When the user uploads an asset, I store it inside a folder xyz in the app path. For mac is /Users/xyz/Application Support/app-folder/assets. I need to show these assets as image tags in electron view. But it fails to locate these files as the public folder is set to /build/. I tried using the file:/// protocol with absolute path but that didn't work as well. The above repo has a config to set the public folder and that works, but then app stops working as it expects to find JS assets in /build/ folder. And I am not able to dynamically set the "publicPath" value in remix.config.js. The solution I am looking for, is to have two public folders. 1. default /build/ folder and another one from app location. So remix can serve assets from both paths.

Any help is highly appreciated. Thank you.

Upvotes: 0

Views: 1064

Answers (1)

Kiliman
Kiliman

Reputation: 20322

You'll need to update the remix-electron source.

In main.ts, you'll see where it gets all the asset files. You can include your other folders here. Note this is done at initialization, so any dynamically added files won't be included later. You'll need to export a function that lets you add to the asset files.

  let [assetFiles] = await Promise.all([
    collectAssetFiles(publicFolder),
    collectAssetFiles(otherPublicFolder), // add additional folders
    app.whenReady(),
  ])

https://github.com/itsMapleLeaf/remix-electron/blob/20352cc20f976bed03ffd20354c2d011e5ebed64/src/main.ts#L55-L58

Another option is to update the serveAsset function. This is called on every request with the path. You can then check your list of public folders for the asset. This will pickup any new files added.

export async function serveAsset(
  request: Electron.ProtocolRequest,
  files: AssetFile[],
): Promise<Electron.ProtocolResponse | undefined> {
  const url = new URL(request.url)

  // TODO: try different folders for list of files to check
  const file = files.find((file) => file.path === url.pathname)
  if (!file) return


  return {
    data: await file.content(),
    mimeType: mime.getType(file.path) ?? undefined,
  }
}

https://github.com/itsMapleLeaf/remix-electron/blob/20352cc20f976bed03ffd20354c2d011e5ebed64/src/asset-files.ts#L24-L37

Upvotes: 1

Related Questions