-
Notifications
You must be signed in to change notification settings - Fork 17
Guide for Developers
- Install
Node.js
Recommend using version 14 - Install
git
- For Windows, install from https://gitforwindows.org/
- For macOS and Linux, see https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- Clone OCC Club Website Project
- Method 1:
- Open the command line, navigate the directory you want to clone the project
- For windows,
cd dir_1/dir_2/...
- For macOS and Linux,
cd ~/dir_1/dir_2/...
- For windows,
- Type
git clone https://github.com/Computer-Science-Club-OCC/Computer-Science-Club-OCC.github.io.git
- Open the command line, navigate the directory you want to clone the project
- Method 2:
- Go to https://github.com/Computer-Science-Club-OCC/Computer-Science-Club-OCC.github.io.git
- Click to
Code
and then Download the zip file - Extract the zip file
- Method 1:
- Install your favorite IDE or code editor. We recommend Visual Studio Code. (if you already have an IDE you can skip this step)
- Open the project folder with your IDE, and type
cd client
on the terminal. - To install front-end packages, run
npm install
- To build, run
npm run build
- To start the front-end, run
npm start
. The browser opens automatically with url http://localhost:3000 - In case lint errors appears, run
npm run format:fix
to format files, then start the front-end server
-
Install MongoDB Community version 5 from https://www.mongodb.com/try/download/community.
Please follow the instructions of the OS you are using from https://www.mongodb.com/docs/manual/installation/-
After installation,
- For Windows:
- Open
Edit System Environment Variables
>Environment Variables
. - At
User variables for <your_username>
selectPath
>Edit
. - Add the path you installed MongoDB. For example:
C:\Program Files\MongoDB\Server\5.0\bin
- Open
- For Linux:
- In the terminal, check
sudo systemctl status mongod
. If not active, dosudo systemctl enable mongod
- Note that the test runner will fail on systems with versions of libssl > 1.1 due to an incompatibility of mongodb memory server.
- In the terminal, check
- For Windows:
-
Check MongoDB if it was installed by typing
mongo --version
in the terminal. -
It is optional to install
MongoDB Compass GUI
for easily interacting with the database. Or, you can interact with it on the terminal by themongo
command.
-
-
Open the project folder with your IDE, and type 'cd backend` on the terminal.
-
Run
npm install
to install packages -
Run
npm start
to run the backend server.127.0.0.1:8000
is the backend url. -
For testing API, recommend using
Postman
orInsomnia
Assuming you installed mongo using homebrew, follow these instructions (originally from here)
- In your terminal, run
brew services start mongodb-community@5.0
. - Using MongoDB Compass, connect to the URI:
mongodb://127.0.0.1:27017
- The backend terminal should now display the text:
MongoDB status: Connected
cs_club Collection is available
- In MongoDB Compass, you can now add data to the empty collections within
occ_csc
. - Once finished, run
brew services stop mongodb-community@5.0
We recommend installing Docker Desktop, which includes Docker Engine, CLI client, and Docker Compose. Docker Compose will create a containerized environment for the frontend, backend, and mongo, so you don't have to worry about creating a separate mongo database and the versions of all dependencies will be consistent with other developers.
Go to "Install Docker Desktop" for your respective OS and follow the instructions to install here.
For easy development within VS Code, you can also install the Docker extension through Microsoft here.
- To quickly start the entire stack on any machine with docker:
1. First make sure your Docker Desktop is running
2. If developing in a different branch/PR, run docker-compose build --no-cache
3. Run docker-compose up
in the root folder's terminal. (You should not have to cd into the frontend or backend folder)
Note: The first time this is run, building the container will take around 10 minutes.
- To run just a mongo instance:
docker-compose up -d mongo
- Stopping the environment:
docker-compose down
- Rebuild All Containers:
docker-compose build
-
Cleaning Docker Env Deleting the mongo container will delete all data in the database
-
Stop the container(s) using the following command:
docker-compose down --volumes
- Delete all images using the following command:
docker image prune -a
- Go to the
Issue
tab on https://github.com/Computer-Science-Club-OCC/Computer-Science-Club-OCC.github.io.git - Choose an issue you like to contribute, assign yourself at
Assignees
on the right - Under Project section, select " In Progress"
- If you engage bugs or have ideas for the project, go to Issue on the club website repo and create a new one
- Add tags for issues in the
Labels
section on the right - An image to describe the issue is recommended for clarity
- On the right panel, Projects section, add "CS website issues", then select ToDo
- On your IDE, if you had GitHub plugins, create a new branch from
main
- Name your branch as following formats:
-
<your_name>-<issue_title>
if you work on an issue -
<your_name>-<feature_name>
if you work on a feature that is not stated on github issue
-
Please, do not add <>. These formats also apply to forked repos
- Run the docker commands to automatically start the project (Docker & Docker Compose setup)
- For manual steps:
- Locate
/client
and/backend
folders on the terminal and runnpm install
for both if packages are not installed - Start frontend server and backend server. Use http://localhost:3000 to view the output of the website
- Locate
- For manual steps:
- Start implementing your code on the branch
- Before you commit:
- For frontend: run
npm run lint
then fix any lint errors. Then runnpm run format:fix
. - For backend, run
npm run lint
then fix any lint errors. Runnpm run test
to test. Thennpm run format:fix
.
- For frontend: run
- Add all formatted files to the commit
- If you see any errors or warnings on the terminal after you run the format command. You must fix those errors, and format them again.
- Push your commit
- Create a PR, on the left side of the arrow select
Computer-Science-Club-OCC/Computer-Science-Club-OCC.github.io
, choosemain
. - Add descriptions for your PR. Have a good summary of your overall commits, and include WHY you made them. Adding images to describe your PR is recommended. Make sure you mention the issue you assigned earlier by
#issue_number
in the description. - Assign yourself at
Assignees
, and add tags atLabels
- Assign a
Reviewer
if you think your PR is ready to merge - Fix bugs based on the reviewer's feedback
- Once the reviewer approves, you can merge your PR to
main
branch