How to Host Your Own Element Web Client on Ubuntu 20.04
2 min read

How to Host Your Own Element Web Client on Ubuntu 20.04

Ever wanted your own Element Web Client hosted on your server? Look no further! Join us on the journey of installing your own Element Web Client.
How to Host Your Own Element Web Client on Ubuntu 20.04

If you haven't already, please check out our tutorial on how to set up your very own Matrix-Synapse install on Ubuntu 20.04.

In this tutorial, we will show you how to set up your own copy of the Element Web Client (for all of you privacy conscious folk out there) to use with your Matrix Synapse server.

Prerequisites

In order for you to run your own Element Web Client there are a few resources that you need first.

Node.js

Node.js with a version of v10.x+ is required to run the Element Web Client. Check out our more in-depth article with different options to installing Node.js if you'd like. However, for this tutorial I will just include installing Node.js from the default repositories.

sudo apt update && sudo apt install nodejs

You will then want to check to ensure you have a compatible version of Node.js

nodejs -v

Yarn

After you have installed Node.js, you will need to install Yarn.

First, add the repositories:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Then, all you need to do is run:

sudo apt update && sudo apt install yarn

Other Miscellaneous Dependencies

After reading through some forums and git issues, I was able to find a few dependencies that users had troubles with. Thus, here are a few that you may want to check to see if you need them.

rimraf

sudo npm i -g rimraf

Babel

sudo npm install @babel/cli -g

sudo npm install @babel/core -g

Once Babel has been installed, verify that your version is higher than v7.0.0.

babel -V

TypeScript

sudo npm install -g typescript

Installing the Element Web Client

Grab a copy of the Element Web Client

First, you will need to grab a copy of the Element Web Client. This is done by simply cloning the git repo:

git clone https://github.com/vector-im/element-web.git

cd element-web

After the git clone has completed and you've entered the 'element-web' directory, run the install:

npm install

Running the Element Web Client

Now, you should be good to test out your shiny new Element Web Client. Give it a whirl by running:

npm start &

If all goes according to plan you should see the progress percentage hit 100%.

You should be able to visit port 8080 on your server and log in to Element (using the default homeserver or your own homeserver).

You can then type CTRL + C to exit the npm start command and go about your business. The Element Web Client will remain running in the background even after you exit your SSH session.

Conclusion

After you have set this up, you can pair it up with your favourite web server (Apache 2 or Nginx) and start chatting about with friends, family, or work colleagues. The sky is the limit!

Should you have any problems, give me a shout and I'll do my best to help you out.

Enjoying these posts? Subscribe for more