I want to split the React frontend into two

Developers JavaScript
1

I want to create two frotnend applications:

  • one at /person/*
  • one at /* except /person/*

How to do this with IC? What should I put into dfx.json and in two package.json files?


  "canisters": {
    "frontend": {
      "frontend": {
        "entrypoint": "src/frontend/src/index.html"
      },
      "source": [
        "src/frontend/assets",
        "dist/frontend/"
        ...?
      ],
      "type": "assets",
      "dependencies": ["main"]
    },

Note that I want this instead of using just one app to reduce load time of the /* app, because /person/* is heavyweight.

An alternative considered: Two separate canisters with custom origins.

2

You can provide as many source entrypoints as you want.

For example, if you have the structure

src
  |  app1
  |  |  dist
  |  |  | person
  |  |  | |  *contents*
  |  app2
  |  |  dist
  |  |  |  *contents*

you could include

"source": [
  "src/app1/dist",
  "src/app2/dist"
]

The main trick is making sure that your output for app1 is configured to output to "./dist/person" instead of just "./dist"

1 Like