Problem in Custom Domain to Assets Canister URL

Developers
1

Hello, I have been taking reference from this : Custom Domains | Internet Computer Home

I followed all steps, Cloned repo, then mapped my canister id to custom domain in asked file, then I installed all required packages in service-worker folder, after that on running npm start , I am facing problem :

  1. http://localhost:8080/?canisterId=“my canister id” , i used this url for local , first page of canister is getting loaded , but not serving background image at all.
  2. Also , not supporting route to other pages , Like i have a route [ /news ] , but opeing other pages is routing them to localhost:8080/news, but i guess it should be localhost:8080/canisterId/news, so what am i missing ? (I built this above website using docusaurus, but i dont think it has anything to do with this.)
    Am i doing anything wrong? Also is there anything else , i need to do other then that above Doc page of custom domains ? please provide me some other reference or guidance. Thanks in Advance.
2

This sounds similar to this issue: My hello Dapp is running but i m not getting image and styles on localhost Maybe the ideas there can help you?

I think (I don’t understand much about frontend myself, but I observed similar things in a working project) this is fine. In a project I took over, it always worked even though the canister id disappeared from the URL. Can you see if it works on your live hosted version anyways?

3

I used cloudflare cdn , to host all assets of service worker, (index.html, .js files and .map files), After it get hosted , on opening it , its giving : “Could not find the canister ID.” , although i am putting my canister Id in place of query string in url.

Hence, I was thinking to make it work in Local first, but I am getting this disappearing of canister id on routing to other pages,

4

AFAIU once you have this hosted live you don’t need the canister id in the URL anymore. That would only be needed for the local npm start. Sanity check: you have deployed to the IC and not to your local network, right? This could also be the source for ‘Could not find the canister ID.’

5

yes obviously , I have an assets canister deployed to IC , I can access it using “canisterID.ic0.app”, but I cant use this canister ID, Idk whats wrong with my implementation.

6

Last attempt from my side, I’ll also ping someone that knows more. Is the place you host it at actually the domain you entered in the http_request.ts? I could see a way that the script checks the current domain and therefore it may require an identical string as the hostname.

7

didnt get you!!
Do you mean If i am hosting it in Netlify and got a url as : https://62f10484a304d76d90762f3f--courageous-wisp-ddbfda.netlify.app/

then in http.request.ts : I should have a same domain mapped ? Like this :
‘xyz.netlify.app’: [‘dfvbd-fyaaa-aaaak-aatpq-cai’, ‘ic0.app’] ?

Right now i was mapping it like :
‘xyz.icp’: [‘dfvbd-fyaaa-aaaak-aatpq-cai’, ‘ic0.app’],

PS : I tried this also, still not working.

8

Almost what I meant. If you look at the console of your link, it says

URL "https://62f[...]-ddbfda.netlify.app/" did not resolve to a canister ID.

I speculate that this means that you have to add

'62f[...]-ddbfda.netlify.app': ['<canister id>', 'ic0.app']

to the mappings. And a bit less likely is that it works with

'netlify.app': ['<canister id>', 'ic0.app']

Looking at L28 in the source I would assume that the url has to match exactly.

9

Thank you, it worked.

1 Like
10

Hey, I want to know if we can route two different canisters under same domain name. Is that possible ? I mean something like : civol.app/test → canister1ID.ic0.app and civol.app/ → canister2ID.ic0.app.

11

Replying for @nathan.mcgrath since his account is too new, but he’s best equipped to answer this.

Unfortunately, it’s currently not possible to route multiple canisters on the same domain based on the URL at the DNS or service worker level.It might be possible to do this using sub domains in the service worker, e.g:

  • test.civol.app → canister1ID.ic0.app
  • civol.app → canister2ID.ic0.app

But this has not been tested yet.It might also be possible to be done by creating a “proxy” canister that would receive all requests and then forward requests to the appropriate canister based on the URL.Alternatively it could be achieved using a single canister and a frontend library like this: https://single-spa.js.org/ This would allow multiple frontend apps to be deployed into the same canister and use the url to route to the different apps.

2 Likes
12

Thanks for replying. I tried subdomain thing, and it worked fine. I will have a look at the frontend lib : https://single-spa.js.org/

1 Like
13

I’ve tried to do this in a few different ways. I ran into issues with the following approaches:

  1. Single canister HTTP request entry point to forward to other canisters.

  2. Using DNS (tried CNAME and A record)

    • My domain name was immediately flagged as a phishing website and I almost lost it.
14

what did you tried ? Using subdomain for mapping two different canisters ? Or Routing under same domain ? using subdomain is working for me, i tried tweaking http_request.ts file in service worker folder for custom domain, It was working upto some extent, but was not working fine. So I drop the idea.

15

Hi Paul, can you please elaborate on what you tried to achieve and what happened. Your experience could be very helpful as we are working on supporting custom domains on the IC.

16

Both were pretty naive and didn’t work.

The first thing I tried was setting a CNAME record for git.codebase.org to my raw canister address.

The second thing I did was a Firebase-specific thing for setting up a subdomain which involved setting an A record that pointed to the IP address where I’m hosting the custom service worker.

I tried both of those things in a short period of time so I’m not sure if one or both was the trigger.

I wasn’t able to browse to codebase.org without either DNS providers or browsers blocking the site. Browsers were showing big red warnings and saying things like “This site is deceptive”. DNS providers were redirecting to pages that explicitly mentioned phishing.

Google and OpenDNS both did a review and were satisfied. Comcast/Xfinity have yet to respond.

4 Likes
17

Do you have a description of how you configured your Cloudflare Service Worker? I’m trying to follow the guide to setup custom domains and get the following error when trying to deploy the .html, .js and .map file to the service worker using wrangler.

  Uncaught TypeError: Cannot read properties of undefined (reading 'protocol')
    at worker.js:5775:43
    at worker.js:7370:11
    at worker.js:7371:9 in sw.js
    at worker.js:4:52 in __require
    at worker.js:7374:3
    at worker.js:7375:3
   [code: 10021]
18

The existing service worker is not a Cloudflare Worker hence the undefined issue that you are getting since the service worker uses it’s web api and when accessing things like self.location.protocol it will not be defined since it’s not in the expected environment.

You should be able to have use your own Cloudflare worker though to serve the service worker files if that’s where you want to host the files.

19

thanks a lot for the response @Kepler.
I’m new to service workers and especially on Cloudflare. Do you happen to have a bit more guidance on how to set this up?

20

Cloudflare has some excellent documentation regarding how to serve static files from a worker here, but on that page they actually recommend considering using Cloudflare Pages instead.

In the end, all you need Cloudflare to do is serve the static files to the browser.