Creating an HTML front-end for an already-existing canister

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!

I recommend starting with dfx 0.7.7, which I’m documenting now and will be promoting soon.

You can install it with

DFX_VERSION=0.7.7 sh -ci "$(curl -fsSL"

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?

See Modifying the webpack configuration.

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.

Oh cool. You just need to link them under dependencies in dfx.json pre-0.7.7, or import the agent from the declarations folder in 0.7.7

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?

With 0.7.2, the dependencies list tells webpack to import the additional canisters and register them as aliases under dfx-generated/<canister_name>

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';

That is how to do it in 0.7.2, yes.

In 0.7.7 you can just import { user } from '../declarations/user and it is fully set up for you.


I’m already well into this project, how many adjustments would I have to make if I upgraded to 0.7.7?

Mainly updating webpack.config.js and package.json