# I want to split the React frontend into two

**URL:** <https://forum.dfinity.org/t/i-want-to-split-the-react-frontend-into-two/33472>\
**Category:** JavaScript\
**Created:** [July 21, 2024, 4:58pm UTC](https://forum.dfinity.org/t/i-want-to-split-the-react-frontend-into-two/33472 "2024-07-21T16:58:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![qwertytrewq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/qwertytrewq/32/10423_2.png) [@qwertytrewq](https://forum.dfinity.org/u/qwertytrewq)\
**Post date:** [July 21, 2024, 4:58pm UTC](https://forum.dfinity.org/t/i-want-to-split-the-react-frontend-into-two/33472/1 "2024-07-21T16:58:00Z")

</div>

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?

```auto

  "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.

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [July 22, 2024, 4:14pm UTC](https://forum.dfinity.org/t/i-want-to-split-the-react-frontend-into-two/33472/2 "2024-07-22T16:14:09Z")

</div>

You can provide as many `source` entrypoints as you want.

For example, if you have the structure

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

```

you could include

```auto
"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"`