Is it possible to have 2 frontend canisters in a single dfx project?

Developers
1

I am working on a project with 2 different react frontend services that needs to have access to a single backend. So the project will overally have 3 canisters. I am thinking of something like moving the defualt package.json files into the default frontend canister, restructure the directories and update the paths in the dfx.json, so that in the src folder each frontend will have its own packages in its own directory. I’m yet to experiment that but I just wanted to hear from the dfinity team or anyone with knowledge on this if its something that can actually work and be reliable or if there are other better solutions to this other than just forcing these two react frontend services into one frontend canister. Thank you.

2

I have done this locally with multiple frontend canisters and pnpm workspaces, but I had to add support for custom build commands to DFX for asset canisters. I hope to open a PR with these changes this week.

3

Okay great, so which repo are you going to be making the PR of that example so I can follow it?

4

There’s not much to make an example of to be honest, the change I’m making is in DFX so you can provide custom build commands for asset canisters.

With that change, you set up a workspace in whatever way you like, using PNPM, yarn, turbo or any other workspace manager and then you can just provide the relevant commands to DFX so it can build each frontend canister individually. Does this answer your question? If it’s still not clear then I could add an example to the examples repo.

1 Like
5

Never did the experiment but, I guess you can for example use npm workspaces to avoid the duplication of dependencies and that would match your idea of having one package.json per apps.

In dfx.json, in the dependencies of your backend, I am guessing also you should then either add both frontend to the backend as dependencies or, if you don’t want to always deploy everything at once, remove the dependencies.

But beside that I guess it should do. Something like

./packages.json
./src/frontend_1/packages.json
./src/frontend_1/src
./src/frontend_2/packages.json
./src/frontend_2/src
./src/backend

Update: reading again @NathanosDev last answer and noticing it’s basically the same :wink:. That said, don’t think the change is a show stopper, I am guessing again, such a two frontends project can already be set up.

1 Like
6

I think I get it but that would be really great if you can add an example for it. Thanks

7

Thank you, let me follow that and see if I get it to work.

1 Like