How do i call multiple (aka files from the front end?

My File is getting pretty large. I’d like to partition some of the code a bit. This would require me to have a second backend canister with its own file. Is it possible to define and call two different files from my front end? If so, a code reference to a project that has successfully done this would be great.

For a bit more context, My back end is written in Motoko and the front end is a React/JavaScript project.

Thanks in advance

It is possible to pass a canisterId to the createActor function.

So if you would have two backend canisters, then i your frontend you would “just” have to use the corresponding actor.

Does that help?

Side note: if your main concern is your file getting pretty large, is creating a second canister really the way?

just a spontaneous idea, assuming with large you mean too much code which makes it hard to read, maybe you can try refactoring the code and extract some in other modules - other .mo files that are not actors. In that way you can stick to just one canister. would that be an option?

I mean something like this canister that I split in four files ic/canisters/src/data at main · papyrs/ic · GitHub (there are probably better solutions, just an example of what I mean)


I was going to suggest the same thing; if your source file is getting too big you can split it into multiple source files and use imports while still having the same number of canisters.


I’ve been trying to keep the main file pretty lean with just state and public functions. All other functions pass the state into functions in other modules that are separated by domain area. So something like:

private stable var state = {
    var userData = RB.Tree<Principal, MyType>;
    var posts. = RB.Tree<Nat, PostType>;


public shared(msg) make_post_namespace(item: PostType) : async Result<Nat, Text>{
     return Posts.make_post(state, item, ?msg.caller);

And then in

public  make_post_namespace(state: State, item: PostType, caller : ?Principal) : Result<Nat, Text>{
     //do post things like adding the post to state, item);
     return #ok(newPostID);

@skilesare, @peterparker, @paulyoung thank you devs. For some reason, i was under the impression that only types and interfaces could be defined within modules. Gonna take you all’s recommendations and refactor my code into separate modules that make more sense