How to add a frontend to the backend-only official code examples?

Developers
1

I’m trying to add a frontend to the basic_bitcoin example found in the official documentation of IC, here: examples/motoko/basic_bitcoin at master · dfinity/examples · GitHub

But the folders are organised in a different way to when you run dfx new project and there is no frontend initialised on the example repo, so I’m getting confused as to how to connect a minimal frontend to it.

How do I add a boilerplate frontend to the backend-only code examples?

Or conversely, how do I bring a backend-only code example into a dfx new project boilerplate structure?

2

Looking at the frontend definition in dfx.json of dfx new hello:

    "hello_frontend": {
      "type": "assets",
      "source": [
        "src/hello_frontend/assets"
      ],
      "dependencies": [
        "hello_backend"
      ]
    }

The critical piece to link the two canisters is "dependencies". There, you define what canisters the frontend will be able to talk to. If you simply replace the backend with the bitcoin example, everything should be all right.

Second, your frontend has to use the right interface. If your frontend tries to call the function greet, but the backend doesn’t implement a method with that name, obviously things will go wrong. So make sure the interfaces match up.

2 Likes