### Fixing our local environment with Browsersync
Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with `webpack-dev-server` and BrowserSync we can fix this:
```
npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server
```
BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.
We’ll need to include it in our `webpack.config.js`:
```
var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
```
And then add it to our plugins at the bottom of the same file:
```
plugins: [
new ExtractTextPlugin("styles.css"),
new StaticSiteGeneratorPlugin('main', data.routes, data),
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: 'http://localhost:8080/'
})
]
```
Now we can update our `package.json` script:
```
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"start": "webpack && npm run dev"
},
```
So when we run our `npm start` command BrowserSync will open up our browser and refresh itself whenever we change a component.