Documentation: Instructions for running external apps in the web as part of the main phone app

[BackSH00TER]

I have been following the instructions for setup and development guidance on how to run custom apps on the docs page: https://projecterror.dev/docs/npwd/dev/setup#getting-started

The setup instructions and being able to run the apps in a standalone view in the browser (without needing to go into the game) is a huge time saver to the development experience. There were a couple of gaps however that I think would be useful to add to the documentation, it may be nice to add a Development Workflow section that gives an overview of the different ways that people can run the apps to be more efficient (in browser standalone, in browser whole app, in game, etc).

1. Instructions on running the external app in standalone mode in the browser (just the app in isolation)
   • Achievable by navigating to the external app directory, installing and then running yarn dev (this is easily discoverable from the package.json, but would be helpful to explicitly call out the expected dev flow and instructions)
2. Instructions on running the main npwd app in the browser
   • Pretty much same instructions, navigate into npwd/apps/phone, yarn to install, yarn dev. This works to run the base npwd phone and its default apps
3. Instructions on running the main npwd app + external apps in the browser at the same time
   • Not sure if this is possible at the moment, did some digging around in the different package.jsons but was unable to come up with the right combination of scripts to run to achieve this functionality. If it is possible, it would be extremely helpful to document this process.
   • An issue I ran into right now, is that when you run an external app in standalone dev mode, the styles you see in this mode do not reflect the real styles that you will see once the app is embedded with the main app. It seems the main app provides a handful of color/style overrides and you dont see these until the external app is run as part of the main app. It would help devs be a lot more efficient to do full end to end styling and designing of the app + external apps in browser only without having to mess around with in game.
4. Instructions on the use of mock data for data fetches so that the browser dev experience can operate in complete isolation from client/server code.
   • I was happy to see this was a part of the setup, and it makes dev experience so much faster/easier to design off of mock data. It would be handy to call these out in the instructions.
5. One area I originally struggled a bit with, is figuring out what order the scripts needed to be restarted in after making changes so that you could view the changes in server. To help with developer workflow it would be a good idea to call out some steps to use while developing and then call out which scripts to run when done making changes and preparing the final release build.
   • Exampe: For me I found that if I was modifying an external app, I would run yarn watch, make any changes, once I was ready to test in server, I would need to restart npwd-external-app, then restart npwd, then restart qb-npwd. With these steps I was able to see the changes reflected.

[BackSH00TER]

Additionally I have run into some issues sometimes, where you have to run yarn build after each change in the app and it ignores the watcher and changes picked up from yarn watch. Would be good to add instructions around when you are running against the production build vs dev and how to switch between them