Constructing HttpAgent and Actor in local environment

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);
})
}

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

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.

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

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