An authentication, room and meeting management system for Jitsi based on Django/React.
Jitsi Magnify is built with ReactJS for the frontend, and Django for the backend.
Make sure you have a recent version of Docker and Docker Compose installed on your laptop:
$ docker -v
Docker version 20.10.2, build 2291f61
$ docker compose version
Docker Compose version v2.17.3
⚠️ You may need to run the following commands withsudobut this can be avoided by assigning your user to thedockergroup.
The easiest way to start working on the project is to use our Makefile :
$ make bootstrapThis command builds the app container, installs dependencies and performs database migrations.
It's a good idea to use this command each time you are pulling code from the project repository
to avoid dependency-releated or migration-releated issues.
When the command stops, check that all services are running as expected:
$ docker compose psYou should now be able to access the demo site at localhost:8070.
Finally, you can see all available commands in our Makefile with :
$ make helpYou can access the Django admin site at localhost:8071/admin.
To access the Django admin, you will first need to create a superuser account:
$ make superuserBefore running Magnify, you will need a Jitsi instance with JWT authentication activated:
ENABLE_AUTH=1
AUTH_TYPE=jwt
JWT_APP_ID=magnify
JWT_APP_SECRET={JWT_JITSI_APP_SECRET}
In the Prosody configuration, you should also set the variable:
XMPP_DOMAIN={JWT_JITSI_XMPP_DOMAIN}.
The JWT_JITSI_APP_SECRET and JWT_JITSI_XMPP_DOMAIN variables should be set to the same value
in your Jitsi instance and in Magnify.
The easiest way to run Magnify in production is to use the official Docker image.
Configuration is done via environment variables as detailed in our configuration guide.
The front project is split into two parts.
-
A first part in
src/frontend/packages/corecontains all the components, services, repositories, and even complete pages required to build a magnify application. It also includes an AppRouter component that creates an app and its default routes -
Then a sandbox application (
src/frontend/sandbox) which aims to demonstrate how to use the core package.
A set of configuration variables is required. All variables can be configured directly through the environment
variables of the Django project. They are served to the client via the /config.json API route.
Here is the list of all the available variables :
{
"API_URL": "http://localhost:8071/api" // URL of magnify api,
"JITSI_DOMAIN": "exemple.test",
"KEYCLOAK_CLIENT_ID": "magnify-front",
"KEYCLOAK_EXPIRATION_SECONDS": 1800,
"KEYCLOAK_REALM": "magnify",
"MAGNIFY_SHOW_REGISTER_LINK": true,
"KEYCLOAK_URL": "http://localhost:8080"
}
You can mock these variables by adding a config.json file in the public folder of the sandbox application.
We have added a compilation option that allows the compiler to directly access the project sources when it encounters
an import from the @openfun/jitsi-magnify package.
As a result, to use package components in the sandbox, you don't need to build the package. You just need to export them.
To learn how to export new components, please open the src/frontend/packages/core/index.ts file.
You can now navigate to the src/frontend/sandbox folder and run the yarn dev command directly. Hot reload will
work when you modify a component in the package/core.
In order to make magnify customizable, we opted to add the @openfun/cunningham-react package. cunningham documentation
However, cunningham does not contain all the necessary components. So we are still using Grommet for now. We need to do a mapping between the different cunningham tokens and the Grommet theme configuration.
To see how this mapping works, go to src/frontend/packages/core/themes/theme.ts file.
This project is intended to be community-driven, so please, do not hesitate to get in touch if you have any question related to our implementation or design decisions.
We try to raise our code quality standards and expect contributors to follow the recommandations from our handbook.
This work is released under the MIT License (see LICENSE).
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent