AIAA_UTD_Websites

AIAA at UTD Officer Website (a.k.a. AOW)

Technology Stack

• Framework: ReactJS (functional or class components are acceptable) on NodeJS
• Languages
  • Primarily JavaScript (JS) and TypeScript (TS), and it is open to personal choice. TypeScript, as it literally suggests, enforces strict static type checking on objects and therefore gives a lot more intelliSense while writing code, but sometimes you need to declare those types explicitly to be recognized by TS.
  • Styling (Declarative) languages include CSS and SASS (a variant of CSS with preprocessing). It is sufficient to use SASS alone since it encompasses everything from CSS and allows you to write fewer lines of code. You can individually choose which styling language to use when you bootstrap a new component or a library of components. We have already taken care of the dependencies.
  • Markup languages include JSX (similar to HTML), which is a React fashion expressing elements on a virtual DOM. In nuances, JSX has className instead of class attribute and htmlFor instead of for attribute, for example. Overall, you can write any html element tags in JSX.
• The files in the repo is structured and bootstrapped by Nx.dev, which is useful in the development process while managing the monorepo in which multiple web app projects share the same root directory. Before starting on new React components, we always use Nx GUI or CLI to bootstrap a module in a directory with boilerplate code created for us. It would be preferred to use vscode to code since Nx extension has been working fine on it. To learn more about Nx GUI and CLI specific to React, please read the tutorial.

Code Format Standard

• Fortunately, thank to prettier and eslint, you can code in any format you like and others will see the code formatted by prettier based on existing rules. If you have not had prettier and eslint extensions installed on vscode, please do so because it helps identify errors and warnings in the code.

Pipeline

• Use Jenkins multi-stage pipeline, which allows the separation of staging and production environments.
• Use Docker to specify the build procedure.
• Utilize AWS ECR (Elastic Cloud Registry) as image registry and ECS (Elastic Cloud Services) cluster to run the Google's Kaniko (Docker-like) build.
• The web app is now deployed on a Nginx server.

Debugging/Running Prerequisites

• FE (runs on localhost at port 4200): to run/debug locally, you can decide which BE environment to which you’d like to connect.
  • By default, FE connects to localhost at port 8080 as it assumes BE runs on this URL. Instead, if you want to use the Production API, go to file /config/config.js and override the value of config.LOCAL.apiBase with the production config.PROD.apiBase (don’t forget to revert the change when you’re ready to commit)

Useful Commands

We use the yarn (as a modern alternative to NPM) to keep track of dependencies (in package.json) and the dependency tree (in yarn.lock). You must have NodeJS installed as a prerequisite. To globally install yarn as a package manager, run

npm i -g yarn

and verify yarn is installed, run

yarn --version

To install all dependencies, run

yarn

or

yarn install

To start the app, run in the project root directory

npm start

or

yarn start

To add new modules, run

yarn add <module_1> [<module_2>...]

To add new dev modules (which will not be built during production), run with dev flag

yarn add --dev <module_1> [<module_2>...]

To remove existing modules, run

yarn remove <package_1> [<package_2>...]