NetworkrSE: Web Development Environment Setup Guide

1. Core Tool Installation

First, you need to install four essential tools: Git, NVM, Node.js, and Yarn.

1.1 Node JS

https://nodejs.org/en/download

1.2. nvm.sh

https://github.com/nvm-sh

NVM allows you to customize the Node.js version so that everyone is synchronized.

1.3. Yarn

• We use Yarn as our package manager to install libraries and run project scripts.
• Download / Install Guide: https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

2. Project Setup

2.1. Vite

• Used to initialize and build the starting codebase.

  • https://vite.dev/guide/

• Please follow the steps below:

2.2 Clone github

• This step replaces any initial files (e.g., from a Vite template) with the actual project source code from GitHub.

• If you initially set up a folder with temporary files, delete all files inside the project folder before cloning.

• Open Git Bash, navigate to the directory where you want to store your projects, and clone the repository from GitHub.

• Note: Always use Git Bash for running these commands, not CMD or PowerShell.

# Example (navigate to project storage location):
# cd ~/Documents/projects

# Clone the repository:
git clone <PASTE_THE_PROJECT_GITHUB_URL_HERE>

# Navigate into the project folder:
# cd networkrse-project-folder

After cloning, open VS Code. Then, access the integrated Git Bash terminal inside VS Code, as shown in the image below:

2.3. Install Dependencies (First Run)

We have agreed to use version 18.16.0.

• How to set:
  • nvm install v18.16.0
  • nvm use v18.16.0

version: 18.16.0

Use the VS Code integrated terminal (with Git Bash) to install dependencies. You must run yarn install once to download all the libraries (dependencies) the project needs.

# Ensure you are in the project root directory
yarn install

2.4. Run the Development Server

After the installation is complete, you can start the local development server.

yarn dev

3. Key Technologies & Standards

This project uses several key technologies. You don't need to install them (Yarn did that), but you should be aware of them.

Vite: Our fast, modern build tool and development server.

Reference: https://vite.dev/guide/

ESLint: A tool that enforces code style rules to keep our codebase clean and consistent.

Action Required: Please install the ESLint extension in your code editor (e.g., VS Code) to see live error highlighting.

Reference: https://eslint.org/docs/latest/

Material-UI (MUI): Our React component library. We use it to build the UI with pre-built components.

Reference: https://v5.mui.com/material-ui/getting-started/

CSS Baseline: An MUI component that standardizes fonts, margins, and sizes across all browsers for a consistent look.

4. Success!

You're all set! If the yarn dev command runs successfully, it will show you a local URL (like http://localhost:5173/). You can open this in your browser to see the running application.