Where's my project's code hosted?

Developers
1

Hello,
I have a general knowledge question, likely easy to answer for veterans of this forum :slight_smile:

When I used dfx new to generate my project, it created the following architecture:

myapp/
├─ node_modules/
├─ src/
│  ├─ declarations/
│  ├─ myapp_backend/
│  ├─ myapp_frontend/
│  │  ├─ node_modules/
│  │  ├─ src/
│  │  ├─ package.json
├─ .env
├─ package.json

When I run npm install within the myapp_frontend folder, it appears to install the packages in the root node_modules folder (right under myapp).

I don’t understand that and more generally, why do I need node_modules outside of my 2 canisters’ folders (myapp_backend and myapp_frontend) ? Will any code outside of those 2 folders get deployed when I run dfx deploy ? Maybe I’m misunderstanding how the IC works: if my app has 2 canisters, when I deploy them, are they grouped within some sort of single container or nah they’re just 2 independant containers that happen to work closely together ?

Thanks a lot and sorry if this is trivial.

2

The location of node_modules is a decision of NPM (or whatever other package manager you might be using) and not related to any IC-specific tech.

When you run dfx deploy, the flow that happens is different for asset canisters than it is for other “backend” canisters.

  • The first few steps are a normal process for frontend development and not related to the IC:
    • First the frontend is built and output to a dist folder
    • The dependencies in node_modules are used to build the UI
    • Once the UI is built, anything necessary from node_modules is already included in the dist folder
  • Now we get to the IC-specific steps:
    • The asset canister is deployed (this is like a special backend canister that is included with DFX)
    • The static assets from your dist folder are uploaded to the asset canister after it is deployed

The two canisters are deployed independently from one another.

3

Thanks a lot for your answer. I think this was the missing part for me: I didn’t know that the frontend could be built with files outside of its folder. I know, sounds dumb, but now I know :stuck_out_tongue: