question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[es-dev-server] Move index.html to src dir

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
LarsDenBakkercommented, Jul 14, 2019

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:

node_modules/...
src/...
index.html

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:

node_modules/...
src/...
src/index.html

You can access your app in the browser at /src/ or /src/index.html. You can tell es-dev-server to explicitly open at this path:

es-dev-server --open src/
# with an app index the open path is adjusted automatically
es-dev-server --app-index src/index.html --open

You can also change the root directory of the dev server:

es-dev-server --root-dir src --open

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:

module.exports = {
  customMiddlewares: [
    function rewriteIndex(context, next) {
      if (context.url === '/' || context.url === '/index.html') {
        context.url = '/src/index.html';
      }

      return next();
    }
  ],
};

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?

0reactions
daKmoRcommented, Jul 15, 2019

perfect - let us know if you need anything else 🤗

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found