How to Install reveal.js on Arch Linux

reveal.js is a free and open-source HTML presentation framework. It allows users to create a simple and beautiful presentation via a web browser. You’ll need a browser with support for CSS 3D transforms to see it in its full glory. With reveal.js, you can create a presentation that supports mobile gestures, such as pinch and slide.

In this post, we will show you how to install reveal.js with Nginx on Arch Linux.

Step 1 – Configure Repository

By default, the default repository is outdated in Arch Linux, so you will need to modify the default mirror list. You can do it by editing the mirror list configuration file:

nano /etc/pacman.d/mirrorlist

Remove all lines and add the following lines:

## Score: 0.7, United States
Server = http://mirror.us.leaseweb.net/archlinux/$repo/os/$arch
## Score: 0.8, United States
Server = http://lug.mtu.edu/archlinux/$repo/os/$arch
Server = http://mirror.nl.leaseweb.net/archlinux/$repo/os/$arch
## Score: 0.9, United Kingdom
Server = http://mirror.bytemark.co.uk/archlinux/$repo/os/$arch
## Score: 1.5, United Kingdom
Server = http://mirrors.manchester.m247.com/arch-linux/$repo/os/$arch
Server = http://archlinux.dcc.fc.up.pt/$repo/os/$arch
## Score: 6.6, United States
Server = http://mirror.cs.pitt.edu/archlinux/$repo/os/$arch
## Score: 6.7, United States
Server = http://mirrors.acm.wpi.edu/archlinux/$repo/os/$arch
## Score: 6.8, United States
Server = http://ftp.osuosl.org/pub/archlinux/$repo/os/$arch
## Score: 7.1, India
Server = http://mirror.cse.iitk.ac.in/archlinux/$repo/os/$arch
## Score: 10.1, United States
Server = http://mirrors.xmission.com/archlinux/$repo/os/$arch

Save and close the file, then update all the package indexes with the following command:

pacman -Syu

Step 2 – Install Node.js and NPM

Before starting, you will need to install Node.js and NPM packages on your server. You can install both packages with the following command:

pacman -S nodejs npm

Once both packages are installed, you can verify the Node.js version with the following command.

node --version

You should see the following output.

v19.8.1

Step 3 – Install reveal.js

First, install the Git package using the following command.

pacman -S git

Next, download the latest version of reveal.js with the following command.

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

Once the download is completed, navigate to the reveal.js directory and install all the required dependencies using the following command.

cd reveal.js
npm install

You can now run reveal.js with the following command.

npm start

If everything is fine, you will get the following output.

> [email protected] start
> gulp serve

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

Press the CTRL+C to stop the application.

Step 4 – Create a Systemd Service File for reveal.js

It is recommended to create a systemd file to manage reveal.js. You can create it with the following command.

nano /lib/systemd/system/reveal.service

Add the following lines.

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

Save and close the file, then reload the system to apply the changes.

systemctl daemon-reload

Next, start and enable the reveal.js service.

systemctl start reveal.service
systemctl enable reveal.service

To check the service status, run the following command.

systemctl status reveal.service

You will get the following output.

● reveal.service
     Loaded: loaded (/usr/lib/systemd/system/reveal.service; static)
     Active: active (running) since Sat 2023-03-25 13:35:33 UTC; 35s ago
   Main PID: 7113 (npm start)
      Tasks: 22 (limit: 4685)
     Memory: 259.6M
        CPU: 15.621s
     CGroup: /system.slice/reveal.service
             ├─7113 "npm start"
             └─7124 "gulp serve"

Mar 25 13:35:33 archlinux systemd[1]: Started reveal.service.
Mar 25 13:35:34 archlinux npm[7113]: > [email protected] start
Mar 25 13:35:34 archlinux npm[7113]: > gulp serve
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Using gulpfile ~/reveal.js/gulpfile.js
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Starting 'serve'...
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Starting server...
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Server started http://localhost:8000
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] LiveReload started on port 35729
Mar 25 13:35:36 archlinux npm[7124]: [13:35:36] Running serve

Step 5 – Configure Nginx as a Reverse Proxy

First, install the Nginx package with the following command.

pacman -S nginx-mainline

Next, start and enable the Nginx service with the following command.

systemctl start nginx
systemctl enable nginx

Next, create a directory to store the Nginx virtual host.

mkdir /etc/nginx/sites-enabled

Next, create an Nginx configuration file for reveal.js.

nano /etc/nginx/sites-enabled/reveal.conf

Add the following configuration.

upstream reveal_backend {
  server localhost:8000;
}

server {
    listen 80;
    server_name reveal.example.com;

    location / {
        proxy_pass http://reveal_backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Save the file, then edit the Nginx main configuration file.

nano /etc/nginx/nginx.conf

Add the following lines after http{:

server_names_hash_bucket_size 64;
include sites-enabled/*;

Save the file, then verify the Nginx configuration using the following command.

nginx -t

You will get the following output.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Finally, restart the Nginx service to apply the changes.

systemctl restart nginx

Step 6 – Access reveal.js Web UI

Now, open your web browser and access the reveal.js web interface using the URL http://reveal.example.com. You should see the reveal default slide on the following screen.

Conclusion

In this post, we explained how to install reveal.js on Arch Linux. We also showed you how to configure Nginx as a reverse proxy for reveal.js. You now try to deploy reveal.js on dedicated server hosting from Atlantic.Net!