Hi, I’m currently working on a project on the Internet Computer. I’ve been working in Motoko with regards to the backend functionalities. Thus far, I’ve been able to use Candid UI as a placeholder for the frontend, but I’d actually like to create some sort of frontend service based in HTML. My issue is that I’m simply not able to import any Motoko functions from any of my canisters.
Here’s the process I followed: Say I have a canister called “user”. Then I created a brand new “user_assets” canister with an “index.html” and an “index.js”. In my “index.js” file, I include the following lines of code at the top:
import { Actor, HttpAgent } from "@dfinity/agent";
import { idlFactory as user_idl, canisterID as user_id } from 'dfx-generated/user';
Now I’ve been lifting this code almost entirely from the “dfx new project hello” quickstart tutorial. Whereas it works for that case, I’m not having any luck, as any tests I do to get it to show off any functionality of my Motoko functions just isn’t working. What is the proper approach to import my Motoko functions from other canisters to my front end? Is this just an error in the way I’ve been creating my front-end canister? If so, what is the proper way? How is Candid UI able to work perfectly but my replicated front-end doesn’t?
Any help or insight is much appreciated! Thank you!
Not sure it is what you are looking for but when I tried to bring together a sample wasm with my frontend in a blank new app, at first it did not work out neither even if it looked alright, until I realized it need some manual configuration to link both words.
Does your webpack.configuration.js (assuming you are using webpack) contains the parser to generate the interfaces?
As for how to import functions from canisters that aren’t created in the same project you’re working from, it’s possible to list additional .did files in your codebase, but I’ll need to do some work to document that process, since it’s distinct from the happy path we expect people to go down
Oh I’m actually trying to do the opposite - import functions from canisters from the same project. Like, I created a new project, created a canister within that project called “user” then created another canister for frontend assets called “user_assets”. So they’re all in the same project, but in different canisters.
Hmmm, is webpack.configuration.js a pre-made file when running “dfx new project”? It doesn’t seem like it created a webpack.configuration.js when I created my project unfortunately. Or is this a file I’m supposed to create on my own?
I put the “user” canister under the dependencies for “user_assets” but that doesn’t seem to be working when importing functions. Is there any other step I need to do?
Also, just a side question, but is it possible to add multiple canisters under the dependencies for an assets canister?
Ok so I went back and I’m still having issues. Just to clarify, I’m able to run the HTML file, but I’m meant to click a button to execute a command, the functionality for which I wrote in Motoko in a separate canister. Is this the correct way to import a canister in the index.js file?: import { Actor, HttpAgent } from "@dfinity/agent"; import { idlFactory as user_idl, canisterID as user_id } from 'dfx-generated/user';