Skip to main content

App architecture

Instead of starting from scratch, we will start with a React application that has only a basic structure and, during these lessons, we will fill the gaps in.

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

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

📁 server
↳ 📁 src
  ↳ 📄 index.ts
↳ 📁 config
  ↳ 📄 default.json
  ↳ 📁 credentials
    ↳ 📄 privateKey.pem

📁 client
↳ 📁 src
  ↳ 📄 App.tsx
  ↳ 📁 CreateMeeting
  ↳ 📁 Meeting
↳ 📁 public
  ↳ 📄 config.json

You can check that we have two main folders: server and client.

Server​

This will the backend section of our application. It uses ExpressJS to build a HTTP server with three endpoints.

The files for the server include:

  • index.tsx: All our logic will be in this file. It will act as a middleware between the client app and VPaaS.
  • default.json: File that contents the server configuration.
  • privateKey.pem: This private key will be used to authenticate in VPaaS once your application is registered in the platform.

Client​

This is a frontend application build with React and their main folders and files include:

  • App.tsx: In this file we will define the routing for our application. Depending on the URL, we will load an appropriate React component.
  • CreateMeeting: Component that will be used to generate a new meeting. The output of the process will be a meetingId that other users can use to join.
  • Meeting: This component is the conference itself. It will receive the meetingId and generate a one-time participant with access to that conference.
  • config.json: Configuration file for the client. We will define here the URL to our server.

Running the application​

We need to run the application in two steps. First, we need to launch the server:

$ cd server
$ npm install
$ npm start

Now the server will be running in https://localhost:3000.

Now we open another terminal and launch the client:

$ cd client
$ npm install
$ npm start

Now you can open your browser and access the application from https://localhost:4000.

info

Before using the demo application you have to open both URLs in your preferred browser and accept the self-signed certificates.

Generate a production package​

Although this is not needed for this tutorial, we may wish to deploy our application in production by creating a package that we could upload to our own server.

We can create this package for the server with the following code:

$ cd server
$ npm run build

The output of this command will be a build folder with all the transpiled code to JavaScript.

We can do the same for the client:

$ cd client
$ npm run build

The output will be a dist folder with the JavaScript code.

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