server/index.js", "WDS": "npm test & webpack-dev-server -inline -hot", "WDSC": "npm test & webpack-dev-server -inline -hot -open 'Google Chrome'", "WDSF": "npm test & webpack-dev-server -inline -hot -open 'Firefox'", "WDSS": "npm test & webpack-dev-server -inline -hot -open 'Safari'"įinally here is my completed nfig. Don’t worry if you don’t observe a bundle.js in your file system after triggering these scripts. One extra tidbit, when WDS bundles up the JS files, it serves it from memory. The - hot option enables Hot Module Replacement. The last 3 scripts just open the main page using the specified browser. Last but not least I added the following scripts to my package.json.
#LIVERELOAD SAFARI INSTALL#
At the end of the article I have my entire final file in one shot, should you wish to copy it.įirst install necessary packages if you don’t already have them using npm or yarn npm install -save-dev nodemon webpack-dev-server webpack-cliīefore I started my output property was set to as follows: output: , One important addition would be to remove the href references to safari, replacing it with the local directory. Currently links still point to safari books. The use of mhtml means everything is is held in one file per chapter. Here are the changes I had to make to my & package.json file. Sometimes there are hiccups with download but that's probably at the server end. For those two things combined, WDS will achieve my goals. Additionally I wanted my bundle to be rebuilt and my browser to also refresh when the bundle is ready. I decided that having a backend refresh automatically with each code save using nodemon would be ideal so I could implement a RESTful API. I’m in the middle of a rapid development of a full-stack javascript single page application (SPA). The only downside to this configuration is I cannot use socket.io to communicate between nodemon’s server and WDS’s client. Additionally at the time of this article webpack-livereload-plugin is not compatible with webpack 4 that was just released a few days ago. Last week I did the research and today I’m sharing for posterity’s sake. Now again, I find myself in need of a tool to speed up development time. I failed miserably, and moved on instead of wasting time on the project.
![livereload safari livereload safari](https://files.mdnice.com/pic/cd2f6c71-c21a-4ec8-a5f1-8a2c9bdf6b46.png)
#LIVERELOAD SAFARI HOW TO#
In this recipe, you will learn how to integrate LiveReload into your build chain. Notice that the extension for Safari does not work when you open the files directly in your browsers by using in the file:/// protocol.
![livereload safari livereload safari](https://developer.jboss.org/servlet/JiveServlet/downloadImage/38-5273-21171/open-with-livereload.png)
Yes, you heard that right, LiveReload <3 iPhones, iPads and their Simulators if you insert a JavaScript snippet. Currently, extensions are available for Safari, Google Chrome, and Firefox. Click here to share this article on LinkedIn »Ī couple of weeks ago, when I was under the pressure of time, I decided to attempt to get webpack-dev-server (WDS) running. It works with Safari, Chrome, Firefox and Mobile Safari.