[How to] How to build Jitsi Meet from source: A developer's guide

[corby]

Last Updated: 2021-05-26T04:00:00Z

---

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 vi and make and 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:

1. 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 clone the repositories, change files and run make. More Details

2. Development of UI changes on a local webserver (https://localhost:8080/) with remote backend Jitsi servers. In this case the commands make dev and webpack-dev-server are used to for developing and testing UI changes locally. This setup uses alpha.jitsi.net as 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

1. Setup your Jitsi Meet server & test meetings

You should (already) have a fully deployed server per the quick install.

Before you 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 install curl && sudo apt install make
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install -y nodejs

Note as of 2021-05-16T04:00:00Z the latest “long-term support” (LTS) version of node is 14.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 >= 14 and npm >= 6 as required:

Command:

node -v && npm -v

✓ Result Looks Good:

v14.17.0
6.14.13

3. Clone jitsi-meet src from git, update & install

Do >>not<< run build commands as the root user. Run all commands from a normal user.

cd ~
git clone https://github.com/jitsi/jitsi-meet.git
cd ~/jitsi-meet/
npm update && npm install

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

1. Edit the package file: vi ~/jitsi-meet/package.json.
2. 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:

sudo rm -R ~/jitsi-meet/node_modules/lib-jitsi-meet
cd ~/lib-jitsi-meet
npm update

The first command above will remove lib-jitsi-meet from node_modules - This would have been added in step 3 npm actions. Doing this now will avoid seeing the Error: ENOENT: no such file or directory errors.

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

Some users in the community have encountered issues with this step, seeing Error: ENOENT: no such file or directory, rename... - If you see this error, try first deleting the lib-jitsi-meet folder from ~/jitsi-meet/node_modules and run make again using: rm -R ~/jitsi-meet/node_modules/lib-jitsi-meet && cd ~/jitsi-meet/ && npm install lib-jitsi-meet --force && make

6. 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;
...
}

Make sure you review your entire conf file & replace any other relevant occurrences of /usr/share/jitsi-meet wirh /home/ubuntu/jitsi-meet

7. Restart nginx and verify

1. Restart nginx: sudo service nginx restart
2. 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.

8. Edit code & remake make to verify your changes.

Now we will change something simple, rebuild and reload. Let’s change the headerSubtitle text on the home page.

Edit the language file: vi ~/jitsi-meet/lang/main.json and search for "headerSubtitle" and add "Hello World!!" before "Secure and high quality meetings", like this:

"headerSubtitle": "Hello World!! Secure and high quality meetings",

Save your changes and then 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!

More References

Jitsi-meet Run only on localhost or 127.0.0.1 - #2 by damencho

Jitsi-meet "make" takes a long time to complete - #2 by damencho

[tusharsonawane]

Hi, @corby from what I understand,

1. This is a normal installation version, and you are making changes in a different folder and configuring nginx to use the same.

2. In my docker-jitsi version, I am directly modifying the source files which works for me.

is there any other workaround for this ? I understand that we have to build it from the source, but from where do I access the “menu” settings, or what is the flow, what files do I have to change ?

[corby]

This guide is an expansion of the developer’s handbook.

It does not cover the different types of changes you can make to the code or where files are for different features.

I challenge you to work your way through your specific needs using docker and once successful, write a helpful post for the rest of community to learn from your experience.

[kar_mac]

Hello when I use: make dev

It takes a long time with the following position

[corby]

You are using a VM… I would make sure you have plenty of available memory or you will see ‘out of memory errors’ during make. Good luck!

[kar_mac]

@corby make works fine, but only make dev give me the following output.
note: VM has 4GB memory

[bayraktarulku]

sometimes when I do run-make it works as described here. But sometimes
‘’’
./node_modules/.bin/webpack -p
make: ./node_modules/.bin/webpack: Command not found
make: *** [Makefile: 19: compile] Error 127
‘’’

I’m getting an error. In this case, I undo the operation, uninstall the node_modules and package-lock.json packages and redo all the installations. If I don’t get an error, just leave it. However, it is not always a consistent method of operation. Do you have any suggestions?

[corby]

@bayraktarulku Welcome to the community!

This is interesting… No sir, I have not seen this before. Maybe others in the community can comment?

[bayraktarulku]

It seems strange to me not to get this error every time. I think I’m making a mistake somewhere but I can’t figure out what happened. Maybe I can get a suggestion

I have one more problem actually;
I got an error when connecting my local copy to lib-jitsi-meet (pretends to be under node_modules//lib-jitsi-meet. But it should be node_modules/lib-jitsi-meet). But I think I should examine this issue differently.

[bayraktarulku]

I understand my problem;
I had to reinstall webpack to get it working with my local version of webpack. I didn’t have this problem again after updating webpack package

$ npm uninstall webpack
$ npm i -D webpack

[mgg]

@corby

For now, this guide will only cover Development of changes on a server .

Oh - I was so excited when I read the beginning of this guide. Any thoughts as to when you might continue it?

I am working towards exactly what was described here – UI changes on a local webserver – and would love just a bit more hand-holding on the setup so that node.js (?) is serving the right files. As of now I’m hitting errors with app.bundle.min.js and I’m pretty sure I’ve got something wrong that’s responsible for this… I’d love to be simply using the backend alpha.jitsi.net for server but making changes to and testing the UI modules.

[mgg]

AHA… actually I just finally sorted out what I was doing wrong.

The answer was hidden in plain sight, here:

Developer Guide (Web) · Jitsi Meet Handbook

I didn’t understand that the webpack-dev-server was a fully-featured server that would start and run by itself, serving the app from the sources in my local jitsi-meet and all I had to do to get it going was to run make dev from the command line (CLI) in that directory.

After doing so, I visited https://localhost:8080/ and there it was! (Once I got rid of Chrome’s pesky warnings, by following the instructions directly after the line I liked to above in the Handbook).

Thanks @corby and company – I look forward to much experimenting with Jitsi in the coming days.

[alexclaydon]

I wrote an extended blog post on my experiences working with a Docker deployment. This post describes how I set up my development environment, including live-reloading of the front-end using webpack and rapid Docker container rebuilds of the back-end. Hopefully that will be of some use to people looking for examples of Docker dev deployments.

[sampath9875]

Unable to verify my changes. I changed the appDescription as mentioned in the step 5. But even after I remake the project and restart nginx, I’m unable to see them. They aren’t reflecting in the landing page of the app.

I made changes in ~/jitsi-meet/lang/main.json (changed the content of appDescription and as tried deleting as well).

Also tried updating some attributes in interface_config.js to verify if it reflects. But to no avail. How do I proceed here? Any pointers are appreciated.

[jrapdx]

Not exactly sure where your trouble lies, and my experience may not apply to your situation. However FWIW I’ve changed the landing page in a similar manner, though my procedure was somewhat different.

I’m running Windows with an msys2 environment. (Quite likely WSL would work even better.) I downloaded the jitsi source, modified main.json, then compiled with a simple ‘make’ command in the source top-level directory.

Of course before that I had to use “npm install webpack” which puts a gigabyte or more into the node_modules directory.

Anyway after compiling I uploaded ‘libs/app.bundle.min.*’ to ‘/usr/share/jitsi-meet/libs’ on the server. Then the changes were reflected on the landing page.

I’m guessing your problem is that the compiled ‘app.bundle.min.js’, etc., didn’t make it into the jitsi-meet/libs directory where jitsi is being served from. I’ve not set up an “official” dev environment, so the trouble may well originate elsewhere.

[hamed_fathi]

I had the same problem but finally I found the solution. Please comment all lines which contain “/usr/share/jitsi-meet/” and then add a new line which contains “/home/ubuntu/jitsi-meet” in /etc/nginx/sites-available/meet.domain.com.conf. Then restart nginx.

[maxerist]

At least myself and others met an error when performing step 5, explained here. The solution mentioned (delete jitsi-meet/node_modules) helped in my case, so either

• this step might be mentioned in the main description in this topic
• suggest an alternative, maybe a better solution
• if this error is temporary error doomed to disappear in near future, then do nothing
  Thanks

[corby]

@maxerist welcome to the community!

Thanks for the suggestion. I did not encounter this myself but I did update the original post (above) to mention this error and the proposed work around.

[maxerist]

Thanks for such a rocket-speed reaction.

Another suggestion partly related to the nginx config in general, partly to the wish for this tutorial to be as painless as possible.
I changed root in the nginx config, but something was not right and I finally noticed that some subpathes /usr/share/jitsi-meet was hardcoded in the config, so for example no recompiled libs js files was served from my new working folder. I tried to use $document_root at such places bug nginx forbid to use this variable in aliases, but the trick with an indirect variable works, so the following change

set $myroot /usr/share/jmod/jitsi-meet;
root $myroot;
…
location = /external_api.js {
alias $myroot/libs/external_api.min.js;
}
…
location ~ ^/(libs|css|static|…
{
add_header …
alias $myroot/$1/$2;
…

seems to serve the goal (to have to alternating root lines in the nginx config allowing to quickly switch between the installed and working versions of jitsi)

[corby]

Maybe it’s simply worth mentioning you should replace all occurrences of the old path /usr/share/jitsi-meet with the new one /home/ubuntu/jitsi-meet. I’ll add that as well.