HTML5 Development Environment Setup

    BigBlueButton HTML5 Client Design

    If you have not already done so, you should read through the Overview of HTML5 Client

    Initial setup

    Before you begin, you will need to have a BigBlueButton 1.0-beta server installed from packages (see install BigBlueButton). Make sure your installation is functional. Try out the demos.

    Have a GitHub Account

    The BigBlueButton source is hosted on GitHub. You need a GitHub account. Also, you need to be very familiar with how git works. Specifically, you need to know how to

    • clone a repository
    • create a branch
    • push changes back to a repository

    If you have not used git before, or if the terms clone, branch, and commit are unfamiliar to you, stop now. These are fundamental concepts to git that you need to become competent with before trying to develop on BigBlueButton. To become competent, a good place to start is this free book and GitHub Help pages.

    Using GitHub makes it easy for you to work on your own copy of the BigBlueButton source, store your updates to the source to your GitHub account, and make it easy for you to contribute to BigBlueButton.

    Subscribe to bigbluebutton-dev

    We recommend you subscribe to the bigbluebutton-dev mailing list to follow updates to the development of BigBlueButton and to collaborate with other developers.

    Checking out the Source

    We want to clone the source in the following directory:


    Using your GitHub account, do the following

    1. Fork the BigBlueButton repository into your GitHub account.
    2. Clone your repository into your ~/dev folder.

    Note that you need just the master branch.

    $ git clone<YOUR_GITHUB_USERNAME>/bigbluebutton.git

    After cloning, you’ll have the following directory (make sure the bigbluebutton directory is within your dev directory).


    Confirm that you are working on the master branch.

    $ cd /home/firstuser/dev/bigbluebutton
    $ git status

    You should see

    # On branch master
    nothing to commit (working directory clean)

    When you first clone the BigBlueButton git repository, git will place you, by default, on the master branch, which is the latest code for BigBlueButton. This is the branch you want to stay on. We recommend you periodically pull the latest commits from ‘master’ so you stay up to date with the latest version.

    Installation of the HTML5 client component

    Note that if you followed the steps to install the HTML5 client from packages you already have Meteor installed and you already have the /etc/bigbluebutton/nginx/html5.nginx configuration. You can proceed straight to Running


    You will need to download some files throughout these instructions using curl. If it is not installed on your server, you can install the package using the following command

    $ sudo apt-get install curl


    You will need to install Meteor.js.

    $ curl | sh


    You will need to also install npm.

    $ sudo apt-get install npm


    You want to modify so that SVG images for the HTML5 client’s presentation are generated by default.

    $ sudo vi /var/lib/tomcat7/webapps/bigbluebutton/WEB-INF/classes/

    Set the field svgImagesRequired to true. Then restart tomcat7.

    $ sudo service tomcat7 restart

    You will need to create an nginx rule:

    $ sudo vi /etc/bigbluebutton/nginx/html5.nginx

    Copy-paste the following:

    location /html5client {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
    location /_timesync {

    Save the file. Reload:

    $ sudo /etc/init.d/nginx reload

    Test the nginx configuration

    $ sudo nginx -t

    If the output from the above command contains errors check again the nginx configuration you just edited.

    Update your Nodejs:

    curl -sL | sudo -E bash -
    sudo apt-get install -y nodejs


    Assuming that you cloned the repository in /home/firstuser/dev, navigate to

    $ cd /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/

    Install the npm dependencies

    meteor npm install

    In order to run the server side of the HTML5 client you will need to execute the following:

    $ ./

    Loading into development or production environment can be achieved by changing the value of ENVIRONMENT_TYPE in the ‘’ file. Set the value to either ENVIRONMENT_TYPE=development or ENVIRONMENT_TYPE=production, then save and run  

    $ ./

    Wait until the process starts and confirm that the configuration is valid by navigating to


    The result should be {"html5clientStatus":"running"}.


    Go to http://<your_ip>/ in the browser. Select “API examples”. Navigate to “HTML5 Client Demo” and use the form. You will enter a meeting titled “Demo Meeting”.

    On a mobile device (Android) you can simply attempt to join a meeting from http://<your_ip>/. Since your device’s browser lacks Flash by default, you will be offered to navigate to the HTML5 client instead. See what is currently implemented.

    Serve the client over HTTPS

    First, make sure you follow the instructions for configuring https on BigBlueButton. Test your server using the Flash client. Make sure the audio works and the slides display properly. Then for configuring the HTML5 client to run over HTTPS perform the following steps:

    -Modify the file so that ENVIRONMENT_TYPE=development becomes ENVIRONMENT_TYPE=production. This is required for the proper handling and display of the slide SVG files.

    -Modify /var/lib/tomcat7/webapps/demo/demoHTML5.jsp: In the <script ></script> part of the file change



    var httpsURL = "<%=html5url%>";
    httpsURL = httpsURL.replace("http://","https://");
    window.location.href = httpsURL;

    and save the file. Test your change as mentioned in Usage

    Run the client using Grunt

    You have an option of utilizing an internal Grunt setup to run Meteor process that powers the client.

    To do so, choose between two types of environment: development or production. Settings are stored separately for each mode and can be changed by modifying the following files: settings-development.json and settings-production.json (both in bigbluebutton-html5 directory). Production setup also means that some of the server-side logging is disabled by default to speed up the whiteboard.

    To modify the home directory of your Meteor installation, change the home property in either settings-development.json or settings-production.json (depending on the environment). rootURL property specifies the URL to serve the client at (defaults to

    You need to have Grunt installed:

    $ npm install -g grunt-cli

    Grunt also requires a standalone Node.js installation:

    $ sudo apt-get install nodejs-legacy

    Use grunt command to run the client in development environment. To enforce a production mode, specify it as an option: grunt --mode=production. By default, Grunt will run JSCS linter (we are using Airbnb style guide) on all the .js and .jsx files within bigbluebutton-html5, print out the outstanding warnings to the console, and then start the client. Every time any JS/JSX file changes, Grunt reruns the linter. You can use grunt autofix (or grunt autofix --mode=production) to allow JSCS to fix warnings automatically when possible.

    Localization with Transifex

    We use Transifex for crowdsourcing for BigBlueButton Internationalization(i18n). The following steps are not a part of the typical installation and are only required for bringing the language strings in github up to date.

    1. Install Transifex Client

    To installation the Transifex client we use pip, a package management system designed to manage and install Python packages.

    $ sudo apt-get install python-pip

    Next we use Pip to install the Transifex client.

    $ sudo pip install transifex-client

    The following command is used to upgrade the client to the most current version.

    $ pip install --upgrade transifex-client

    2. Transifex Project Initialization

    The tx init command is used to initialize a project. Run from the root directory of the application.

    $ tx init
    Creating .tx folder. . .
    Transifex instance []:

    Press Enter (will be prompted for your Transifex username and password)

    Creating skeleton...
    Creating config file...

    This will create a Transifex project file in the current directory containing the project’s configuration file.

    3. Transifex Client configuration


    The Transifex client uses a per project configuration file. This is located in .tx/config of your project’s root directory and is generated on running the tx init command. It should be updated with the following configuration:

    host =
    file_filter = imports/locales/<lang>.json
    source_file = imports/locales/en.json
    source_lang = en

    4. Set a Project Remote

    tx set allows you to configure and edit Transifex project files on your local computer.

    The following command is used to initialize a local project for the remote project specified by the URL.

    $ tx set --auto-remote

    Next we can pull language files located on the Transifex server.

    5. Pull: Download Transifex Translations

    To pull all translation files from the Transifex server, the following command is used.

    $ tx pull -a -r bigbluebutton-html5.enjson

    In the event that there are a lot of translations, instead of pulling all, we can specify which translations we want to acquire.

    $ tx pull -r bigbluebutton-html5.enjson -l pt_BR