Skip to main content

App architecture

Instead of starting from scratch, we will start with a bare bones React application that has only basic components present and, during these tutorials, we will fill the gaps in.

The starter_code is available in GitHub and you can download it from here.

The first thing that you will see is that the app preserves the default React folder structure. We have a public folder that contains all the static files, such as images and the index.html, and we have a src that will be where our code lives. All our relevant files will be in this folder.

In the following diagram we display a simplified version of the different files and folders that we have defined:

📁 src
↳ 📄 App.js
↳ 📁 components
  ↳ 📁 Conference
    ↳ 📁 Video
    ↳ 📁 Toolbar
      ↳ 📁 Button
  ↳ 📁 Error
  ↳ 📁 Loading
  ↳ 📁 Pin
  ↳ 📁 Preflight
  ↳ 📁 utils
    ↳ 📁 Panel

The main component that will be always displayed in our app is the one created by App.js. This component will display a child component that will depend on the state of the application.

  • Preflight: This is the first component that the user will see. It will display a form that the user will use to select all the information to add.

Preflight

  • Loading: This component is displayed after pushing "Join" in the Preflight component. When this component is displayed means that we are connecting to the conference.

  • Error: We use this component if there is an error in our application.

  • Pin: This is a component that will display a form to allow users to enter the conference PIN. It's only displayed when we try to connect to a conference that is protected by a PIN.

  • Conference: This is the component that will display the active conference. As you can see, we have some additional sub-components that are needed to build this functionality:

    • Toolbar: This element contains a set of buttons that are used to control the conference. For example, we can use these buttons to mute the microphone or share the screen.

      • Button: This component represents a single button. Its style will change depending on the app state. For example, for a button to mute/unmute the microphone, we will want to display different icons and colors depending on the current state.

  • utils/Panel: This is a subcomponent that is used into other components. For example, it's used in the Preflight to display the panel with a form and in Error to display a message indicating what's going wrong.

info

From all these files you only will modify the following files during the tutorials:

  • App.js
  • Conference/Conference.js
  • Conference/Toolbar/Toolbar.js

Running the application​

For running the app you will need to run the following commands:

  • Download all the dependencies:

    $ npm install

  • Run development server:

    $ npm start

Now you can open your browser and access the application from http://localhost:3000.

Generate a production package​

Once you are done with your code, you will want to have a package that you can upload to your server. You can generate the dist folder with the following command:

$ npm run build

With these built files you will be able to upload the package to your web server and let others enjoy your app.

One important detail is that you will need to serve the application through HTTPS with valid certificates. If you don't do this, the browser will block the access to the microphone and camera.