How to Install Reveal.js on Ubuntu 20.04 LTS [Easy Steps]

Table of Contents

How to Install Reveal.js on Ubuntu 20.04 LTS

Also Read: How to Enable or Disable Universe, Multiverse and Restricted Repository on Ubuntu 20.04

Step 1: Prerequisites

a) You should have a running Ubuntu 20.04 LTS Server.

b) You should have sudo or root access to run privileged commands.

c) You should have apt or apt-get and git utility installed in your Server.

Step 2: Update Your Server

In the very first step you need to update your server by using apt update or apt-get update command as shown below.

NOTE:

Please note that here I am using root user to run all the below commands. You can use any user with sudo access to run all these commands. For more information Please check Step by Step: How to Add User to Sudoers to provide sudo access to the User.

root@localhost:~# apt update
Hit:1 http://in.archive.ubuntu.com/ubuntu focal InRelease
Get:2 http://in.archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
Get:3 http://in.archive.ubuntu.com/ubuntu focal-backports InRelease [101 kB]
Get:4 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
Hit:5 https://apt.releases.hashicorp.com focal InRelease
Hit:6 http://ppa.launchpad.net/ansible/ansible/ubuntu focal InRelease
Hit:7 https://packages.microsoft.com/repos/edge stable InRelease
Hit:8 https://packages.grafana.com/oss/deb stable InRelease
Hit:9 http://ppa.launchpad.net/micahflee/ppa/ubuntu focal InRelease
Get:10 http://in.archive.ubuntu.com/ubuntu focal-updates/main amd64 DEP-11 Metadata [283 kB]
Get:11 http://in.archive.ubuntu.com/ubuntu focal-updates/universe amd64 DEP-11 Metadata [362 kB]
Get:12 http://in.archive.ubuntu.com/ubuntu focal-updates/multiverse amd64 DEP-11 Metadata [940 B]
Get:13 http://in.archive.ubuntu.com/ubuntu focal-backports/universe amd64 DEP-11 Metadata [10.4 kB]

Step 3: Install Node.js

In the next step, you need to install Node.js using apt install nodejs -y command as shown below.

root@localhost:~# apt install nodejs -y
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
libc-ares2 libnode64 nodejs-doc
Suggested packages:
npm
The following NEW packages will be installed:
libc-ares2 libnode64 nodejs nodejs-doc
0 upgraded, 4 newly installed, 0 to remove and 8 not upgraded.
Need to get 6,807 kB of archives.
After this operation, 30.7 MB of additional disk space will be used.
Get:1 http://in.archive.ubuntu.com/ubuntu focal-updates/main amd64 libc-ares2 amd64 1.15.0-1ubuntu0.1 [38.2 kB]
Get:2 http://in.archive.ubuntu.com/ubuntu focal/universe amd64 libnode64 amd64 10.19.0~dfsg-3ubuntu1 [5,765 kB]
Get:3 http://in.archive.ubuntu.com/ubuntu focal/universe amd64 nodejs-doc all 10.19.0~dfsg-3ubuntu1 [942 kB]
Get:4 http://in.archive.ubuntu.com/ubuntu focal/universe amd64 nodejs amd64 10.19.0~dfsg-3ubuntu1 [61.1 kB]
Fetched 6,807 kB in 1s (6,908 kB/s)
Selecting previously unselected package libc-ares2:amd64.

Step 4: Check Node Version

To check the node current installed version, you can use node -v command. As shown below, current installed version is v10.19.0.

root@localhost:~# node -v
v10.19.0

Step 5: Install NPM Package Manager

Then you also going to need the Node.js Package Manager called npm for Reveal.js installation. So first you need to install the package manager by using apt install npm -y command as shown below.

root@localhost:~# apt install npm -y
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
gyp libjs-inherits libjs-is-typedarray libjs-psl libjs-typedarray-to-buffer libnode-dev libpython2-stdlib libpython2.7-minimal libpython2.7-stdlib
libssl-dev libuv1-dev node-abbrev node-ajv node-ansi node-ansi-align node-ansi-regex node-ansi-styles node-ansistyles node-aproba node-archy
node-are-we-there-yet node-asap node-asn1 node-assert-plus node-asynckit node-aws-sign2 node-aws4 node-balanced-match node-bcrypt-pbkdf node-bl
node-bluebird node-boxen node-brace-expansion node-builtin-modules node-builtins node-cacache node-call-limit node-camelcase node-caseless node-chalk
.......................................................................................

Step 6: Check npm version

You can verify the installation of NPM Package Manager by checking the current installed version using npm --version command. As you can see current version is 6.14.4.

root@localhost:~# npm --version
6.14.4

Step 7: Clone Reveal.js Repository

You need to first clone the Repository by using git clone https://github.com/hakimel/reveal.js.git command. This will create a local reveal.js directory and clone all the files under it.

root@localhost:~# git clone https://github.com/hakimel/reveal.js.git
Cloning into 'reveal.js'...
remote: Enumerating objects: 14829, done.
remote: Total 14829 (delta 0), reused 0 (delta 0), pack-reused 14829
Receiving objects: 100% (14829/14829), 16.80 MiB | 9.20 MiB/s, done.
Resolving deltas: 100% (8450/8450), done.

Step 8: Install Dependencies

Next step is to install the dependencies by changing the directory to reveal.js using cd reveal.js command and then install all the dependencies using npm install command. You can also run both the step in one single command by using cd reveal.js && npm install command as shown below.

root@localhost:~# cd reveal.js && npm install
npm WARN @babel/eslint-parser@7.14.3 requires a peer of eslint@>=7.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/rollup/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/sass/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 794 packages in 3.974s

29 packages are looking for funding
run `npm fund` for details

found 9 vulnerabilities (2 moderate, 7 high)
run `npm audit fix` to fix them, or `npm audit` for details

Step 9: Start npm service

Then start this package by using npm start command. This will start serving request on Port 8000 of your local server. If Port 8000 is in use or if you want to start the service on some other port then you can specify the detail using --port option. For example, if you want to use some other free Port like 8002 then you need to use npm start -- --port=8002 command to start the service on Port 8002.

root@localhost:~/reveal.js# npm start

> reveal.js@4.1.3 start /root/reveal.js
> gulp serve

[14:44:20] Using gulpfile ~/reveal.js/gulpfile.js
[14:44:20] Starting 'serve'...
[14:44:20] Starting server...
[14:44:20] Server started http://localhost:8000
[14:44:20] LiveReload started on port 35729
[14:44:20] Running server

Step 10: Create a Systemd Service

In the previous step, you might have noticed that running npm start command directly on a command prompt might not be a good idea. This is because if you try to exit the prompt, then service will get stopped or if you want the command prompt back then you cannot get it without getting the service stopped. Another good reason is that this is not the recommended way to start and run a service. You should always run all the services through SystemD.

So here also we will create a SystemD service to start, stop or restart reveal.js service. You just need to create a file under /lib/systemd/system directory path and use the below content to create the reveal service. You can provide the WorkingDirectory path based on your local reveal.js path. After providing below contents, save and close the file by using Ctrl+X and then provide Y to save and exit.

root@localhost:~# nano /lib/systemd/system/reveal.service
[Unit]
Description="Reveal.js Service"

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

[Install]
WantedBy=default.target
Alias=reveal.service

Then reload the SystemD daemon using systemctl daemon-reload command as shown below.

root@localhost:~# systemctl daemon-reload

Now you can start the service by using systemctl start reveal command and then check the status using systemctl status reveal command.

root@localhost:~# systemctl start reveal
root@localhost:~# systemctl status reveal
● reveal.service - "Reveal.js Service"
Loaded: loaded (/lib/systemd/system/reveal.service; disabled; vendor preset: enabled)
Active: active (running) since Sat 2021-10-30 20:11:48 IST; 6s ago
Main PID: 3956 (npm)
Tasks: 23 (limit: 2312)
Memory: 56.2M
CGroup: /system.slice/reveal.service
├─3956 npm
├─3967 sh -c gulp serve
└─3968 gulp serve

Oct 30 20:11:48 localhost systemd[1]: reveal.service: Succeeded.
Oct 30 20:11:48 localhost systemd[1]: Stopped "Reveal.js Service".
Oct 30 20:11:48 localhost systemd[1]: Started "Reveal.js Service".
Oct 30 20:11:50 localhost npm[3956]: > reveal.js@4.1.3 start /root/reveal.js
Oct 30 20:11:50 localhost npm[3956]: > gulp serve

If you want sustain the service status even after restart of your Server then you need to enable the service by using systemctl enable reveal command as shown below.

root@localhost:~# systemctl enable reveal
Created symlink /etc/systemd/system/reveal.service → /lib/systemd/system/reveal.service.
Created symlink /etc/systemd/system/default.target.wants/reveal.service → /lib/systemd/system/reveal.service.

Step 11: Open Reveal.js UI

You can now open your favorite web browser like Firefox and use the URL http://<server_name>:8000 to open Reveal.js UI.

Cyberithub