How to Install Reveal.js on Fedora

Reveal.js is a free and open-source HTML presentation framework that helps you make a beautiful presentation via a web browser. It uses open web technologies to make a presentation, change styles with CSS, include an external web page using an iframe, and use JavaScript API to add custom behavior.

In this post, we will show you how to install Reveal.js on Fedora.

Step 1 – Install Nodejs and NPM

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

dnf install nodejs npm -y

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

node --version

Output.

v14.19.0

Step 2 – Install Revealjs

First, install the Git package using the following command.

dnf install git

Next, download the latest version of Reveal.js using the following command.

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

Next, navigate to the downloaded directory and install all required dependencies using the following command.

cd reveal.js
npm install

Next, run the following command to run the Reveal.js application.

npm start

You will get the following output.

> [email protected] start /root/reveal.js
> gulp serve

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

Press the CTRL+C to stop the application. We will create a systemd service file to manage the application in the next section.

Step 3 – Create a Systemd Service File for Revealjs

Next, create a systemd unit file to manage the Reveal.js application.

nano /lib/systemd/system/reveal.service

Add the following code.

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

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

systemctl daemon-reload

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

systemctl start reveal
systemctl enable reveal

You can verify the active status of Reveal.js using the following command.

systemctl status reveal

Output.

● reveal.service
     Loaded: loaded (/usr/lib/systemd/system/reveal.service; static)
     Active: active (running) since Sat 2023-05-20 05:19:14 EDT; 4s ago
   Main PID: 12825 (npm)
      Tasks: 22 (limit: 4666)
     Memory: 128.8M
        CPU: 5.232s
     CGroup: /system.slice/reveal.service
             ├─12825 npm
             └─12836 gulp serve

May 20 05:19:14 fedora systemd[1]: Started reveal.service.
May 20 05:19:15 fedora npm[12825]: > [email protected] start /root/reveal.js
May 20 05:19:15 fedora npm[12825]: > gulp serve
May 20 05:19:18 fedora npm[12836]: [05:19:18] Using gulpfile ~/reveal.js/gulpfile.js
May 20 05:19:18 fedora npm[12836]: [05:19:18] Starting 'serve'...
May 20 05:19:18 fedora npm[12836]: [05:19:18] Starting server...
May 20 05:19:18 fedora npm[12836]: [05:19:18] Server started http://localhost:8000
May 20 05:19:18 fedora npm[12836]: [05:19:18] LiveReload started on port 35729
May 20 05:19:18 fedora npm[12836]: [05:19:18] Running server

Step 4 – Configure Nginx for Revealjs Application

At this point, the Reveal.js application is running and listening on localhost on port 8000, so you will need to configure Nginx as a reverse proxy to access the Reveal.js application from the remote machine.

First, install the Nginx package using the following command.

dnf install nginx

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

systemctl start nginx
systemctl enable nginx

Next, create an Nginx virtual host configuration file.

nano /etc/nginx/conf.d/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 and close the file, then edit the Nginx main configuration file.

nano /etc/nginx/nginx.conf

Add the following line after http{:

server_names_hash_bucket_size 64;

Save the file, then restart the Nginx service to apply the changes.

systemctl restart nginx

Step 5 – Access Revealjs Web UI

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

Conclusion

In this post, we explained how to install the Reveal.js presentation framework on Fedora. We also configured Nginx as a reverse proxy to access Reveal.js on the internet. Try to install Reveal.js on VPS hosting from Atlantic.Net!