Skip to main content

Configure reveal.js to launch browser

This blog post might be outdated!
This blog post was published more than one year ago and might be outdated!
· 2 min read
Stephan Hochdörfer

For more than 1,5 years I rely on reveal.js for my presentations and so far the setup works quite fine for me. However there was one thing which I wanted to change: After launching the built-in webserver via Grunt I needed to launch my browser (Chrome) manually. To sharpen my Grunt skills I went out to find a solution. In the end it turned out to be rather simple ;) - I came across the grunt-open package which allows us to "open urls and files from a grunt task". This is how I set things up:

Add the following line to your package.json file as a "devDependency" and run npm install afterwards to install the dependency in your project.

"grunt-open": "~0.2.3"

In your Gruntfile.js add the following configuration for the Grunt task:

open: {
all: {
path: 'http://localhost:<%= connect.server.options.port %>'
}
}

Load the grunt-open task in your Gruntfile.js by adding the following line to the section where the other tasks are loaded:

grunt.loadNpmTasks( 'grunt-open' );

Last not least re-configure the serve Grunt task to include the execution of the open task. Find the line in the Gruntfile.js where the serve task is registered and change it to:

grunt.registerTask( 'serve', [ 'connect', 'open', 'watch' ] );

This will launch the built-in webserver, launch your system-wide configured default browser and watch the source files for changes. Launch the serve task on the command-line by running:

grunt serve

When I tried to launch grunt like this the first time the following error message came up:

Warning: Cannot read property 'orig' of undefined Use --force to continue.

After a bit a research it turned out that there seems to be an issue with grunt-zip task used by reveal.js to pack the presentation. After commenting out the grunt-zip task everything worked perfectly fine. You can replace the grunt-zip task with the grunt-contrib-compress task if you need or want to export your presentation.
There are quite a few things you can configure with grunt-open. Check the documentation on github if you want to tweak things a bit.