Your First App

We should now have an app in your YourAppName directory. The next step is to open this folder in your editor of choice. VS Code is highly recommended as we have tools and tasks designed to work from within it.

Once opened and running in VS Code, you can start by running the debug command: F5. This will start webpack-dev-server and allow you to debug by placing breakpoints directly into VS Code. The debugging functionality requires you to install the Chrome Debugging extension.

The debug command will automatically start the dev build command, which by default is: Cmd + Shift + B or Ctrl + Shift B for Windows. This will start webpack-dev-server on its own and is there for if you want to manage the build task yourself.

This is how most dev work is initially completed. The browser will act as your testing area and you can build your app to work inside this container. The dev server supports live / hot reloading so any changes you make to the code will be compiled and the page will refresh to update. This is usually very quick.

Building

Webpack dev server does not produce an output file. To get the output of a build, you will need to run webpack. The app template will come with some VS Code tasks that you can run to produce an output. To run these tasks, hit F1 and then go to: Tasks: Run Task. You will be presented with some tasks you can run:

• Run Dev - the webpack-dev-server task, started automatically with F5.
• Build for Dev - produces a dev .js script(s) inside build/js/
• Build for Production - produces a production .js script(s) with production optimisation applied.
• Build Service Worker Dev - produces a dev service-worker.js script inside build.
• Build Service Worker Production - produces a production service-worker.js script inside build.

Good to Go

If you got this far you're now good to go. Start building.