Hot Reloading via VS Code

[paulsolt-ofsw]

Allows the hot reloading of either the Web app or Admin app portions of the app (not the plugins). You can connect to one or Added .vscode/launch.json to share debug configurations the other, and potentially the backend, but I have not successfully tested that workflow.

Debug the Web App

1. Start the Mage server and web-apps locally (use latest develop)

cd mage-server
npm install
npm run build
npm start

2. Open a new Terminal and Start Admin

cd mage-server/web-app
npm run start:app

3. In Visual Studio Code, go to the Debug Panel. Choose "Launch WebApp" and hit the "Play" button to open Chrome

Now you should be able to login to the Admin panel of the Mage-Server front end.

4. Open the Developer tools in Chrome with Command + Option + I
5. Navigate to Sources > Page > webpack:// and look for the src code you want to inspect (i.e., "src/app/feed-panel")
6. You should be able to add breakpoints on the sidebar in Developer tools to inspect the app state.

Debug the Admin App

1. Open a new Terminal and Start Admin

cd mage-server/web-app
npm run start:admin

3. In Visual Studio Code, go to the Debug Panel. Choose "Launch AdminApp" and hit the "Play" button to open Chrome

4. You should be able to debug using the Sources > Page > webpack:// like the web app.