[es-dev-server] Move index.html to src dir
See original GitHub issueI would like to move index.html
from root overloaded with config files to src
dir.
I used option --root-dir=src
, but I got this error…
GET https://localhost:8080/node_modules/lit-element/lit-element.js 404
Do you know any solution?
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
open-wc/es-dev-server - GitHub
es -dev-server is a static web server. When a request is made from the browser for /foo/bar.js it will try and find this...
Read more >Developing Without a Build (2): es-dev-server
For example, let's create a new folder called demo , and move our index.html inside it. We will need to adjust the script...
Read more >How can I move "index.html" when using webpack?
One way is to update the script (in package.json) so it copies index.html to the destination folder:
Read more >How to set up a dev server with esbuild
In this article, I'll show how to add a development server to the simple ... "watch": "esbuild --bundle src/index.js --outfile=www/main.js ...
Read more >How to Serve a Single Page Application (SPA) using Rollup.js ...
json file sets "outDir": "out-tsc" and that means the TypeScript compiler will generate the output files in ./out-tsc folder. Then, the index.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
webpack-dev-server
doesn’t serve regular files, it just bundles everything and serves one bundle.es-dev-server
is intended to serve from source, I don’t think creating virtual module folder is going to work well.I’ve thought about a couple of solutions and updated the docs with these two sections:
Folder structure
es-dev-server
serves static files using the same structure as your file system. It cannot serve any files outside of the root of the web server. You need to make sure any files requested, including node modules, are accessible for the web server.Click read more to view different strategies for setting up your project’s folder structure.
Read more
index.html in root
The simplest setup where all files are accessible is to place your index.html at the root of your project:
If you run
es-dev-server
regularly from the root of this project, you can access your app at/
or/index.html
in the browser.index.html in a subfoolder
If you move your
index.html
in inside a subfolder:You can access your app in the browser at
/src/
or/src/index.html
. You can telles-dev-server
to explicitly open at this path:You can also change the root directory of the dev server:
Now your
index.html
is accessible at/
or/index.html
. However the dev server cannot serve any files outside of the root directory. So if your app uses any node modules, they will no longer because accessible.If you want your index in a sub folder without this being visible in the browser url, you can set up a file rewrite rule. Read more here
Base element
You can set up a
<base href="">
element to modify how files are resolved relatively to your index.html. You can be very useful when your index.html is not in the root of your project.If you use SPA routing, using a base element is highly recommended. Read more
In the advanced section:
Rewriting file requests
You can rewrite certain file requests using a simple custom middleware. This can be useful for example to serve your
index.html
from a different file location.Read more
Set up a configuration file with a custom middleware:
This way from the browser you can request
/
or/index.html
and it will serve/src/index.html
. This middleware is run before the dev server’s own file serving logic, which will use the rewritten url.Can you see if this works for you?
perfect - let us know if you need anything else 🤗