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.tsx
↳ 📁 components
  ↳ 📁 Conference
    ↳ 📁 Video
    ↳ 📁 Toolbar
      ↳ 📁 Button
  ↳ 📁 Error
  ↳ 📁 Loading
  ↳ 📁 Pin
  ↳ 📁 Preflight

The main component that will be always displayed in our app is the one created by App.tsx. 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.
info

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

  • App.tsx
  • Conference/Conference.tsx
  • Conference/Toolbar/Toolbar.tsx

Pexip's npm packages​

The example app uses 2 @pexip packages, @pexip/infinity & @pexip/components.

Infinity​

@pexip/infinity - This package provides an API that allows the client to connect to Pexip's MCU.

Components​

@pexip/components - This package provides React Components, giving you a UI that's built on the Pexip Design System. In the example application we make use of the Box, Input and Button components, among others.

css assets​

We import css assets in index.tsx so that styling is applied to the components:

import '@pexip/components/src/fonts.css';
import '@pexip/components/dist/style.css';

ThemeProvider​

Some components use the Theme Context, we can have a light & dark theme. We wrap the App component in ThemeProvider:

import {ThemeProvider} from '@pexip/components';

<ThemeProvider colorScheme="light">
  <App />
</ThemeProvider>;

Using a component​

There's plenty of components that you can use in your own apps, Box is one we make use of in the example app:

import {Box} from '@pexip/components';

<Box padding="small">Hello, World!</Box>;

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 https://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 we need to serve the application through HTTPS with valid certificates. If we won't do this, the browser will block the access to the microphone and camera.