Jitsi-meet local dev environment setup

I am trying to setup a local jitsi-meet development environment. After cloning the repo the instructions I followed were

npm install
make dev

The localhost:8080 is running perfectly but all the files ( HTML + JS + CSS ) are pulled from https://alpha.jitsi.net… essentially not reflecting any changes I am making to the local folder.

I would like to be able to load the files from the local folder WITHOUT having to deploy to any live server. In other words I would like to run it and develop against my local environment.

If there is a step-by-step guide on how to do that I would greatly appreciate it!!

Thanks in advance!!!

1 Like

if you do instead of make dev
./node_modules/.bin/webpack-dev-server -d
does it change something ?

@gpatel-fr nope, nothing changes!

I have been less than precise, my exact meaning was

npm install
make
./node_modules/.bin/webpack-dev-server -d

@gpatel-fr still the same thing. Files such as interface_config.js are not being loaded from local source.

I think that’s because they are not supposed to be. But you can probably work around that by changing webpack.config.js

function devServerProxyBypass({ path }) {
(...)
    if (path.startsWith('/interface_config.js')) {
        return path;
    }

The whole point of developing locally is that all changes can be tested right away including interface_config.js. I should not be required to write custom methods to override the proxy!

@damencho any thoughts?

1 Like

What I do not understand is … why there is literally no good information/guide to setting up a development environment! I mean there are a bunch of comments and posts that contain bits and pieces but nothing concrete. It should be a no brainer and in the best interest of the Jitsi community to gather more developers and promote the project…just my two cents :slight_smile:

@gpatel-fr actually NONE of the files ( html + css + js ) are loaded from the local folder!

Well, I am not a Jitsi contributor, just a random poster trying to help people having trouble. So please don’t complain to me, you are not talking to a support service.

So my posting are best guesses and I can’t provide you the definitive information you want. What I think - but I may very well be wrong - is that most of the files are compiled by ‘make’ to the libs/ directory, for example conference.js goes into app.bundle.min.js.
If you change these files when the webpack server runs, nothing changes because they are not compiled real time.
So if you change conference.js, exit the webpack server, run make and ./node_modules/.bin/webpack-dev-server -d, you will get the result in your browser.

About interface_config.js it’s not built by webpack (it’s a config file editable by the server administrator), I have no clue on the reason it’s not picked currently by webpack server. Maybe it’s a bug, maybe there is something deeper.

@gpatel-fr Thank you for your help!

I am simply talking about files like index.html that is not being served from the local folder.

Index.html holds the config, and that is downloaded from the server with the config of the server so you can connect.
make dev is a way to speed development, so you don’t need to upload all bundles and source on your dev deployment. It loads some resources and reloads when code changes in any of the bundles.
If you need to modify stuff like index, config, backend, etc. then do it on your deployment and develope using your deployment.
This is what jitsi-meet devs usually do.
We had added an example deployment for the simple changes and that works.

@damencho what is the point of ‘make dev’ and running it on localhost if it does not load local files… I do not get it!!

How do you develop against it? Deploy to a different server for every change?

Another question…what exactly can I modify in order to see the changes right away on localhost?

If you change anything under react folder. The bundle will be rebuilt and your page will reload.

It loads the most important files, the bundles, which take a lot of time to deploy … and this way it greatly speeds development

@damencho Thanks!

So if I wanted to change the logo and replace the icons on the inside pages…where should I do that?

There are some settings in interface config the rest is may be in toolbox feature in react.

Thank you!

@damencho … do you happen to know why the changes to .SCSS files are not immediately visible on localhost? ( as far as i can tell only after make dev rebuild )

@artknight

This is probably wrong question to ask at this point. But any of your insight will be greatly appreciated.

I want to install JITISI on my ubuntu server on some location like var/html/www. So, right now i am able to clone it and npm install everything. But when i run “make dev” it is not successfully. How did you solve that?

Once installation is done how do i run it so that i get a preview on browser?