React Setup - QuinnBast/SaskTel-Communication-Portal GitHub Wiki

React Setup

In order to run React, Node.js is required to be installed and the npm package manager is used in order to gain access to the javascript packages that are being used.

Step 1 - Installing Javascript dependencies

  1. Ensure that node.js is installed in order to access the javascript package manager npm.
    1. No addons need to be installed during this time, the basic LTS version will suffice.
  2. If you had to install Node.js, restart PyCharm or Your Python CMD window.
    1. Navigate back to the project root directory on the Terminal window.
  3. Execute cd frontend
  4. Execute npm install This will install all of the Node.js packages that are required.

The javascript dependencies in our project are as follows:
JsSIP - to enable RTC calling from the browser.
FontAwesome - to display icons and logos on the website.
Javascript Cookie - to fetch information from cookies that are sent from the server.
ReactStrap - Bootstrap for styling the website.
ReactSwitch - To create toggle switches.
React Text Mask - To ensure valid user phone numbers and other various inputs.
xml-js - To parse incoming XML.

Step 2 - Building the Webpack bundle

In order to execute the project, all of the javascript dependencies, css libraries, etc must be packed into a bundle in order to prevent chain dependencies. Ensure you are in the frontend with cd frontend

Option 1: Bundling for development servers
  1. Generate the bundled package by running npm run watch
    watch is a custom script to bundle the front end files automatically. It will monitor for changes to files and automatically rebuild the bundle if a change is detected. This command will watch and rebuild the bundle until Ctrl + C is pressed.
Option 2: Bundling for production
  1. Generate the bundled package by running npm run prod
    prod is a custom script that will bundle the webpack files and dependencies once.
⚠️ **GitHub.com Fallback** ⚠️