# How to Install reveal.js on Arch Linux

> URL: https://www.atlantic.net/dedicated-server-hosting/how-to-install-reveal-js-on-arch-linux/ | Published: 2023-04-23 | Updated: 2023-11-17 | Author: Hitesh Jethva

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.

```
> reveal.js@4.4.0 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]: > reveal.js@4.4.0 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.

![](https://www.atlantic.net/wp-content/uploads/2023/04/p1-5.png)

## 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](https://www.atlantic.net/dedicated-server-hosting/) from Atlantic.Net!