Creating web2 frontend that interacts with canister on ICP?

Hey all!

All of the examples are showing how to have a frontend assets canister deployed alongside regular motoko canister on ICP. What I would like to do is actually have web2 website written in for example SPA or similar which would interact with deployed canisters that I deploy to ICP. Is this possible (I assume it is) and how would you do this?

If I just use the interfaces that are defined in the dist directory after my Motoko canisters are deployed after running dfx deploy locally, how would I then be able to let my frontend app which does not have dfx in it to know that I actually want to use canisters I’ve deployed locally that have that interface that I include in my js files?

1 Like

That is precisely what the asset canister does for you. You can deploy your app developed in any framework (react, angular, vue, etc) on an asset canister, and the SPA will be able to interact with both your own canisters (if you use some of the default scripts it will even autoload some IDLs for you) and other canisters. You can view an asset canister as a lightweight http server that can serve regular web content.

You don’t have to host it on the IC tho, if you want you can use netlify / githubpages / cloudflare to host your SPA and serve it from there. You’ll still be able to communicate with any canister through agent-js.

2 Likes

Ah yes, sorry that I completely forgot about dfx generating the whole dist folder with the javascript and other assets from the frontend assets canister that I can then use wherever I want :slight_smile:
So basically, I just take the whole dist folder contents and I can then use that on any host that I want to use for my website.

And I guess the only thing required to remember when we want to have a working frontend app for the real IC container that we deploy on IC is to actually get the code from the dist folder after we run dfx deploy --network ic so the javascript that gets generated uses the actual container ID’s from the real IC network instead of the local container id’s?

To me it seems that dist folder depends on the src/declarations contents, since it reads created canisters from there and it’s then able to interact with the canisters that way. So, if we would like to host our frontend app on some custom hosting solution, rather than ICP itself, we would need to also copy the declarations along with everything in it to the host, change the urls that dist folder files use to access these (if we change the location of the src/declarations compared to where dist files expect them to be and it would then work?

1 Like