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

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!

:star: 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

:triangular_flag_on_post: 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

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.

:triangular_flag_on_post: 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

:triangular_flag_on_post: Do not run these as the root user. 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

  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:

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

:information_source: 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

  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.

:bulb: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:

:star: Success!


Great job! You did it!

More References

Jitsi-meet Run only on localhost or 127.0.0.1

Jitsi-meet "make" takes a long time to complete

1 Like

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 ?

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. :+1:

Hello when I use: make dev

It takes a long time with the following position

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!

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

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?

@bayraktarulku Welcome to the community!

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

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 :slight_smile:

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.

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

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.

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

The answer was hidden in plain sight, here:

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.