Skip to content

MacOS Installation

Jump to bottom
Jason edited this page Jan 21, 2024 · 2 revisions

MacOS Installation (Updated 01-19-2024)

Installation Requirements

  • Node.JS (LTS Version Recommended)
  • Git
  • VSCode (Recommended)
    • Note: We highly recommend using VSCode for your IDE because of the extension integration.

Configuration

VSCode

  1. Install the Prettier and ESLint extensions.
image image
  1. For Prettier, go to File > Preferences > Settings and search for Format On Save. Check the box to enable it.
  • File is found at the top left corner of the screen in VSCode.

Git

  1. Open a terminal (Command + Space to open Spotlight Search and search for "Terminal") and run git config --global user.name "Your Name" and git config --global user.email
  2. Confirm that the changes were made by running git config --global --list

Project Installation

NOTE: It's recommended to create a Project folder for this project and future projects.

VSCode method (easiest)


1. If you have a folder called Project, open the folder in VSCode. If not, create a folder called Project and open it in VSCode.

image
2. Click on the Source Control icon on the left side of the screen (looks like a branch).

image
3. Click "Initialize Repository"

image
4. Click on the three dots (...) and click Clone Repository.

image
5. Paste the following link into the box: https://github.com/BroncoDirectMe/Frontend.git

  1. Click on the folder icon and select the Project folder.

Terminal method (recommended)

Screen Shot 2024-01-20 at 3 57 41 PM

  1. Right click the folder that you want to have the project files in, ideally in a folder called "Projects," and select New Terminal at Folder

  2. Run git clone https://github.com/BroncoDirectMe/Frontend.git

Project Dependency Installation

image
Note: Make sure that the Frontend folder is in the bold on the explorer

image

  1. In VSCode where you opened the project, open a terminal (Terminal > New Terminal)

image
2. Run npm install to install all the dependencies for the project.

  • The vulnerabilities warning is intentional unfortunately.

Testing the Project

image

  1. In VSCode's integrated terminal, run npm run build

image
2. Go to chrome://extensions/ and ensure Developer mode is turned on.

  1. If you've previously built the extension, remove / uninstall the extension. This includes the production version of the extension (what's currently on the Chrome Webstore).

image
4. Click the Load unpacked button and navigate to your dist folder generated in the Frontend folder.

image
5. The extension is now installed.

  • NOTE: You will have to remove / uninstall the extension and re-navigate to your dist folder every time you make changes
Clone this wiki locally