How to access the canister frontend?

If been deploying my application on Tungsten just now (yayyyy :partying_face:) and apart from some small changes to the code everything works like a charm! If been able to call a test function to see the deployment actually worked. What im now wondering is: how can i access the canister frontend?

The username and password provided from the onboarding work on the https://gw.dfinity.network/ website, but concatenating my canister id to it like https://gw.dfinity.network:8000/?canisterId=ic:1D000000000000000100000000000000000114 doesn’t work unfortunately. Can we access the canister frontend atm?

1 Like

Hi @cryptoschindler! We are working on a longer-term fix for the public release of 0.6.0, but try this for now:

CANISTER_ID.ic0.app, where CANISTER_ID is the number version only without the checksum.

So canister ID ic:0100000000000000000000000000000000012D becomes 010000000000000000000000000000000001.ic0.app

2 Likes

thanks! opening https://1d0000000000000001000000000000000001.ic0.app/ works, but now i receive an error saying
An error happened: t.makeActorFactory/

1 Like

@cryptoschindler you should now be able to access the frontend without the truncated canister ID, just your_full_canisterID.ic0.app without the ic: prefix. Just got it working with hello :slight_smile:

2 Likes

I get this error also, did you manage to get it working?

Maybe double check you’ve run the canister install step as well as dfx build?

I ran those and didn’t get any errors. They ran and looked like they worked (both build and install). I’m still getting the error after retrying. Did this happen to you?

This is what I get in my terminal:

% dfx build --provider https://gw.dfinity.network
Building canisters...
% dfx canister --provider https://gw.dfinity.network install --all --mode reinstall
Installing code for canister project_open_science, with canister_id ic:0C0000000000000000000000000000000001F8
%

Then in my browser:

Does this look alright?

3 Likes

Ah good catch, so the canisters are now split into two in this version, with a second one for the frontend suffixed “_assets”, you should see the ids for both on installation and the assets one is the id you’ll need to use to access the frontend in a browser.

2 Likes

You can find it in a couple of places without reinstalling btw, run dfx canister id <canister name>_assets or look in canisters/canister_manifest.json

2 Likes

Hi All,

Now when I try viewing my frontend, I get this error:

An error happened:
Error: Query failed:
  Status: rejected
  Message: IC0302: Canister ic:0C0000000000000000000000000000000001F8 has no query method 'retrieve'

    at Object.d. [as retrieve] (https://0c0000000000000000000000000000000001f8.ic0.app/bootstrap.js:2:49292)
    at async _loadJs (https://0c0000000000000000000000000000000001f8.ic0.app/bootstrap.js:2:196332)
    at async _main (https://0c0000000000000000000000000000000001f8.ic0.app/bootstrap.js:2:197223)

I can’t seem to wrap my head around this one.

1 Like

I think that might be the same error as above actually, try the assets canister instead?

1 Like

Hmm, I’m looking in my assets canister and in the index.js, there is a canister id, but its the same as this Id. Is that right? If not, how can I reinstall from scratch?

Edit: actually, it’s a little odd. Most times when I try to load the frontend, I get the An error happened: t.makeActorFactory/ error. But sometimes it just hangs. But I’m wondering if it’s something to do with my connection requests, because often when I call a comman, I get reqwest errors, where I’ll have to try again or log back in. Maybe the two are linked?

1 Like

Is this the id for the _assets canister in the canisters/canister_manifest.json file?

1 Like

Ahh ok, I think I have my issue. I can’t install the frontend. I’m getting npm errors. Something to do with webpack. Not seen this before, and not too sure what to do next

1 Like

So the error shows up when you build? The npm output is a bit crowded but a few lines up it should tell you what the problem was.

1 Like

I’ll give it a run later and show you the output, if that’s alright? It is crowded as you said, and I’m struggling to make sense of it at the moment.

1 Like

Of course, no problem.

1 Like

Hey Ori,

Thanks for offering to take a look, I’ve been a bit baffled with it today, hopefully you can make some sense of it!

edit: I may have sorted it, just going to run some checks. I’ll let you know if it happens again!

2 Likes

Hi everyone,

There are indeed 2 canisters now for a default project with frontend (since a frontend is optional); a regular Motoko canister, and an “asset” canister which is your frontend canister. So creating a project using dfx new linkedup would give you two canisters:

  1. linkedup canister which contains your backend and a bit of motoko logic (by default the greet method which does Hello, name).
  2. linkedup_assets canister which takes the output of the webpack compilation and stores it into a canister. This canister has 2 methods; store and retrieve. On bootstrap now we call retrieve("index.js") on the canister which ID is in the address bar (CANISTER_ID.ic0.app).

So the canister ID in the address bar (the CANISTER_ID in CANISTER_ID.ic0.app) is the one that we try to load the index.js from. This is meant to be the asset canister in your project.

When creating or installing those 2 canisters (or more) you’ll see both IDs out. You should use the canister ID of the asset canister you wish to use as frontend. This is different than before, where a canister contained both assets and backend.

Hope this helps!

4 Likes

@Ori, @hansl, thank you both for clearing that up. Definitely feels more intuitive and easier to keep track of.

2 Likes