Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:1 hour
Next level presentations with reveal js 400x277
  • Overview
  • Transcript

2.3 Installing Reveal.js on a Local Web Server

The simple installation I showed you in lesson #1 is more than enough to get started with Reveal. However, some of the more advanced features like the Markdown parses or the speaker notes require a local web server.

In addition to these, a local web server also gives you the option to install a Sass compiler that allows you to edit the included Sass files.

So let’s go ahead and do a full installation of the framework.

Related Links

2.3 Installing Reveal.js on a Local Web Server

The simple installation I showed you in lesson number one is more than enough to get you started with Reveal JS. But some of the more advanced features of the framework like the mark down password, the speaker notes require the creation of a local web server. In addition to that a local web server allows you to install a Sass compiler that you can use to compile Sass to CSS making your job a lot easier when customizing your slides. So let's go ahead and do a full installation of the framework. The very first thing you will need is nodejs, so depending on your operating system you would get it for MAC OS Windows Linux. Just go to nodejs.org get the version for your operating system and install it. I already have it installed. So as you can see, I have version 1015.1, the next step is to create a folder, where you want to create your presentations. In my case, I created a folder on my desktop called reveal js. So I'm gonna say cd desktopreveal js, so now I'm inside the reveal js folder. I'll just open that for you really quick, I don't have anything in here just yet. The next step is to clone the reveal js repository. So for that, you can go into the GitHub repo where it says clone or download and simply copy this string. Let's go back and say get clone, I'm gonna paste that in, and that's gonna clone the contents of that repository inside our reveal js folder. And as you can see we have the conference right here. The next step is to navigate to this folder, so I'm gonna see the word change directory, reveal js. Now the next step is to install the dependencies and those dependencies are listed in this package Json folder. So, if we take a look in the code editor, you can see that in package Json, we have the dependencies. So it's gonna install grunt, a bunch of grunt plugins, also mustache socket.io express. To get these installed, you simply say npm install. All right, so now all the packages are installed. And the next step is to start the local web server, you will do that with npm start. That will create a local web server on local host 8000, this is configurable by the way. It's gonna open up that address in my browser and also, it's gonna run a watch task. So now, if I go to my index_html and I make a change here, let's say, hello, and I save you'll see that. I get a notification in my terminal, file index_html saved and my browser will automatically be refreshed showing me the updated content, it's that simple. Now as I mentioned the benefit of having the local web server is that you can also, edit the SCSS files. So I can go into my SCSS file, and I don't know, maybe I want to change some properties here, like for example, the spacing of the controls, right? Let's go ahead and add another slide. So we can see all of these all right now, the spacing in here is 12 pixels but I can easily change this to 32 pixels, okay? And that will automatically compile the SCSS file, it's gonna generate my CSS file, it's gonna run auto prefixer and it's also gonna compress it. And of course, reload my page and of course we can see the changes being reflected here as well. And now the controls are positioned towards the center of the page, but more having more space here on the right and on the bottom. Now will be using this full installation throughout the rest of the course because it's just easier. Having a local web server which automatically refreshes the page compiles all the SASS and CSS files, and you can get a real time preview of the finished presentation. Now let's talk about some of the more advanced features of reveal. And in the next lesson, we'll begin with markdown because you can use markdown in your slides to write HTML a little bit faster. So that's coming up next.

Back to the top
Continue watching with Elements