404 File Not Found: apps/my-app/www

[luchsamapparat]

There still seems to be an issue with the dist path when serving an app.

Steps for Reproduction

npm i create-nx-workspace@latest -g

create-nx-workspace playground-stencil

   ? What to create in the new workspace
   > empty
   ? CLI to power the Nx workspace
   > Nx
   ? Use the free tier of the distributed cache provided by Nx Cloud?
   > No

cd playground-stencil

npm install @nxext/stencil --save

nx g @nxext/stencil:app my-app

npm start my-app

Here's a project setup with the exact steps as described above:
https://github.com/luchsamapparat/nx-workspace-stencil-404-issue

Note: When first starting the app, the build failed with an error: TypeScript: Duplicate identifier 'IteratorResult'. I fixed that by updating @types/node to ~12.0.0 to match my local Node version.

Expected
The app running in my browser.

Actual

404 File Not Found
Url: /
File: {...}/playground-stencil/apps/my-app/www

For some reason the dev-server tries to serve apps/my-app/www instead of dist/apps/my-app/www.

Dependency Versions

@nrwl/workspace: 10.0.7
@nxext/stencil: 1.1.0
@stencil/core: 1.16.3

[luchsamapparat]

This is the config passed to runTask at stencil-runtime.ts:247

Config

{
  globalStyle: '{...}/playground-stencil/apps/my-app/src/global/app.scss',
  globalScript: '{...}/playground-stencil/apps/my-app/src/global/app.ts',
  taskQueue: 'async',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null,
      baseUrl: 'https://.local/',
      dir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www',
      appDir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www',
      buildDir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build',
      indexHtml: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\index.html',
      empty: true,
      polyfills: true
    },
    {
      type: 'dist-lazy',
      dir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build',
      esmDir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build',
      systemDir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build',
      systemLoaderFile: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build\\app.js',
      polyfills: true,
      isBrowserBuild: true
    },
    {
      type: 'copy',
      dir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build',
      copyAssets: 'dist'
    },
    {
      type: 'copy',
      dir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www',
      copy: [Array]
    },
    {
      type: 'dist-global-styles',
      file: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app\\www\\build\\app.css'
    }
  ],
  plugins: [
    {
      name: 'sass',
      pluginType: 'css',
      transform: [Function: transform]
    }
  ],
  configPath: '{...}/playground-stencil/apps/my-app/stencil.config.ts',
  flags: {
    task: 'build',
    args: [ '--serve', '--watch' ],
    knownArgs: [ '--serve', '--watch' ],
    unknownArgs: [],
    build: null,
    cache: null,
    checkVersion: null,
    ci: null,
    compare: null,
    debug: null,
    dev: null,
    devtools: null,
    docs: null,
    e2e: null,
    es5: null,
    esm: null,
    headless: null,
    help: null,
    log: null,
    open: null,
    prerender: null,
    prerenderExternal: null,
    prod: null,
    profile: null,
    serviceWorker: null,
    screenshot: null,
    serve: true,
    skipNodeCheck: null,
    spec: null,
    stats: null,
    updateScreenshot: null,
    verbose: null,
    version: null,
    watch: true,
    address: null,
    config: null,
    docsJson: null,
    emulate: null,
    logLevel: null,
    root: null,
    screenshotConnector: null,
    maxWorkers: null,
    port: null
  },
  rootDir: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\dist\\apps\\my-app',
  sys: {
    name: 'node',
    version: '12.16.2',
    access: [Function: access],
    accessSync: [Function: accessSync],
    addDestory: [Function: addDestory],
    removeDestory: [Function: removeDestory],
    checkVersion: [AsyncFunction: checkVersion],
    copyFile: [Function: copyFile],
    createWorkerController: [Function: createWorkerController],
    destroy: [AsyncFunction: destroy],
    dynamicImport: [Function: dynamicImport],
    encodeToBase64: [Function: encodeToBase64],
    ensureDependencies: [AsyncFunction: ensureDependencies],
    ensureResources: [AsyncFunction: ensureResources],
    exit: [Function: e],
    getCurrentDirectory: [Function: getCurrentDirectory],
    getCompilerExecutingPath: [Function: getCompilerExecutingPath],
    getDevServerExecutingPath: [Function: getDevServerExecutingPath],
    getEnvironmentVar: [Function: getEnvironmentVar],
    getLocalModulePath: [Function: getLocalModulePath],
    getRemoteModuleUrl: [Function: getRemoteModuleUrl],
    glob: [Function: asyncGlob],
    hardwareConcurrency: 8,
    isSymbolicLink: [Function: isSymbolicLink],
    mkdir: [Function: mkdir],
    mkdirSync: [Function: mkdirSync],
    nextTick: [Function: nextTick],
    normalizePath: [Function: normalizePath],
    onProcessInterrupt: [Function: onProcessInterrupt],
    platformPath: {
      resolve: [Function: resolve],
      normalize: [Function: normalize],
      isAbsolute: [Function: isAbsolute],
      join: [Function: join],
      relative: [Function: relative],
      toNamespacedPath: [Function: toNamespacedPath],
      dirname: [Function: dirname],
      basename: [Function: basename],
      extname: [Function: extname],
      format: [Function: bound _format],
      parse: [Function: parse],
      sep: '\\',
      delimiter: ';',
      win32: [Circular],
      posix: [Object],
      _makeLong: [Function: toNamespacedPath]
    },
    readdir: [Function: readdir],
    readdirSync: [Function: readdirSync],
    readFile: [Function: readFile],
    readFileSync: [Function: readFileSync],
    realpath: [Function: realpath],
    realpathSync: [Function: realpathSync],
    rename: [Function: rename],
    resolvePath: [Function: resolvePath],
    rmdir: [Function: rmdir],
    rmdirSync: [Function: rmdirSync],
    stat: [Function: stat],
    statSync: [Function: statSync],
    tmpdir: [Function: tmpdir],
    unlink: [Function: unlink],
    unlinkSync: [Function: unlinkSync],
    writeFile: [Function: writeFile],
    writeFileSync: [Function: writeFileSync],
    generateContentHash: [Function: generateContentHash],
    copy: [AsyncFunction: nodeCopyTasks],
    details: {
      cpuModel: 'Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz',
      freemem: [Function: freemem],
      platform: 'windows',
      release: '10.0.18363',
      totalmem: 16907509760
    },
    lazyRequire: NodeLazyRequire {
      nodeResolveModule: [NodeResolveModule],
      lazyDependencies: [Object],
      moduleData: Map {}
    },
    watchTimeout: 80,
    events: {
      emit: [Function: emit],
      on: [Function: on],
      unsubscribeAll: [Function: unsubscribeAll]
    },
    watchDirectory: [Function],
    watchFile: [Function]
  },
  devMode: false,
  extras: {
    appendChildSlotFix: false,
    cloneNodeFix: false,
    cssVarsShim: true,
    dynamicImportShim: true,
    lifecycleDOMEvents: false,
    safari10: true,
    scriptDataOpts: true,
    shadowDomShim: true,
    slotChildNodesFix: false,
    initializeNextTick: true,
    tagNameTransform: false
  },
  minifyCss: true,
  minifyJs: true,
  sourceMap: false,
  watch: true,
  buildEs5: true,
  buildDocs: true,
  buildDist: true,
  profile: false,
  writeLog: false,
  buildAppCore: true,
  autoprefixCss: true,
  validateTypes: true,
  allowInlineScripts: true,
  hashFileNames: true,
  hashedFileNameLength: 8,
  namespace: 'App',
  fsNamespace: 'app',
  srcDir: '{...}/playground-stencil/apps/my-app/src',
  cacheDir: '{...}/playground-stencil/apps/my-app/.stencil',
  srcIndexHtml: '{...}/playground-stencil/apps/my-app/src/index.html',
  packageJsonFilePath: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\apps\\my-app\\package.json',
  rollupPlugins: { before: [] },
  rollupConfig: { inputOptions: {}, outputOptions: {} },
  devServer: {
    address: '0.0.0.0',
    port: 3333,
    reloadStrategy: 'hmr',
    gzip: true,
    openBrowser: true,
    websocket: true,
    protocol: 'http',
    historyApiFallback: { index: 'index.html', disableDotRule: false },
    logRequests: false,
    root: 'C:\\Users\\u150367\\Projekte\\playground-stencil\\apps\\my-app\\www',
    basePath: '/',
    excludeHmr: [],
    experimentalDevModules: false
  },
  testing: {},
  hydratedFlag: {
    name: 'hydrated',
    selector: 'class',
    property: 'visibility',
    initialValue: 'hidden',
    hydratedValue: 'inherit'
  },
  bundles: [],
  copy: [],
  maxConcurrentWorkers: 8,
  devInspector: false,
  enableCache: true,
  logLevel: 'info',
  logger: {
    enableColors: [Function: enableColors],
    emoji: [Function: emoji],
    getLevel: [Function: getLevel],
    setLevel: [Function: setLevel],
    debug: [Function: debug],
    info: [Function: info],
    warn: [Function: warn],
    error: [Function: error],
    createTimeSpan: [Function: createTimeSpan],
    printDiagnostics: [Function: printDiagnostics],
    red: [Function: c],
    green: [Function: green],
    yellow: [Function: u],
    blue: [Function: blue],
    magenta: [Function: magenta],
    cyan: [Function: h],
    gray: [Function: gray],
    bold: [Function: d],
    dim: [Function: p],
    bgRed: [Function: m],
    setLogFilePath: [Function: setLogFilePath],
    writeLogs: [Function: writeLogs],
    createLineUpdater: [AsyncFunction]
  },
  tsconfig: '{...}/playground-stencil/apps/my-app/tsconfig.json',
  tsCompilerOptions: null
}

config.rootDir points to dist, but config.devServer.root refers to the apps path. When I hack the dist path into that property, it fails with the error from #50

Job Output failed to validate. Errors:
  Data path ".error" should be string.

So it seems that gets me a step further :-)

EDIT: And as the extensions does not support Nx 10 yet, which I just noticed, that seems to be fine 😁

[luchsamapparat]

Curiously, with the fixed @nxext/stencil from the PR it even works with Nx 10 🤔