How to link React built frontend?

Developers
1

I already have a React built frontend that I want to use for the ic, but I have problems linking it correctly.

My project contains a build/ directory with an index.html.
That html file links to everything needed (the build directory includes several sub directories and files alongside the index.html for assets and additional lazy loadable javascript, etc).

This is my dfx.json:

{
  "canisters": {
    "user": {
      "main": "backend/user/main.mo",
      "type": "motoko"
    },
    "syra_frontend": {
      "dependencies": [
        "user"
      ],
      "frontend": {
        "entrypoint": "build/index.html",
        "output": "/"
      },
      "source": [
        "build"
      ],
      "type": "assets"
    }
  },
  "defaults": {
    "build": {
      "output": "canisters/"
    }
  },
  "networks": {
    "local": {
      "bind": "localhost:8000",
      "type": "ephemeral"
    },
    "tungsten": {
      "providers": [
        "https://gw.dfinity.network"
      ],
      "type": "persistent"
    }
  },
  "dfx": "0.6.6",
  "version": 1
}

Using dfx it builds find on local and tungsten network and installation also runs without an error.
But opening the canister in the browser throws an error:

An error happened:
Error: Query failed:
  Status: rejected
  Message: not found

    at r.retrieve (https://4zrvx-mypaa-aaaaa-aaaaa-aaaaa-aaaaa-aaaaa-q.ic0.app/bootstrap.js:2:43726)
    at async _loadJs (https://4zrvx-mypaa-aaaaa-aaaaa-aaaaa-aaaaa-aaaaa-q.ic0.app/bootstrap.js:2:241980)
    at async _main (https://4zrvx-mypaa-aaaaa-aaaaa-aaaaa-aaaaa-aaaaa-q.ic0.app/bootstrap.js:2:242870)

I am not quite sure what is wrong with the config. Would be great if somebody can help out here :slight_smile:

2 Likes
2

The canister is bootstrapped with an html page you don’t see, which already contains an element with id=“app”. So target this from the react javascript in the render call as usual and it’ll populate that element, no need to use your own html page.

Point the entry point in dfx.json at this react index.jsx file.

There’s a great example react project here:
https://github.com/enzoh/superheroes

Or the tutorials include some too:
https://sdk.dfinity.org/docs/developers-guide/tutorials/custom-frontend.html

4 Likes
3

Thx I’ll check that out. Though the docs state that you can use your own html file as entry point here, which I would like to do.

1 Like
4

Also the thing is, that I have several web assembly modules and web worker javascript, etc. lying in the build/ directory. So I’d like to have a way to just include the HTML page and that pulls everything else.

2 Likes
5

I’m running into the same thing.

Currently, the bootstrap server only retrieves one entrypoint file, but I have a large webpack bundle with many chunks. I tried limiting it to a single chunk of 13mb, but that takes about 20s to download :confused:

Another question: I’m using React router, and I’m not sure how to handle routing (eg. vercel has custom routes). One solution would be to run my own nginx in front, I guess.

pinging @hansl @andrew_DFN

2 Likes
6

@wang Have you tried using a HashRouter for routing based on window.location.hash https://reactrouter.com/web/api/HashRouter . I think it should work, but haven’t tried it yet.

1 Like