They aren’t valid keys and won’t be used anywhere else. This is why there’s no real harm including it in your project. These do not need to be the same key/crt used by your app. Next, livereload uses its own key and crt files. This has come in handy for me on multiple occassions, so I just recommend getting into the habit of using a different port, even if you never end up needing it.
If you have multiple watches or even the Livereload app running, you can continue to do so on over http (non-secure) on the default port without conflict. you can pass in any other options you'd like to the https server, as listed here: įirst, you will notice that we didn’t set the port to the standard 35729 used by livereload we used 9000 instead. Key: ('path/to/livereload.key'),Ĭert: ('path/to/livereload.crt') read ( 'path/to/livereload.crt' ) // you can pass in any other options you'd like to the https server, as listed here: } }, }, } , read ( 'path/to/livereload.key' ) ,Ĭert : grunt.
Nodejs livereload how to#
There are other examples out there on how to do this with Windows, but for this example we’ll stick to Mac/Linux using Terminal. Note: in the following examples the files will be generated and saved to the current directory, so if you want it saved somewhere else, either move it after generation completes or cd (change directory) to that directory prior to executing.Ī private key can be created using OpenSSL in Mac by opening terminal and using the following command: These can easily be autogenerated using a CLI app called OpenSSL. key/.crt Filesįor livereload to work over https, you need to provide a path to both a private key file and a certificate. What isn’t so obvious is how to go about getting it all working properly-especially to a front-end focused developer, who may not be familiar with server-side ssl, keys, and certs. It is obvious from the grunt-contrib-watch documentation that it is possible to get livereload working over https to avoid browser complaints such as Google Chrome’s blocked message “this content should also be loaded over HTTPS.” Posted Jby Jason Gill & filed under Developer Blog. server.Complete guide to livereload over ssl (https) using grunt watch ping browser on Express boot, once browser has reconnected and handshaken open livereload high port and start to watch public directory for changes const liveReloadServer = livereload. Set up Express to both start livereload server watching the public directory and ping the browser during nodemon-induced restart: const livereload = require( "livereload") Ĭonst connectLivereload = require( "connect-livereload")
livereload opens a high port and notifies the browser of changed public files.You can livereload both front and backend changes to the browser with 'livereload', 'connect-livereload', and 'nodemon' packages. When running gulp in terminal, it will start watching server as well as refreshing browser on change in any files.Īlthough we specify port 3001 in express server, our app will be working on port 3002, as we write in browser-sync. So, dependencies from package.json to make it work: "devDependencies":, //UI, can be any port reloadDelay: 1000 //Important, otherwise syncing will not work Nodemon can see when changes occur in any types of files. Restarting server is one thing, refreshing browser is another thing.
0 kommentar(er)
