Create-React-App Public Folder Subfolders

Question

I have some subfolders inside the public folder. When I build these subfolders are put in the root of the build folder.

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

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

When I serve these files as static using express, serve or firebase, heroku, now... I can't access to these subfolders by url. Example: If i put one file of one of these subfolders in a iframe, I can't access to it, while if I put the path in a src attribute of a img tag it works.. Maybe the subfolders goes in conflict with routes, but I Haven't routes with a subfolder names.

My project is on github: https://github.com/Darklod/p5-sketches-react/tree/heroku?files=1 (Not Updated)

p.s. I have already read this guide: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Answer 1

For serving the React app with express you would need something like this in your configuration:

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

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

In that example replace react with whatever the folder is called where your React app is located

I sadly haven't used firebase or heroku for serving React apps yet, so I sadly can't help you out with that, but I hope the Express part is solved with that

Answer 2

it's been a while and I wanted to close the question. So I tried to solve it.

When I tried it I was using version 16.2.0 of react so I don't know if it also works in recent versions.

The static file management and the __dirname value depends on webpack and app generators like create-react-app. If you write the code from scratch you shouldn't have any problems.

However in Marco's response I have imported static files placed in the root folder (manifest.json, service-worker.js, index.html...) in this way:

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