FRC Team 695 Bison Robotics - Official Website

First Version Released 🎉

The first version of the website has been released! Check out the latest release notes for more details.

Project Overview

The official website for FRC Team 695 Bison Robotics, a competitive robotics team from Beachwood High School, founded in 2001. This website serves as a platform to engage students in a hands-on STEM environment and showcase the team's activities and achievements.

Website Links

• Team 695 | Bison Robotics(team695.com)
• Team 695 | Bison Robotics(frc695.com)

Tech Stacks

For details on the technology stacks used, refer to the package.json file.

Dependencies Details

Some dependencies are listed here for reference.

Running the Project

To run the project locally, follow these steps:

1. Download Node.JS

Visit the official Node.JS website and download the LTS Version. The local development uses version v20.9.0, but any version higher than this should work successfully (e.g., v22.13.0).

2. Download Git

Go to Git Download for Windows and download the 64-bit version.

3. Get this repository link

Go to Team Official Website - FrontEnd Repository and follow the steps:
Select Code ➔ Local ➔ HTTPS, then copy the link.

4. Pull the Project to your Local

Commands can be executed using cmd, PowerShell, git bash (Windows System), or shell(terminal) (Linux System).

See Screenshot Image (Windows CMD)

---

Clone the repository using the following command:

git clone https://github.com/1834423612/Team-695-OfficialWebsite.git

Navigate to the project directory:

cd Team-695-OfficialWebsite

5. Install Project Dependencies

See Screenshot Image

---

We recommend using pnpm to manage packages. Install the dependencies with:

pnpm install

Note:

• Use this command only when you change the package.json, add/update new dependencies, or the first time you run the project.
• Once you run pnpm install, you should be able to see that it will generate one folder: node_modules, and one file: pnpm-lock.yaml.

If your device is a fresh install environment/without pnpm, please run the installation below to your global environment first:

See Screenshot Image

---

npm install -g pnpm

pnpm setup

If you want to remove a package or all packages:

Remove the specified package(s): CMD, PowerShell, Git Bash, or Shell(Terminal):

pnpm remove <PackageName1> <PackageName2> <PackageName3...>

Remove all packages(If something is wrong in your localhost): Notes BEFORE YOU RUN:

• ONLY Works on PowerShell(Windows), or Terminal(Linux)
• You just need to copy and paste the following commands,
• if you are not familiar with them please do not modify any of the commands.
• For Windows systems, you can also delete the corresponding folder directly by right-clicking on it in the graphical interface (due to the file system, deletion of the node_modules folder may time out or take a long time).
• THINK FIRST, THEN DECIDED RUN OR NOT

rm ./pnpm-lock.yaml

rm ./node_modules

6. Run the Website

Start the development server with:

pnpm run dev

When the terminal displays the local preview link, the website is successfully running!

Build the Production environment & Upload it to the server:

pnpm build

Then, all the static codes will located in the /dist folder. Upload them all to the server.

File Structure

Details

Default Page

The default page is located at /src/views/index.vue.

Components Location

Components are stored in the /src/components/ directory to facilitate maintenance.
After creating new components, ensure they are imported into /views/YourPage.vue.

Example Import Code

Replace YourComponentName with the actual component name.

/views/YourPage.vue:

<template>
  ...
  <div>
    <!-- Import the components -->
    <!-- Same as your import name -->
    <YourComponentName />
  </div>
  ...
</template>

<script>
import YourComponentName from '../components/YourComponentName.vue';

export default {
  components: {
    YourComponentName // Register this component, matching the import name
  }
};
</script>