This project contains the source code used for IEEE ITBA's website, developed using Angular, Firebase and Bootstrap.
Firstly, a Node.js version compatible with the Angular version used must be installed. Its installation varies on the platform used, but instructions for all can be found on the Node.js download page.
A compatible npm version is installed along with node, so we´ll use it to install the rest of things needed.
Both can be installed via any package manager, such as npm or yarn. To install them using npm, just run:
$> npm i -g @angular/cli
$> npm i -g firebase-tools
These commands will download the latest versions available, and set them globally on the pc (due to the -g flag).
Due to the problems npm has when updating multiple dependencies, this project uses yarn as its package manager. Yarn can be installed using npm with:
$> npm i -g yarn
Then, yarn is used to install the rest of the project's dependencies, running yarn install on the project folder.
To run the local server, the user must first select to run on either production mode or development mode.
The main difference is the database used, as running on dev mode starts up a mock database using firebase emulators, whereas prod mode just connects to the remote database used on the website.
It's recommended to run on development mode when developing the website (hence the name), but in case of needing to visualize a page with remote data or some other task that needs it, the second option is provided.
To run on development mode, both the page server and mock database must be started. Both commands can be executed by running:
$> yarn run dev
Which runs the dev command specified on the project's package.json
.
Then the website can be accessed on http://localhost:4200
, and the mock database on http://localhost:4000
On the development mode, a local database is set up, and its data is saved on a folder named mock_data
, located at root level (outside src
).
To run on production mode, only the website must be run, which can be served and set up on production mode using:
$> ng serve -c production
Then the website can be accessed on http://localhost:4200
.
To build the project simply run:
$> ng build
Then, a dist
folder will be created containing the built page, which can be deployed using:
$> firebase deploy
As IEEE requires a certain color palette to be used, the available colors are predefined using bootstrap variables.
These variables are named as --bs-ieee-palette-color-percentage
, where
palette
can be eitherbright
ordark
color
can be one of:- blue
- orange
- yellow
- green
- darker-green
- red
- purple
- cyan
- darker-cyan (only on bright palette)
- gray (only on dark palette)
percentage
can be:- 20
- 40
- 60
- 80
- 100 (in this case, it's not specified on the color name, e.g.
--bs-ieee-bright-blue
refers to the blue in the bright palette with 100 percent)
White (#FFF) and Black (#000) colors are also accepted, but they don't have a variable that contains them.