The quick start hello sample is straightforward and works as expected, but I’m running into issues when trying accessing it from the browser, at least in my environment.
What I did:
~/projects $ cd hello/
~/projects/hello $ npm install
npm WARN hello@0.1.0 No repository field.
npm WARN hello@0.1.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
audited 5457 packages in 1.859s
7 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
~/projects/hello $ dfx build
Building canister hello
Building frontend
Bundling frontend assets in the canister
~/projects/hello $ dfx start --background
⠁ Starting up the client...
Apr 12 03:28:59.324 INFO Dfinity Replica Started
Apr 12 03:28:59.324 INFO Existing node ID: 15906094607276922983
client address: "http://localhost:34789"
binding to: V4(127.0.0.1:8000)
client(s): http://localhost:34789/
Apr 12 03:28:59.325 INFO Using path '/home/admin/projects/hello/.dfx/state/replicated_state' to manage local state, StateManager: 1
Apr 12 03:28:59.326 INFO ConnManager: node_id = 15906094607276922983, node_ip = "127.0.0.1", Application: TransportConnectionMgr
Internet Computer client started...
~/projects/hello $ dfx canister install --all
Installing code for canister hello, with canister_id ic:3CB94E949D868FF0D0
Apr 12 03:29:45.413 INFO Successfully inserted an ingress message into IngressPool, Application: ArtifactPool
Apr 12 03:29:46.361 INFO Created checkpoint @93 in 492.183µs, StateManager: 1
~/projects/hello $ dfx canister call hello greet "there" --type string
Apr 12 03:29:53.620 INFO Successfully inserted an ingress message into IngressPool, Application: ArtifactPool
Apr 12 03:29:54.146 INFO Created checkpoint @109 in 5.132263ms, StateManager: 1
("Hello, there!")
So far so good, but how calling the method greet from a browser? I tried this:
~/projects/hello $ curl -v http://127.0.0.1:8000/candid?canisterId=ic:3CB94E949D868FF0D0
* Trying 127.0.0.1:8000...
* TCP_NODELAY set
* Connected to 127.0.0.1 (127.0.0.1) port 8000 (#0)
> GET /candid?canisterId=ic:3CB94E949D868FF0D0 HTTP/1.1
> Host: 127.0.0.1:8000
> User-Agent: curl/7.68.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< content-length: 337
< etag: "df79d5:151:1:0"
< accept-ranges: bytes
< content-type: text/html
< last-modified: Thu, 01 Jan 1970 00:00:01 GMT
< content-disposition: inline; filename="index.html"
< date: Sun, 12 Apr 2020 03:30:19 GMT
<
<html>
<head>
<meta charset="UTF-8">
<title>DFINITY Canister Candid UI</title>
</head>
<body>
<app id="app">
<h1 id="title">Service</h1>
<div>
This service has the following methods:
<ul id="methods">
</ul>
</div>
</app>
<script type="text/javascript" src="../index.js"></script></body>
</html>
* Connection #0 to host 127.0.0.1 left intact
HTTP RC is 200, but the returned HTML doesn’t seem to be right; the methods list is empty and the progress continues to be Loading…; am I missing something?
Thanks @Ori, I guess the subject line is misleading; I apologize, I’ll change it. The problem is a different one; using those URLs doesn’t return the expected HTML.
After giving this some more thoughts, I was thinking that because the node was started in background I might miss out on some error logging, so I started the node again:
~/projects/hello $ dfx -v start
⠁ Starting up the client...
Apr 12 18:03:28.008 INFO Dfinity Replica Started
Apr 12 18:03:28.008 INFO Existing node ID: 6105257025598759955
client address: "http://localhost:34051"
Apr 12 18:03:28.009 INFO Using path '/home/admin/projects/hello/.dfx/state/replicated_state' to manage local state, StateManager: 1
binding to: V4(127.0.0.1:8000)
⠉ Client bound at 34051
⠚ Client bound at 34051
Apr 12 18:03:28.282 INFO Recovered checkpoint @97 in 273.599291ms, StateManager: 1
Apr 12 18:03:28.283 INFO ConnManager: node_id = 6105257025598759955, node_ip = "127.0.0.1", Application: TransportConnectionMgr
Apr 12 18:03:28.283 INFO ConnManager::init_client(): client_type = P2P, Application: TransportConnectionMgr
Internet Computer client started...
Everything seems fine, but the HTML returned still shows Loading…:
That does actually look like the expected html output to me, the ul and app tags are populated by javascript later on (again curl won’t execute the javascript I shouldn’t think).
So you’re getting the same “Loading…” message in a GUI browser like chrome with javascript enabled?
As you might have guessed, I was using curl (and a text browser that actually supports JS) because the system I’m using doesn’t have a window manager running. Apparently, that’s not enough, one need a modern web browser to execute the client-side JS.
Accessing the URL from a remote, Chromium-based browser resulted in error:
An error happened:
TypeError: Cannot read property 'digest' of undefined
at f (http://192.168.115.2:8000/index.js:2:60223)
at h (http://192.168.115.2:8000/index.js:2:60388)
at http://192.168.115.2:8000/index.js:2:60619
at Array.map ()
at Object.t.requestIdOf (http://192.168.115.2:8000/index.js:2:60594)
at a (http://192.168.115.2:8000/index.js:2:107688)
at http://192.168.115.2:8000/index.js:2:142405
at async t.HttpAgent.read (http://192.168.115.2:8000/index.js:2:141039)
at async _loadJs (http://192.168.115.2:8000/index.js:2:88876)
at async _main (http://192.168.115.2:8000/index.js:2:89971)
I haven’t figured out jet why that happens, but switching to Firefox resulted in the expected rendering of the page. Seems like it is time for me considering switching the browser…
No problem samoht. There’s still plenty of scope for you to build IC services, which don’t need a front end.
If your environment has node installed and you don’t want dfx to build the front end, you can run dfx build --skip-frontend, or just remove/rename the package.json file in your project.
Re digest, the browser might be lacking support for something there, but it could be worth you contacting support@dfinity.org with this and letting them know which browser it is.