Yes that would work but once piece of the puzzle is missing in this list: the webpack.config or other bundler configuration.
When you deploy canister locally, they receive a canister id. These are the ids you should use in your frontend app (or else) to execute calls and queries (like the whoami).
Without any configuration, your frontend app does not know these generated ids.
So one way to tell your app which IDs to use is to hardcode these but, that isn’t really handy because if you don’t deploy your canister always in the same order they get different ids and also, when you gonna deploy on mainnet (production) canisters might also have other ids.
That’s why, the most handy way is to handle these IDs with environment variables that are generated automatically.
e.g. in @kpeacock sample repo you can see here that a function of the webpack configuration is loading the list of canister ids in process.env https://github.com/krpeacock/auth-client-demo/blob/bf332ad325207bfa614a322169aa943c3dc7556b/webpack.config.js#L96
process.env that can then be used in the frontend typescript/javascript code e.g. https://github.com/krpeacock/auth-client-demo/blob/bf332ad325207bfa614a322169aa943c3dc7556b/src/auth_client_demo_assets/src/index.ts#L46
Note that process.env is the example of the react app, of course there are other ways. e.g. in my svelte app I use vite so I end up loading these in with .env.
Hopes this makes a bit more clear how things works out currently.