I’m all about getting rid of the friction in development. All that ‘ceremony’ that ends up built into your muscle memory to get your projects built and running.
- Livereload 2 3 27 – The Essential Web Developer Tool Download
- Livereload 2 3 27 – The Essential Web Developer Tool Chrome
One bit of small friction, but one you pay regularly, is pressing F5 in web applications, reloading the page after you’ve changed the source code. LiveReload is a really nice solution to that when you’re editing JavaScript and HTML, and in ASP.NET MVC when you’re editing Razor (CSHTML) files.
May 13, 2013 LiveReload 2.3.27 – The essential Web developer tool. May 13, 2013 LiveReload is the essential Web developer tool: When you save a file, LiveReload preprocesses it as needed and refreshes the browser automatically. A flexible developer tool that runs processes and responds to filesystem changes. Process-manager livereload developer-tools Updated Aug 8. Essential cookies. Push your web development skills to the next level, through expert screencasts on Laravel, Vue, and so much more. Laracasts is divided into various topics ranging from frameworks to packages to tools. 1 Series. 27 Videos Vim.
However, the job isn’t all done, and when you’re making server-side changes — changing controllers and such — LiveReload isn’t as easy to make fire. You really want it to trigger when it finishes a build, once all your binaries are up to date. I decided to fix that with a very small MSBuild target. The idea is that you add this into your web app (manually stitching it into your CSPROJ file) and when you build your source, it writes a small random file to disk. You use LiveReload to watch for that file, and that will trigger your browser to refresh. It’s a small — very small — improvement to your workflow if you’re already using LiveReload, but it’s something you do so often that any time you can get rid of a tiny piece of friction, you save yourself a little bit of the mental capacity you use for concentrating on real problems. In a very real way, each little bit of friction steals an IQ point or two; hoard them for the difficult tasks! As Alfred North Whitehead said:
“It is a profoundly erroneous truism, repeated by all copy-books and by eminent people when they are making speeches, that we should cultivate the habit of thinking of what we are doing. The precise opposite is the case. Civilization advances by extending the number of important operations which we can perform without thinking about them. Operations of thought are like cavalry charges in a battle — they are strictly limited in number, they require fresh horses, and must only be made at decisive moments.” – ANW
You need to get LiveReload into your workflow. I’ve found the best for me is to use Grunt or Gulp, both of which are designed to work with LiveReload. On windows, it’s been the most reliable way for me to get it to run — the original app is an alpha version, there’s not been an update in a long time, and I’ve found it flakey.
So here’s what you need to do;
Make sure you’ve got node.js installed
Come on now. Get it if you haven’t already. Nodejs.
Create a package.json file in your solution directory.
If you don’t already have a package.json file, open a command window, change directory to your solution folder, and type
And hit ‘enter’ a bunch of times. The defaults are fine, but you may need to type your project name in, in lower case, if it complains about your folder name.
Install Grunt and Grunt-Contrib-Watch
Now install Grunt, the task runner, and Grunt-Contrib-Watch, a package which watches for file changes and triggers useful work.
Nice and straightforward!
Create a Gruntfile
In your Solution directory, create a file called Gruntfile.js. (Note the capitalisation.) Then add this to it;
Alter the file — you’ll see on the second line the token {{MyWebProjectFolder}} which you should replace with the relative folder path from your solution to your web application folder. Normally that’s the name of the project in Visual Studio. This is the config file that tells Grunt to watch for a file called ‘LiveReloadOnSuccessfulBuild.token’, a file that gets generated by a little bit of MSBuild trickery you’ll see in a minute. This file needs to go into source control.
Create the MSBuild target file
In your web application folder — the same folder that holds your CSPROJ file — create a file called LiveReloadOnSuccessfulBuild.targets and put in this content;
This is an MSBuild file — the same stuff that runs when you build your solution — and it instructs the build process to create a file called ‘LiveReloadOnSuccessfulBuild.token’ whenever the build completes. The Gruntfile I described earlier watches for this file, and when it finds it, it sends a signal to LiveReload to reload your page. This needs to go into source control.
Wire up the targets file into your web app build process
We need to wire this targets file up into visual studio’s build system. Open your web application’s CSPROJ file in a text editor, and on the penultimate line, just above </Project>, put this;
Save the file, and if prompted in visual studio, allow it to reload your web app.
That’s all the editing done. Now, when you build in Visual Studio, it will alter the ‘LiveReloadOnSuccessfulBuild.token’ file and put something like this in;
As it says, you may want to make sure this file isn’t checked into source control — if you’re using TFS, you don’t need to do anything, but if you’re using git, you may want to put it in your .gitignore file.
Install LiveReload extension in Chrome
When LiveReload works the way it does it is to watch your files, and when a change is made, it sends a signal. But what listens for the signal? You need to install an extension in Chrome. Active dock 1 1 193.
use it!
OK, so we’re almost there. With a command window open in your solution directory, enter
That is, ‘run grunt with the ”watch” command’. If you look back at the grunt file, you’ll see that ‘watch’ is configured to look for that token, and send the signal to your browser. Radium 3 1 3 x 4.
Now that that’s started, on Chrome you’ll need to start the LiveReload extension watching for the signal. There’s ‘reload’ icon on the same line as the web address, with a little hollow circle surrounded by looping arrows. When you click it, the hollow circle is filled in, showing that the browser is connected to LiveReload. Be aware that it’s trying to connect to the LiveReload server you started with grunt watch, so you need to do it in that order — grunt, then browser.
Livereload 2 3 27 – The Essential Web Developer Tool Download
We’re done! Now, whenever you build your web app, it will automatically refresh the browser. Although this was a bit of a slog, we’re now in the position where you don’t have to refresh your browser. If you have two monitors, you can code in one window and watch the web app develop in the other. Saves you mental energy and the RSI of constantly flicking your hand to the mouse!
Livereload 2 3 27 – The Essential Web Developer Tool Chrome
As great as technology is, when it comes to finding the time to completely immerse yourself in your work, let’s face it – the same technology we depend on can just as quickly turn into a major hindrance. Being a web designer, the very nature of my job requires that I spend the majority of my workday online – which makes it that much more important that I take extra care not to get easily sidetracked. While the suggestions below are mostly common sense, and quite frankly nothing you probably haven’t already heard, sometimes you need a bit of a […]