Frontend development usually involves a considerable degree of trial and error. A naive web development workflow may look like this:
- Open your web app in a browser.
- Write or edit a few lines of code.
- Hit the browser's refresh button (or F5) and return to step 2.
This approach just won't scale, especially if you want to test your web app in multiple browsers and on different devices. Instead, you need to have the ability to instantly see the result of your work--how the web app looks in a browser and on mobile devices. If you don't test early, you may end up spending more time on fixing bugs later on.
In this chapter, you will learn how to improve the development workflow by configuring and using tools such as Browsersync and Webpack's Hot Module Replacement.