# Demo quickstart (/en/realtime-media/flexible-classroom/quickstart/web)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Compelling content like animated presentations with embedded media helps actively engage students for longer in online classrooms. Agora Flexible Classroom helps you personalize distance learning using interactive video, shared whiteboards and other collaboration tools. With Flexible Classroom, you can quickly deploy effective online tutoring software that is customized with the features and branding your organization needs.

This page shows you how to quickly set up and launch a Flexible Classroom.

## Understand the tech [#understand-the-tech]

This section explains the workflow you implement to join a Flexible Classroom.

![Flexible Classroom join workflow](https://web-cdn.agora.io/docs-files/1623309158910)

When an app client requests to join a Flexible Classroom, the app client and your app server interact with the Agora server in the following steps:

1. Your app client sends a request to your app server for a Signaling token.
2. Your app server generates a Signaling token using the Agora [App ID](./build/manage-agora-account.mdx), [App Certificate](./build/manage-agora-account.mdx), and a user ID. For details, see [Generate a Signaling token](./build/set-up-your-account-and-authentication/authentication-workflow.mdx).
3. Your app client calls an API with the following parameters to join a Flexible Classroom:
   * *The user ID*: A unique string identifying a user, generated by your security system. This ID must be the same as the user ID you use for generating the Signaling token.
   * *The room ID*: A string for identifying a classroom. When the first user joins a Flexible Classroom, Agora automatically creates a classroom with the room ID.
   * *The Signaling token*: A credential for verifying the identity of the user when they join a Flexible Classroom.

## Prerequisites [#prerequisites]

In order to follow this procedure you must have:

* An Agora [account](./build/manage-agora-account.mdx) and [project](./build/manage-agora-account.mdx).
* A computer with Internet access. Ensure that no firewall is blocking your network communication.
* [Enabled Flexible Classroom](./build/set-up-your-account-and-authentication/enable-flexible-classroom) in Agora Console.

      
  
      
  
      
    ## Web [#web]

    * Installed [Git](https://git-scm.com/downloads)

    ## Project setup [#project-setup-2]

    To set up and run your Flexible Classroom project, you need the following tools:

    * `Node.js` JavaScript runtime environment for building and running the web project.
    * `yarn`: A package manager.
    * `nvm`: (Optional) Version management command-line tool for `Node.js`.

    ### Install the development tools [#install-the-development-tools]

    To prepare your development environment:

    1. [Download](https://git-scm.com/downloads) Git.

    2. [Download](https://nodejs.org/en) and install Node.js. It is recommended to use Node.js 16. Node.js 18 and above versions are not supported yet.

    3. Install Yarn:

       * If you have `Node.js` `16.10` or later, you can directly enable `yarn` with the following command:

         ```bash
         corepack enable
         ```

       * If you have a version of `Node.js` earlier than 16.10, you need to install `corepack` first and then enable `yarn` with the following command:

         ```bash
         npm i -g corepack enable
         ```

    4. (Optional) To install `nvm`, run the following command:

       ```bash
       curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
       ```

    5. (Optional) When Electron installation fails, you can install it by setting the Electron mirror address:

       ```bash
       export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
       export ELECTRON_CUSTOM_DIR=v12.0.0
       export ELECTRON_CUSTOMDIR=v12.0.0
       ```

    ### Download the source code [#download-the-source-code]

    To set up your Flexible Classroom project:

    1. Clone the repository locally by running the following command:

       ```bash
       git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git
       ```

    2. After the download is complete, navigate to the folder:

       ```bash
       cd flexible-classroom-desktop
       ```

    3. Best practice is to switch to the latest release.

       To switch to the branch for version `2.9.0`, run the command:

       ```bash
       git checkout release/2.9.0
       ```

    ## Implement a Flexible Classroom [#implement-a-flexible-classroom-2]

    Follow these steps to launch a Flexible Classroom:

    1. Open a terminal window and navigate to the `Flexible-Classroom-Desktop` folder. Run the following command to install the project dependencies:

       ```bash
       yarn install:packages
       ```

       If the installation dependency times out, switch to an available mirror source:

       ```bash
       # Switch to a mirror
       yarn config set registry https://registry.npmmirror.com/
       # Install dependencies
       yarn install:packages
       ```

    2. Copy the App ID and App Certificate from Agora Console and update the corresponding parameters in the `.env` file:

       ```javascript
       REACT_APP_AGORA_APP_ID={your appid}
       REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}
       ```

       To facilitate your testing, the `Flexible-Classroom-Desktop` project contains a Signaling Token generator, which can generate a temporary Signaling Token with the App ID and App Certificate you provide. When your project goes live, you must deploy a Signaling Token generator on your server to ensure security.

    3. Run the following command to launch the web client in different development modes:

       ```bash
       # Start Flexible Classroom Demo debugging
       yarn dev
       # Start AgoraEduSDK debugging
       yarn dev:classroom
       # Start Proctor SDK debugging
       yarn dev:proctor
       # Start FcrUIScene debugging
       yarn dev:scene
       ```

       If you use Node.js 17, you may encounter the `ERR_OSSL_EVP_UNSUPPORTED` error. This is because Node.js 17 has switched to OpenSSL 3.0 and conflicts with the encryption algorithm or key being used in some dependencies in the project. You can try the following two solutions:

       * Add `NODE_OPTION` parameters `--openssl-legacy-provider`

       ```bash
       # Find the Node.js configuration file packages/agora-demo-app/package.json
       # To modify the startup command under the script field, add the NODE_OPTION parameter, for example:
       # Original command
       "dev": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=6144 FCR_ENTRY=demo webpack serve --config ./webpack.dev.js"
       # Change to
       "dev": "cross-env NODE_ENV=development NODE_OPTIONS=\"--max_old_space_size=6144 --openssl-legacy-provider\" FCR_ENTRY=demo webpack serve --config ./webpack.dev.js"
       # Then start the project
       yarn dev
       ```

       * Use nvm to downgrade the Node.js version to 16

       ```bash
       # Use nvm to manage Node.js versions
       # Install nvm
       yarn global add nvm
       # Install Node.js version 16 using nvm
       nvm install 16
       # Use Node.js version 16
       nvm use 16
       # Start Flexible Classroom
       yarn dev
       ```

    ## Test your implementation [#test-your-implementation-2]

    1. Open the browser and navigate to `http://localhost:3000`. You see the login page of Flexible Classroom.

    2. To join a classroom, type in a room name and user name. Select a class type, set the user role to `Teacher` and then press **Enter**.

       You are logged in to Flexible Classroom.

    3. Install Flexible Classroom on a second device. Login with the same credentials but this time set the user role to `Student`.

    4. The `Teacher` and `Student` can now interact and communicate using Flexible Classroom features.

    
  
      
  
## References [#references]

To ensure communication security in a test or production environment, use a token server to generate tokens. See [Secure authentication with tokens](./build/set-up-your-account-and-authentication/authentication-workflow.mdx).