如何在remix.run中添加多个公共文件夹

Question

我目前正在尝试使用Remix构建一个电子应用程序。多亏了这个伟大的设置https://github.com/itsMapleLeaf/remix-electron.

我的要求如下:

当用户上传资源时，我将其存储在应用程序路径中的文件夹xyz中。mac是/Users/xyz/Application Support/app-folder/assets。我需要在电子视图中将这些资产显示为图像标签。但是它无法定位这些文件，因为公共文件夹设置为/build/。我尝试使用绝对路径的file:///协议，但这不起作用。上面的repo有一个配置来设置公共文件夹，这是有效的，但随后应用程序停止工作，因为它期望在/build/文件夹中找到JS资源。我不能动态设置publicpathremix.config.js中的值。我正在寻找的解决方案，是有两个公共文件夹。1. 默认/build/文件夹和另一个来自应用程序位置。所以remix可以从两个路径服务资源。

非常感谢任何帮助。谢谢你。

Answer 1

您需要更新remix-electron源代码。

在主要。Ts，你会看到它从哪里得到所有的资源文件。您可以将其他文件夹包括在这里。注意，这是在初始化时完成的，因此以后不会包含任何动态添加的文件。您需要导出一个函数，它允许您添加到资产文件中。

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

另一个选项是更新serveAsset函数。这将在每个带有路径的请求中调用。然后，您可以检查资产的公用文件夹列表。这将获取任何添加的新文件。

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