DevTools fail to show source files for SourceMap

[TipTopSailor]

Trying out the web-livereload example on windows and getting following error while trying to browse source code from DevTools

Could not load content for http://localhost:8181/src/app.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Do you know what changes are required to config or serve-http to enable linking source files

[Max Krieger]

My workaround is:

  require("serve-http").createServer({
    port: 3000,
    pubdir: ".",
    indexFilename: "index-estrella.html"
  });

where index-estrella.html is a copy of docs/index.html located in the parent directory and its script tag refers to docs/app.js instead of app.js.

Chrome needs HTTP access to src/, which is why the existing approach fails, since it only serves doc/.

also: for symlinked/monorepo stuff that uses estrella, make sure to use sourcemaps: "inline" (make sure no .map files exist in that case!). Or try sourcesContent: true (doesn't seem to really work atm)

[Rasmus]

This happens since the web server in the web-livereload example is serving a subdirectory, "outside" the source directory (which is why you get a 404; the files simply do not exist from the web server's perspective.) To "fix" this you simply need to either run the web server from a parent directory where the source code is or copy the source code into the directory your web server is serving (docs/ in the case of the web-livereload example.)

Here's a pretty simple solution for the web-livereload example:

$ cd examples/web-livereload
$ npm install -D fs-extra  # for its "copy directory tree" function
$ #edit build.js

build.js

const { build, cliopts } = require("estrella")
const Path = require("path")
const fse = require('fs-extra')  // <- NEW ADDITION

build({
  outfile: "docs/app.js",
  bundle: true,
  sourcemap: true,
  onEnd: () => fse.copy('src', 'docs/src', {overwrite:true}),   // <- NEW ADDITION
})

// Run a local web server with livereload when -watch is set
cliopts.watch && require("serve-http").createServer({
  port: 8181,
  pubdir: Path.join(__dirname, "docs"),
})

[Rasmus]

@maxkrieger Or try sourcesContent: true (doesn't seem to really work atm)

This has recently been fixed and will be included with the next release :-)

[Rasmus]

Closing this since it's not a bug