What is the best way to call a backend function on a frontend canister?

Developers Rust
1

I am working on a React application (frontend canister) with a Rust backend canister. Based on the tutorials, it seems that you can call a backend function by importing the declaration file in the frontend component and calling the function. I am doing something like this:

import { backend } from "../declarations/backend";

export Form() {
  
  return (
    <button
          onClick={async () => {
            await backend.update();
        }}></button>
  );
}

However, I am getting this error here: Canister ID undefined error. As I mentioned in this thread, when I comment out the declaration import and onClick function, I no longer receive the error and can navigate to my local application successfully.

What is the best way to call a backend function on a frontend canister? What am I doing wrong?

1 Like
2

My guess is CRA is not passing through your environment variables.
[Adding Custom Environment Variables | Create React App]
You will need to hardcode the canister id or change the variable from BACKEND_ID=… to REACT_APP_BACKEND_ID=…

3

Thank you so much for the help! Ah yes, you must add REACT_APP in front of the env variable if you want to include it in the source code.