file structure for a js app

[micrology]

I've just transferred from Webpack to Parcel and need some advice about how to organise my files. I am not using a framework, just js, css, and npm modules to create an app that runs in a web browser (no node.js). I'm developing it on a local machine, uploading the code to GitHub, then pulling it down to a sub-directory on a web server, so all links need to be relative.

The current structure of <sub-dir> is like this:

package.json
package-lock.json
index.html
css
- app.css
js
- app.js
node_modules
- lots of packages
dist
- index.html
- app.[hash].js
- app.[hash].css

and the CLI command I am using is

parcel build index.html --public-url .

This works, except that to run the app, the weblink has to be

http://example.com/<sub-dir>/dist/index.html

but I want it to be

http://example.com/<sub-dir>/index.html

Using webpack, the latter worked because the top level index.html referenced the app.bundle.js that Webpack had put in dist/.

I thought of adding a RewriteRule in the .htaccess file to redirect <sub-dir>index.html to <sub-dir>/dist/index.html but that seems like a major hack. What is the right way of doing this?

[mischnic]

You need to somehow configure your webserver to use dist instead of <sub-dir> as the webroot

[micrology]

Thanks for the suggestion. That would work if the app was the only item served from that domain, but unfortunately it isn't. I am puzzled that there seems to be no obvious way of doing this by configuring Parcel.