Do you want to make changes to the meeting page? How about add a new feature or change the behavior of an existing one? Are you a developer with coding experience? This is the guide for you!
This post will help you get started with developing Jitsi Meet and walk you through a simple change to verify your setup.
➤ About this Guide
This guide is intended for developers with experience with java, javascript, css, and other programming & scripting languages. Running
viandmakeand other commands in bash is an every day occurrence. Use caution with this guide as it assumes and implies a lot of experience. It does not cover the different types of changes you can make to the code or where files are for different features.
Getting started
First, there are 2 main development paths:
-
Development of changes on a server that first went through Self-Hosting Guide from the handbook - In this option you ssh into the server,
git clonethe repositories, change files and runmake. More Details -
Development of UI changes on a local webserver (https://localhost:8080/) with remote backend Jitsi servers. In this case the commands
make devandwebpack-dev-serverare used to for developing and testing UI changes locally. This setup usesalpha.jitsi.netas the backend by default, unless you change it. After you finish your local changes, you would need to upload them to your production Jitsi Meet server.
For now, this guide will only cover Development of changes on a server.
Full Server Development Setup
To get started with developing on a full server, you should read the developer guide in the handbook. It’s considered the master reference and it may change, so please read that first.
1. Setup your Jitsi Meet server & test meetings
You should (already) have a fully deployed server per the quick install.
Before you make check out or change any code, make sure you can join meetings between 3 people (or browser tabs) using your server. If this doesn’t work properly, stop here and troubleshoot the basic operations before continuing.
2. Install the right version of npm and node.
This is critical step! Make sure this is correct before you try to make anything. To get a the latest LTS version of npm and node, run:
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs
Note as of 2020-08-21T04:00:00Z the latest “long-term support” (LTS) version of node is 12.x. This will change as time goes on. Check for the latest version here:
Now, verify the version you have installed. The following command will output versions of Node.js >= 12 and npm >= 6 as required:
Command:
node -v && npm -v
✓ Result Looks Good:
v12.18.3
6.14.6
3. Clone jitsi-meet src from git, update & install
cd ~
git clone https://github.com/jitsi/jitsi-meet.git
cd ~/jitsi-meet/
npm update && npm install
rootuser. Run all commands from a normal user.
4. Clone lib-jitsi-meet src from git & link with jitsi-meet
cd ~
git clone https://github.com/jitsi/lib-jitsi-meet.git
Next we will link up your local copy lib-jitsi-meet with your jitsi-meet - If you skip this step (you can) npm will automatically pull from github:jitsi/lib-jitsi-meet
- Edit the package file:
vi ~/jitsi-meet/package.json. - Search for and change:
"lib-jitsi-meet": "github:jitsi/lib-jitsi-meet"→"lib-jitsi-meet": "file:../lib-jitsi-meet"(Yes,file:../is correct.)
Next, run npm update for this project as well:
cd ~/lib-jitsi-meet
npm update
5. Run make
cd ~/jitsi-meet/
npm install lib-jitsi-meet --force && make
Expected output looks something like this:
npm WARN using --force I sure hope you know what you are doing.
> lib-jitsi-meet@0.0.0 postinstall /home/ubuntu/jitsi-meet/node_modules/lib-jitsi-meet
> webpack -p
Hash: 2fc2b2ae75925a9c491d
Version: webpack 4.43.0
Child
Hash: 2fc2b2ae75925a9c491d
Time: 8921ms
Built at: 08/21/2020 2:33:54 PM
Asset Size Chunks Chunk Names
lib-jitsi-meet.min.js 683 KiB 0 [emitted] lib-jitsi-meet
lib-jitsi-meet.min.map 2.84 MiB 0 [emitted] [dev] lib-jitsi-meet
Entrypoint lib-jitsi-meet = lib-jitsi-meet.min.js lib-jitsi-meet.min.map
[1] ./JitsiConferenceEvents.js 10.4 KiB {0} [built]
[3] ./modules/browser/index.js 98 bytes {0} [built]
[5] ./modules/statistics/statistics.js 23.3 KiB {0} [built]
[7] ./service/statistics/AnalyticsEvents.js 17.4 KiB {0} [built]
[9] ./service/RTC/MediaType.js 184 bytes {0} [built]
[11] ./modules/util/GlobalOnErrorHandler.js 2.1 KiB {0} [built]
[13] ./modules/RTC/RTC.js 28 KiB {0} [built]
[14] ./JitsiTrackErrors.js 1.72 KiB {0} [built]
[15] ./JitsiTrackEvents.js 1.5 KiB {0} [built]
[16] ./JitsiConferenceErrors.js 2.62 KiB {0} [built]
[19] ./JitsiTrackError.js 5.28 KiB {0} [built]
[22] ./modules/detection/DetectionEvents.js 2.51 KiB {0} [built]
[25] ./modules/videosipgw/VideoSIPGWConstants.js 1.46 KiB {0} [built]
[140] ./index.js 160 bytes {0} [built]
[141] ./JitsiMeetJS.js 21.8 KiB {0} [built]
+ 144 hidden modules
.
.
.
+ lib-jitsi-meet@0.0.0
updated 1 package in 34.049s
47 packages are looking for funding
run `npm fund` for details
.
.
.
./node_modules/.bin/node-sass css/main.scss css/all.bundle.css && \
./node_modules/.bin/cleancss --skip-rebase css/all.bundle.css > css/all.css ; \
rm css/all.bundle.css
Rendering Complete, saving .css file...
Wrote CSS to /home/ubuntu/jitsi-meet/css/all.bundle.css
([ ! -x deploy-local.sh ] || ./deploy-local.sh)
rm -fr build
Its normal to see many
npm WARN...but if you get errors or do not generally see output like above then something could have gone wrong. Otherwise, continue on
5. Configure nginx to use your local folder
Edit your nginx conf file:
sudo vi /etc/nginx/sites-available/meet.domain.com.conf
Assuming your local user is called ubuntu your conf file would look something like this:
server
{
listen meet.domain.com:443 ssl http2;
server_name meet.domain.com;
...
ssl_certificate /etc/ssl/meet.domain.com.crt;
ssl_certificate_key /etc/ssl/meet.domain.com.key;
# Comment the next line out, so you can revert later, if needed
#root /usr/share/jitsi-meet;
# Add this new line below
root /home/ubuntu/jitsi-meet;
...
}
5. Restart nginx and verify
- Restart nginx:
sudo service nginx restart - Open a new meeting with a few tabs to verify the page loads. If you don’t make it this far, do not continue on.
Before you start making any code changes, you should be sure your meetings are actually loading form the source and everything is working properly.
5. Edit code & remake make to verify your changes.
Now we will change something simple, rebuild and reload. Let’s change the appDescription text on the home page.
Edit the language file: vi ~/jitsi-meet/lang/main.json and search for "appDescription" and add “Hello!” before “Go ahead, video chat…”, like this:
"appDescription": "Hello! Go ahead, video chat with the whole team. In fact, invite everyone you know. {{app}} is a fully encrypted, 100% open source video conferencing solution that you can use all day, every day, for free — with no account needed.",
After you save, rerun make:
cd ~/jitsi-meet/
npm install lib-jitsi-meet --force && make
After make is completed, refresh your meeting homepage in the browser. You should now see your changes:
Success!
Great job! You did it!
