Index.html can not be omitted when serving multiple files #1315

tamuraryoya · 2018-05-07T10:35:00Z

🐛 bug report

When bundling and serve multiple entry files, / index.html can not be accessed with localhost:1234/

However, you can access it with localhost: 1234 / index.html

🎛 Configuration (.babelrc, package.json, cli command)

//- src/index.pug
h1 hello world!

//- src/sub.pug
h1 sub page!

$ parcel 'src/**/*.pug'

🤔 Expected Behavior

When accessing localhost:1234/, "hello world!" is displayed

😯 Current Behavior

Accessing localhost:1234/ will display empty HTML

<html>
  <head></head>
  <body></body>
</html>

However, accessing localhost: 1234 / index.html will display the page correctly

💁 Possible Solution

I do not know, but when accessed with / we have to make sure to check the existence of / index.html

🌍 Your Environment

Software	Version(s)
Parcel	v1.8.1
Node	v8.11.1
npm/Yarn	v6.0.0/v1.5.1
Operating System	MacBook Pro (High Sierra)

The text was updated successfully, but these errors were encountered:

DeMoorJasper · 2018-05-07T11:03:11Z

This is because it currently checks for an entrypoint and multiple entrypoints works with a html entrypoint thats being created in the background as a main asset to link all assets to.

This is an empty file and therefore it shows you that file as mainasset

_{Sent with GitHawk}

tamuraryoya · 2018-05-07T14:20:11Z

Thank you!

This was a specification
Will this be fixed?

lucaseverett · 2018-07-05T13:17:11Z

It would be helpful to have index.html served from / and any other entry points served without .html.

So, page1.html would be resolved by visiting /page1.

Is there a way to create URL rewrites for the server locally in a project?

DeMoorJasper · 2018-07-05T13:24:20Z

@lucaseverett This is unrelated to the issue, but I'm fairly sure there is already an issue concerning this. It's currently not possible, feel free to open a PR to implement this, it should be fairly easy to do this

MathieuLoutre · 2018-07-23T17:39:22Z

I've got a working solution for this (as explained in #1778) and can PR if this is agreeable.

Essentially, it enhances the respond method by looking for indexes (with a method replacing sendIndex called findIndex), looking for the main bundle as it does now, failing that looking for an HTML file called index.html.

 function respond() {
      let {pathname} = url.parse(req.url);
      if (bundler.error) {
        return send500(bundler.error);
      } else if (
        !pathname.startsWith(bundler.options.publicURL) ||
        path.extname(pathname) === ''
      ) {
        const index = findIndex(pathname)
        if (index) {
          req.url = `/${path.basename(index)}`;
          serve(req, res, send404);
        }
        else {
          send404();
        }
      } else {
        // Otherwise, serve the file from the dist folder
        req.url = pathname.slice(bundler.options.publicURL.length);
        return serve(req, res, send404);
      }
    }

    function findIndex(pathname) {
     // If the bundle is HTML, send that
      if (bundler.mainBundle.type === 'html') {
        return bundler.mainBundle.name;
      }
      else if (pathname === bundler.options.publicURL) {
        // if the pathname is empty, look for files named index.html in the bundle and send back the first one. If there's nothing, return null;
        const indexes = Array.from(bundler.mainBundle.childBundles).filter((asset) => path.basename(asset.name) === 'index.html');
        return indexes[0].name;
      }
      return null;
    }

pbastowski · 2018-09-30T12:44:43Z

Has there been any progress on this issue? It is a very useful feature.

LuudJanssen · 2018-11-26T15:16:57Z

Started working on a pull request for this issue

I'm experiencing some test errors, which I asked about on Spectrum. Once those are resolved I can add the pull request. It is using @MathieuLoutre's fix (here) and not setting index to true as suggested here if that would be the better option I can change that in the PR, the tests for it stay the same.

ideoclickVanessa · 2019-01-21T21:06:53Z

FWIW: This issue also occurs when you just have a single .tsx entry point (parcel src/index.tsx) as well

bichotll · 2019-03-27T10:34:25Z

Same happened here when parcel *.html.

That actually confused my colleague and thought the computer was under the weather lol
It would be nice to solve this issue. It would avoid any confusion in the future.

aldovincenti · 2019-06-10T00:13:28Z

Is there any news on this issue?

mismith · 2019-07-02T21:54:20Z

Looks like lots of people requesting this feature, any word on whether there's even a workaround to solve this?

elisei-timofte · 2019-07-19T05:41:10Z

Same here. Any updates?

shaunakv1 · 2019-08-12T06:09:31Z

Same here, just ran into this, with the whole team confused as to what happened, when the second entry point was first added.

bgschiller · 2019-08-21T15:58:17Z

In the meantime, I have this workaround set up:

// run-parcel.js
const Bundler = require('parcel-bundler');
const express = require('express');

const bundler = new Bundler(['src/index.html', 'src/login.html', 'src/logout.html']);
const app = express();

app.get('/', (req, res, next) => {
  req.url = '/index.html';
  app._router.handle(req, res, next);
});

app.use(bundler.middleware());

const port = Number(process.env.PORT || 1234);
app.listen(port);
console.log(`listening at http://localhost:${port}`);

then run node run-parcel.js instead of parcel src/*.html.

hanabi1224 · 2020-01-11T02:46:49Z

Looking forward to this feature!

See: parcel-bundler/parcel#1315

johnagan · 2020-07-28T16:19:58Z

I ended up writing a local plugin as a bandaid, until we get a legit fix. It uses the same modules included in Parcel v1. Only gotcha is you have to use the watch command to trigger it. Here's an example of what it looks like - ymmv:

Running

parcel watch [entries] --serve
parcel watch [entries] --serve --open

Plugin Code

const serveStatic = require("serve-static"); // included in parcel v1
const { createServer } = require("http");

module.exports = (bundler) => {
  let server = null; // prevent from restarting on rebundle
  const openBrowser = process.argv.includes("--open");
  const useServer = process.argv.includes("--serve");

  bundler.on("bundled", () => {
    if (useServer && !server && bundler.options.watch) {      
      server = startServer(bundler.options.outDir, 8080, openBrowser);
    }
  });
}

function startServer(outDir, port, openBrowser) {
  const serve = serveStatic(outDir, { extensions: ["html"] });

  // 404 handler
  const redirect = (res) => {
    res.writeHead(302, { Location: "/404" });
    res.end();
  };

  // request handler
  const handler = (req, res) => {
    serve(req, res, () => redirect(res));
  };

  // start server
  return createServer(handler).listen(port, () => {
    // optional if you want to open the browser (included in parcel v1)
    if (openBrowser) require("opn")(`http://localhost:${port}`);
  });
}

DeMoorJasper added 🐛 Bug Good First Issue labels May 8, 2018

DeMoorJasper changed the title ~~Index.html can not be omitted when serveing multiple files~~ Index.html can not be omitted when serving multiple files May 12, 2018

DeMoorJasper mentioned this issue Jul 23, 2018

Serve index.html when using multiple entries #1778

Closed

mrcoles mentioned this issue Oct 30, 2018

Serve index.html as root #2215

Closed

LuudJanssen mentioned this issue Dec 17, 2018

Serve index by default #2426

Closed

3 tasks

mischnic mentioned this issue Apr 3, 2019

Parcel 2: V2 Server #2817

Merged

9 tasks

mischnic mentioned this issue May 11, 2019

Cannot access '/' for 'index.html' #3017

Closed

mischnic mentioned this issue Jul 17, 2019

Dev server not working on multiple entries #3236

Closed

aarongarciah mentioned this issue Jul 18, 2019

Enable Parcel multiple entry points aarongarciah/parcel-static-boilerplate#4

Open

jimmyangel mentioned this issue Oct 10, 2019

startup issue jimmyangel/rikitraki#22

Closed

awendt mentioned this issue Oct 21, 2019

Improve dev experience for editing content awendt/familienradwege-website#20

Merged

mischnic mentioned this issue Nov 15, 2019

Support index.html directory indexes when using Serve with multiple entry points #3778

Closed

This was referenced Jan 13, 2020

Add --serve-index parameter #3995

Closed

Add --serve-index option for v2 #3996

Merged

hanabi1224 mentioned this issue Jan 14, 2020

Fix #3599 for v1 #4001

Closed

DeMoorJasper closed this as completed in #3996 Jan 16, 2020

jnicklas mentioned this issue Feb 25, 2020

Replace agent start script with parcel thefrontside/bigtest#171

Closed

pwmarcz added a commit to pwmarcz/autotable that referenced this issue May 16, 2020

Add about page, work around no index.html

3a51716

See: parcel-bundler/parcel#1315

This was referenced Nov 17, 2020

Customisations and Enhancements adobe/aio-cli-plugin-app#320

Merged

fix: https://localhost:9080 404 Not Found in aio app run adobe/aio-cli-plugin-app#324

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Index.html can not be omitted when serving multiple files #1315

Index.html can not be omitted when serving multiple files #1315

tamuraryoya commented May 7, 2018

DeMoorJasper commented May 7, 2018 •

edited

tamuraryoya commented May 7, 2018

lucaseverett commented Jul 5, 2018

DeMoorJasper commented Jul 5, 2018

MathieuLoutre commented Jul 23, 2018

pbastowski commented Sep 30, 2018 •

edited

LuudJanssen commented Nov 26, 2018

ideoclickVanessa commented Jan 21, 2019

bichotll commented Mar 27, 2019

aldovincenti commented Jun 10, 2019

mismith commented Jul 2, 2019

elisei-timofte commented Jul 19, 2019

shaunakv1 commented Aug 12, 2019

bgschiller commented Aug 21, 2019 •

edited

hanabi1224 commented Jan 11, 2020

johnagan commented Jul 28, 2020 •

edited

Index.html can not be omitted when serving multiple files #1315

Index.html can not be omitted when serving multiple files #1315

Comments

tamuraryoya commented May 7, 2018

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🌍 Your Environment

DeMoorJasper commented May 7, 2018 • edited

tamuraryoya commented May 7, 2018

lucaseverett commented Jul 5, 2018

DeMoorJasper commented Jul 5, 2018

MathieuLoutre commented Jul 23, 2018

pbastowski commented Sep 30, 2018 • edited

LuudJanssen commented Nov 26, 2018

ideoclickVanessa commented Jan 21, 2019

bichotll commented Mar 27, 2019

aldovincenti commented Jun 10, 2019

mismith commented Jul 2, 2019

elisei-timofte commented Jul 19, 2019

shaunakv1 commented Aug 12, 2019

bgschiller commented Aug 21, 2019 • edited

hanabi1224 commented Jan 11, 2020

johnagan commented Jul 28, 2020 • edited

Running

Plugin Code

DeMoorJasper commented May 7, 2018 •

edited

pbastowski commented Sep 30, 2018 •

edited

bgschiller commented Aug 21, 2019 •

edited

johnagan commented Jul 28, 2020 •

edited