Constructing HttpAgent and Actor in local environment

Developers
1

Hello everyone,

I created a dfx project and deployed a canister locally. I have a separate React project that is also running locally. How can I make calls from my React app to the dfx project?

In the default UI that gets created alongside the dfx project, I noticed an import that references a ‘dfx-generated/project-name’, but I wasn’t able to actually find this folder in the project. Would it be possible to import this in my React app so I can get an Actor created?

I’m stuck because I’m not sure how to create an Actor without that import. I’ve tried to just use HttpAgent to make a call to that local canister, but I’m unable to do this as well.

I feel like I’m missing a step or piece of information here. Would appreciate a bit of help, or a point in the right direction. Here’s the code I have so far to create the HttpAgent and make a call to my local canister:

const callMyCanister = () => {
const identity = auth.authClient.getIdentity();
// Not sure what I should be using for the host URL here.
// This React app is running on localhost:3000
const agent = new HttpAgent({host: “http://localhost:3000”}, identity);
const canId = ‘rrkah-fqaaa-aaaaa-aaaaq-cai’;
agent.query(canId, {methodName: ‘greet’}, identity, ).then((res)=>{
console.log(res);
})
}

2

You should checkout: GitHub - krpeacock/auth-client-demo: Example demo of how to use https://www.npmjs.com/package/@dfinity/auth-client to make authenticated calls to an IC app

3

I don’t quite think that’s what I’m looking for. The ask would be if I have a JavaScript app of any flavor, how can I interact with a canister that I have deployed locally (from a different project).

This seems like it should be as simple as importing the HttpAgent and calling its query() method, but I’m having trouble getting the call to go through successfully.

The only documentation I can find either imports from “declarations/” or “dfx-generated/” in order to query deployed canisters. What happens if I have just a plain react app, and would like to interact with a canister someone else has deployed? I won’t have the option to do these imports, which is making it difficult for me to construct an Actor object.

4

What you want is doable, but I don’t have a readymade answer to link you yet. I’ll try to write something up next week.

1 Like
5

Thanks for the quick response and confirming it’s possible! I’ll check back next week :slight_smile:

The broader picture is I’m trying to create an API service that others could make requests to. It’d be super convenient if I could just have users import @dfinity/agent and create an HttpAgent/Actor to interface with

6

Hey Kyle,

Did you ever get a chance to pull some code together for this?

I’m hitting my head off the wall with an issue with WSL which is stopping me using vite to build a frontend. As such I’m wanting to build/ host the frontend locally on windows whist developing the backend on WSL using dfx deploy etc.

I’m just not quite sure what to put in place of the host/ root key etc. I don’t mind changing this manually for deploying ‘live’ on the IC.

Cheers,

Nathan.

7

I’m guessing you don’t care about type safety - you just want to make calls. Try using ic0 - npm.

If you have a proxy set up for vite, your host logic can be:

const host  = isLocal ? undefined : "https://icp-api.io";
1 Like
8

Awesome thanks! I’ll give that a go.