创建反应应用程序公用文件夹子文件夹

Question

我有公共文件夹内的一些子文件夹。 当我构建这些子文件夹时，它们将被放置在build文件夹的根目录中。

public/
  mySubfolder/
  favicon.ico
  index.html
  ...

build/
  mySubfolder/ 
  static/
  favicon.ico
  index.html
  ...

现在，当我使用express，serve或firebase，heroku将这些文件作为静态文件提供时，...我无法通过url访问这些子文件夹。 示例：如果我将这些子文件夹之一的一个文件放在iframe中，则无法访问它，而如果我将路径放入img标签的src属性中，它将起作用。.也许子文件夹与路由发生冲突，但我没有使用子文件夹名称进行路由。

我的项目在github上： https : //github.com/Darklod/p5-sketches-react/tree/heroku? files =1 （未更新）

ps我已经阅读了本指南： https : //github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Answer 1

为了通过Express服务于React应用，您需要在配置中添加以下内容：

app.use(express.static(path.join(__dirname, 'react')));

app.get('*', (req, res) => {
     res.sendFile(path.join(path.join(__dirname, 'react/index.html'));
});

在这个例子取代react与任何该文件夹被称为在您的应用程序做出反应位于

遗憾的是，我尚未使用firebase或heroku来提供React应用程序，因此，遗憾的是我无法为您提供帮助，但我希望Express部分能解决该问题

Answer 2

已经有一段时间了，我想结束这个问题。 所以我试图解决它。

当我尝试使用它时，我使用的是React的16.2.0版本，所以我不知道它是否也可以在最新版本中使用。

静态文件管理和__dirname值取决于webpack和诸如create-react-app之类的应用生成器。 如果您从头开始编写代码，那么应该不会有任何问题。

但是在Marco的响应中，我以这种方式导入了放置在根文件夹（manifest.json，service-worker.js，index.html ...）中的静态文件：

app.use(express.static(__dirname));