0 comments

So I’m working on setting up a small presentation for work and really like the simplicity of reveal.js. I’ve toyed around with some of the node-js plugins before and really like the “Server side speaker notes” plugin, which lets me view my speaker notes on a different device than the one running the presentation. I’ve used my Surface 2 for this purpose before with great success.

Anyway, for this presentation I decided it would be fun to host it on the web so I could just give people the URL later on, instead of distributing the slides via PDF or PowerPoint or the like.

So, why not host the presentation in an Azure Website?

Prerequisites:

 

First of all I clone the reveal.js repo from Github.

image

Then, to be able to run the speaker notes server extension on Azure, I need to modify it slightly. So, in the plugin\notes-server directory, open index.js in your favourite editor.
Around line 13 you should find the server port definition (set to 1947). Change this to process.env.PORT:

image

That’s all you need to change in this file. Remember to commit your changes to the local git repo.

image

There’s one more change you need to make, and that is to enable the speaker notes extension in your presentation. Follow the short guide here for instructions. It’s basically a question of adding two lines inside the dependencies section at the bottom of the presentation html page.

Now, to run on Azure you need to tell IIS to run the iisnode extension for your site. To do this, drop a web.config file in the root of the site, with the following settings:

<configuration>
	<system.webServer>
		<handlers>
			<!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
			<add name="iisnode" path="plugin/notes-server/index.js" verb="*" modules="iisnode"/>
		</handlers>
		<rewrite>
			<rules>
				<!-- Don't interfere with requests for logs -->
				<rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
					<match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$"/>
				</rule>
				<!-- Don't interfere with requests for node-inspector debugging -->
				<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
					<match url="server.js\/debug[\/]?"/>
				</rule>
				<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
				<rule name="StaticContent">
					<action type="Rewrite" url="public{REQUEST_URI}"/>
				</rule>
				<!-- All other URLs are mapped to the Node.js application entry point -->
				<rule name="DynamicContent">
					<conditions>
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
					</conditions>
					<action type="Rewrite" url="plugin/notes-server/index.js"/>
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
	<system.web>
		<compilation debug="true"/>
	</system.web>
</configuration>

Notice that the iisnode handler gets configured to point to the notes-server plugin and that all dynamic URLs are also mapped there. This ensures that the main entry point to our application is through that handler.

Save the file as web.config and add & commit it to the git repo.

image

Now we’re basically ready to push our presentation to Azure. After running the cmdlet Add-AzureAccount, you’re ready to create an Azure Website:

New-AzureWebsite testpresentation -Git

After a few seconds, Azure will have set up your website for you as well as add a remote to your local git repo, named “azure” (That’s what the –Git part does).

You also want to enable websockets on your new website. Run the following command:

Set-AzureWebSite -WebSocketsEnabled 1

All that’s left to do now is to push your presentation up to your newly created website:

git push azure master

The deployment will now run and set up your site for you in Azure, including installing all the required node.js modules. 10-15 seconds later, you should see a "Deployment Successful" message.

If you go to the URL you created above, in this case http://testpresentation.azurewebsites.net*, your presentation should appear, including a popup with your speaker notes. The URL in the popup window can be opened on any other device to give you speaker notes "disconnected" from your main presentation. This is extremely handy when presenting in a place where you don't necessarily have a dual-monitor setup. Instead, you can simply view your notes on your phone or tablet.

Awesome, right?

* Disclaimer: I won’t promise to keep this site online forever

comments powered by Disqus