React Setup - QuinnBast/SaskTel-Communication-Portal GitHub Wiki
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.
- Ensure that node.js is installed in order to access the javascript package manager npm.
- No addons need to be installed during this time, the basic LTS version will suffice.
- If you had to install Node.js, restart PyCharm or Your Python CMD window.
- Navigate back to the project root directory on the Terminal window.
- Execute
cd frontend
- 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.
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
- 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 untilCtrl + C
is pressed.
- Generate the bundled package by running
npm run prod
prod
is a custom script that will bundle the webpack files and dependencies once.