How to install RevealJS on Ubuntu 20.04 / Debian 11?

Creating presentations for educational or work presentations was always monopolized by proprietary tools. However, thanks to CSS/HTML we now have other more flexible tools. That’s why, in this post, you will learn how to install RevealJS on Ubuntu 20.04 / Debian 11.

Introduction to RevealJS

According to the official RevealJS website.

reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

In short, with RevealJS we can create beautiful presentations with HTML/CSS technology but also adding JavaScript.

This framework is created with open technologies, so anyone can learn it. It also includes support for Markdown, LaTeX, and PDF export capability.

Finally, RevealJS has a great documentation ideal for everyone to start using it and create beautiful things.

Let’s get started.

Updating the system and installing dependencies

open a terminal or connect via SSH to your server and update it.

sudo apt update
sudo apt upgrade

After this, install some packages needed to complete the tutorial.

sudo apt install curl gnupg2 unzip git

Among them is git which we will use to get the latest stable version of the framework.

Install NodeJS on Ubuntu 20.04 / Debian 11

RevealJS depends on NodeJS to work. This means that we have to install it. You can use the 14.x branch or a more advanced one like 16.x. For this post, I will use the latter.

Add the repository in question:

curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -

And then install NodeJS by executing the following command

sudo apt install nodejs

Then verify the installed version with the following command

node -v
v16.14.0

Install RevealJS on Ubuntu 20.04 / Debian 11

To get the latest stable version of the tool, we have to clone the RevealJS repository.

git clone https://github.com/hakimel/reveal.js.git

This will generate a folder called reveal.js which we have to access.

cd reveal.js

Inside it, we have to RevealJS by running

sudo npm install

You will get an output per screen like this

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.5.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.4
npm notice Run npm install -g [email protected] to update!
npm notice 

To start the execution of RevealJS just run

npm start

Sample Output:

[20:27:01] Server started http://localhost:8000
[20:27:01] LiveReload started on port 35729
[20:27:01] Running server

Now just open a web browser and visit http://localhost:8000 to test it.

Now, you can start working with this tool.

In case you have installed RevealJS on a server or virtual machine, you will not be able to access it via localhost. For this, we have to modify the ~/reveal.js/gulpfile.js file.

nano ~/reveal.js/gulpfile.js

And modify this line

const host = yargs.argv.host || 'localhost'

Just replace localhost with the IP address of your computer.

Save the changes and close the editor.

Now you can run again

npm start

To specify a specific port, just run

npm start --port=1234

Where you have to replace 1234, with the desired port. Finally, to stop the execution, press CTRL + C.

Optional: Create a new Systemd service to handle RevealJS.

A good way to handle RevealJS is from a service that allows us to start and stop it easily. To complete this, create a new service.

sudo nano /lib/systemd/system/reveal.service

and add the following

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/home/user/reveal.js
ExecStart=npm start

Save the changes and close the editor. To apply the changes, run.

sudo systemctl daemon-reload

That’s all.

Conclusion

RevealJS offers us the possibility to create new presentations in a fast and very professional way using the power of web technologies. Installing it is a good way to get started with it.

I hope you liked this post and learned something new. Share it and help us to grow.