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!
