Deno Example Error

[reggi]

Hey are the docs missing a build step for deno?

LiveViewJS Express is listening on port 9001!
GET http://localhost:9001/ - 2022-10-09T05:08:00.606Z
GET http://localhost:9001/favicon.ico - 2022-10-09T05:08:01.161Z
GET http://localhost:9001/counter - 2022-10-09T05:08:09.683Z
GET http://localhost:9001/js/index.js - 2022-10-09T05:08:09.703Z
[uncaught application error]: NotFoundError - No such file or directory (os error 2), stat 'public/js/index.js'

request: { url: "http://localhost:9001/js/index.js", method: "GET", hasBody: false }
response: { status: 404, type: undefined, hasBody: false, writable: true }

    at createHttpError (https://deno.land/x/[email protected]/httpError.ts:128:10)
    at send (https://deno.land/x/[email protected]/send.ts:279:13)
    at async file:///Users/thomasreggi/Documents/GitHub/liveviewjs/packages/deno/src/example/index.ts:82:3
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async file:///Users/thomasreggi/Documents/GitHub/liveviewjs/packages/deno/src/deno/server.ts:117:11
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)
    at async file:///Users/thomasreggi/Documents/GitHub/liveviewjs/packages/deno/src/example/index.ts:58:3
    at async dispatch (https://deno.land/x/[email protected]/middleware.ts:41:7)

nothing happens when I click the counter buttons

[floodfx]

Hey thanks for submitting the issue! The bug is in the documentation (which I will fix). Try running:
deno run --allow-run --allow-read --allow-env src/example/autorun.ts

This command runs the server and uses ESBuild to build (continuously) the client code.

LMK if this works for you. Sorry about that.

[reggi]

Hey just tried this new command, other issues arrose:

deno run --allow-run --allow-read --allow-env --allow-net src/example/autorun.ts
Watcher Process started.
✘ [ERROR] Could not resolve "nprogress"

    src/client/index.ts:2:22:
      2 │ import NProgress from "nprogress";
        ╵                       ~~~~~~~~~~~

  You can mark the path "nprogress" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "phoenix"

    src/client/index.ts:3:23:
      3 │ import { Socket } from "phoenix";
        ╵                        ~~~~~~~~~

  You can mark the path "phoenix" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "phoenix_html"

    src/client/index.ts:4:7:
      4 │ import "phoenix_html";
        ╵        ~~~~~~~~~~~~~~

  You can mark the path "phoenix_html" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "phoenix_live_view"

    src/client/index.ts:5:37:
      5 │ import { LiveSocket, ViewHook } from "phoenix_live_view";
        ╵                                      ~~~~~~~~~~~~~~~~~~~

  You can mark the path "phoenix_live_view" as external to exclude it from the bundle, which will
  remove this error.

error: Uncaught (in promise) Error: Build failed with 4 errors:
src/client/index.ts:2:22: ERROR: Could not resolve "nprogress"
src/client/index.ts:3:23: ERROR: Could not resolve "phoenix"
src/client/index.ts:4:7: ERROR: Could not resolve "phoenix_html"
src/client/index.ts:5:37: ERROR: Could not resolve "phoenix_live_view"
    {
      detail: undefined,
      id: "",
      location: {
        column: 22,
        file: "src/client/index.ts",
        length: 11,
        line: 2,
        lineText: 'import NProgress from "nprogress";',
        namespace: "",
        suggestion: ""
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "nprogress" as external to exclude it from the bundle, which will remove this ...'
        }
      ],
      pluginName: "",
      text: 'Could not resolve "nprogress"'
    }
    {
      detail: undefined,
      id: "",
      location: {
        column: 23,
        file: "src/client/index.ts",
        length: 9,
        line: 3,
        lineText: 'import { Socket } from "phoenix";',
        namespace: "",
        suggestion: ""
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "phoenix" as external to exclude it from the bundle, which will remove this er...'
        }
      ],
      pluginName: "",
      text: 'Could not resolve "phoenix"'
    }
    {
      detail: undefined,
      id: "",
      location: {
        column: 7,
        file: "src/client/index.ts",
        length: 14,
        line: 4,
        lineText: 'import "phoenix_html";',
        namespace: "",
        suggestion: ""
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "phoenix_html" as external to exclude it from the bundle, which will remove th...'
        }
      ],
      pluginName: "",
      text: 'Could not resolve "phoenix_html"'
    }
    {
      detail: undefined,
      id: "",
      location: {
        column: 37,
        file: "src/client/index.ts",
        length: 19,
        line: 5,
        lineText: 'import { LiveSocket, ViewHook } from "phoenix_live_view";',
        namespace: "",
        suggestion: ""
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "phoenix_live_view" as external to exclude it from the bundle, which will remo...'
        }
      ],
      pluginName: "",
      text: 'Could not resolve "phoenix_live_view"'
    }
  let error = new Error(`${text}${summary}`);
              ^
    at failureErrorWithLog (https://deno.land/x/[email protected]/mod.js:1546:15)
    at https://deno.land/x/[email protected]/mod.js:1004:28
    at https://deno.land/x/[email protected]/mod.js:949:67
    at buildResponseToResult (https://deno.land/x/[email protected]/mod.js:1002:7)
    at https://deno.land/x/[email protected]/mod.js:1114:14
    at responseCallbacks.<computed> (https://deno.land/x/[email protected]/mod.js:651:9)
    at handleIncomingPacket (https://deno.land/x/[email protected]/mod.js:706:9)
    at readFromStdout (https://deno.land/x/[email protected]/mod.js:627:7)
    at https://deno.land/x/[email protected]/mod.js:1828:11

[reggi]

needed to run npm install in the deno folder, maybe switch to npm: prefix?

[floodfx]

I'll add the fact that you need to run npm install before running the deno examples. Thanks!

[ghost]

running deno run --allow-run --allow-read --allow-env src/example/autorun.ts gives the following error

⚠️  ┌ Deno requests net access to "registry.npmjs.org".
   ├ Requested by `fetch()` API
   ├ Run again with --allow-net to bypass this prompt.
   └ Allow? [y/n] (y = yes, allow; n = no, deny) > Watcher Process started.
LiveViewJS (Deno) is listening at: http://localhost:9001

while the counter is still not working.

After adding the required additional permision the command becomes deno run --allow-run --allow-read --allow-env --allow-net src/example/autorun.ts returns the next error

Watcher Process started.
LiveViewJS (Deno) is listening at: http://localhost:9001
⚠️  ┌ Deno requests write access to "/home/<user>/.cache/esbuild/bin".
   ├ Requested by `Deno.mkdir()` API
   ├ Run again with --allow-write to bypass this prompt.
   └ Allow? [y/n] (y = yes, allow; n = no, deny)

In the end, the full command that worked for me without errors in the cli and examples functioning as expected was deno run --allow-run --allow-read --allow-write --allow-net --allow-env src/example/autorun.ts.

[floodfx]

Thanks for sending this. I will update the README.