appIndex and monorepos

[jimsimon]

I'm trying to use the following config for my app and noticed that the appIndex setting doesn't seem to work when setting rootDir to ../../:

import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import rollupCommonjs from '@rollup/plugin-commonjs';

const commonjs = fromRollup(rollupCommonjs);

export default {
  nodeResolve: true,
  appIndex: `packages/ui/src/index.html`,
  rootDir: '../../',
  debug: true,
  plugins: [
    esbuildPlugin({ ts: true }),
    commonjs({
      include: [
        '../../node_modules/fast-json-stable-stringify/index.js',
        '../../node_modules/zen-observable/**/*'
      ]
    })
  ],
};

I've tried using an absolute path and various relative paths (src/index.html, ../../packages/ui/src/index.html) with no success.

[LarsDenBakker]

The app index should be within the scope of the root directory. When it's a relative path, it's evaluated relative to the current working directory. What do you mean by it's not working? Where is it failing?

[steve2507]

Having stumbled upon the same issue; @jimsimon the appIndex is a relative path to your index.html. As a result, just src/index.html should suffice, or add a leading slash to your appIndex path.
After that the app should be available at http://localhost:8000/packages/ui/src/, and anything you add to the path after that will return the same index.html.

[jimsimon]

I've been meaning to circle back to this issue, but that's what I was seeing as well. I was expecting the underlying server to set the serving root to the parent folder of index.html so that just visiting http://localhost:8000 would work.

I also recall running into an issue where I explicitly had to add index.html to the url (i.e. http://localhost:8000/packages/ui/src/index.html) which then caused issues with client-side routing iirc.

[btelles]

I've identified a possible culprit, but the tool may be working as intended.

My directory structure:

project
  - packages
    - core
      - ... 
    - example
      - dev
        - index.html
      web-dev-server.config.js 

file web-dev-server.config.js

import { legacyPlugin } from "@web/dev-server-legacy";

export default {
  nodeResolve: true,
  preserveSymlinks: true,
  appIndex: "dev/index.html",
  debug: true,
  rootDir: "../../",
  plugins: [
    legacyPlugin({
      polyfills: {
        // Manually imported in index.html file
        webcomponents: false
      }
    })
  ]
};

Navigating to localhost:8000 results in a 404 not found error.

This happens because this line returns true.

 // ctx.url = '/';
 // appIndexBrowserPathPrefix = '/packages/example/dev';

    if (!ctx.url.startsWith(appIndexBrowserPathPrefix)) {
      return next();
    }

As a user of the tool, I'm expecting localhost:8000 to fallback to the index file, not continue processing (which results in a 404).

It seems to me that the conditional can be removed and the application will behave as I expect, but I'm not sure if I'm missing the purpose of the conditional in the first place.
@LarsDenBakker any thoughts?