Skip to content

Setup Guide

Jump to bottom
Dylan Brose edited this page Sep 3, 2024 · 14 revisions

Setting up your Application Environment!

By following this guide, you should be able to have all of the necessary software required for working on the application!

Note

There may be differences in the setup process for Windows vs. Mac. Overall, both processes will be very similar.

Software Required

  • Git
  • Text Editor (vsCode)
  • NodeJS
  • Python

Software Installation

Git

Git is the software that allows users to collaborate with their code! Having this allows you to pull the latest version of the Application Repository onto your computer. If you already have Git installed, you can bypass this step. If you aren't sure, follow along. The simplest way to ensure Git is set up properly is to use a client like GitHub Desktop. This is how we will install moving forward.

  1. Create an account at Github.com

Tip

If you already have an account, you can use your existing one

  1. Download GitHub Desktop for your system (Download Here!)
  2. Open the installer and proceed with the install process.
  3. When prompted, log in with your GitHub account.
  4. Choose to allow GitHub to configure Git. Do not configure manually.
  5. If you are on MacOS, when prompted, allow GitHub Desktop to be moved to the Application folder.
  6. Done!

VSCode

VSCode is simply a text editor with a lot of great features for software development, such as powerful extensions, syntax hinting, and Git integration. This is what we recommend for all ChessBots (and Application) development for its ease of use. If you want to use another text editor, you may have a more difficult time moving forward since some of our extensions may not be compatible.

  1. Download VSCode (Download Here!)
  2. Proceed with install process

Note

If you are using MacOS, make sure to move to the application folder! It is not automatic for VSCode!

  1. Done!

NodeJS

Node is the software package that the application web engine is built upon. Installing it is crucial for installing NPM packages and compiling the software.

  1. Download NodeJS (Download Here!)

Important

Select the LTS version, not current version

  1. Proceed with installer setup.
  2. If prompted, allow it to be added to the PATH
  3. Done!

Python

Python is required.

  1. Download Python Installer (Download Here!)
  2. Proceed with install process
  3. Done!

Environment Setup!

Now that all the software is installed, we can setup our environment for the application! The way I describe is my personal preference, so you can make some changes along the way if preferred. For simplicity, feel free to follow my steps exactly.

Making a dev folder

Having a dev folder is important. This is a location where git can pull your projects to, and a central location for all of your development work. It is important to avoid syncing your code in a cloud location, such as OneDrive, iCloud, Google Drive, Box, or Dropbox. This can cause issues when working with git, and should be avoided! Instead, backup your files the old fashioned way with an external drive, or make sure your work is pushed to Git.

Windows

  1. Open Explorer
  2. In the Explorer Address Bar, navigate to C:/Users
  3. Choose the folder with your username
  4. Create a new folder called "dev" in that folder.

Warning

Saving your dev folder to Desktop or Documents is risky. These locations may be synced by Onedrive on your system, which can cause damage!

MacOS

Setting up a dev folder on MacOS is simple!

  1. Open Finder
  2. Click "Go" at the top of the screen
  3. Click "Home"
  4. This will open your home folder, you should see things like "Downloads" and "Pictures" in here
  5. Create a new folder called "dev" in the home folder.

Warning

Saving your dev folder to Desktop or Documents is risky. These locations may be synced by iCloud on your system, which can cause damage!

Forking the repo

Note

Before following this step, make sure you are logged into your Github account!

Forking a repo basically means making a linked copy of it. Any changes made on the original code can be pulled over to your own copy, but any changes made on the copy do not affect the original. We use this to allow you to work on your code without worrying about affecting anything else.

  1. In your web browser, navigate to the ChessBots Onboarding Repo (Click Here!)
  2. Click the button near the top that says 'Fork' (Should be located between 'Watch' and 'Star')
  3. The default settings are fine. Just scroll to the bottom and click 'Create Fork'
  4. You can now access your fork at any time by clicking on your Github profile in the top right, and clicking 'Your repositories'

Important

When any updates are made in the original application repo, your fork will then be out-of-date. To update your fork to the latest application code, navigate to the repository, then click 'Sync fork' below the green 'Code' button. Next click the green 'Update Branch' button.

Pulling the forked repo

Now, we need to pull the latest version of the fork repo to our computer. For this, we will use Github Desktop. If you prefer to use the command line, feel free, we will not be explaining that in this guide.

  1. Open GitHub Desktop
  2. In your web browser, navigate to your fork (Click your Github profile in the top right, click 'Your repositories', then click the chessbot-onboarding repo)
  3. Click the green "Code" button
  4. Click "Open with GitHub Desktop" and accept the prompt.
  5. GitHub Desktop will open with the project.
  6. Type in the correct folder, for macOS, that looks like this:

Important

Make sure to include the /chessbot-onboarding at the end. This will create a chessbot-onboarding folder for the project.

  1. Done! You now have the Application Source Code on your system!

Setting up VSCode

Our last step is to setup VSCode for the project.

  1. Open VSCode
  2. Select "Open Folder" and choose the chessbot-onboarding folder located in "dev"
  3. VSCode may prompt you to install the recommended extensions, click yes.
  4. VSCode is ready to use!

Installing required dependencies

ChessBots (and it's application) rely on a variety of external software in order for our code to run. To do this, we use yarn to manage the packages needed.

  1. Open VSCode
  2. Open the chessbot-onboarding project
  3. Open a new Terminal in VSCode (Ctrl + Shift + ~)
  4. Run npm install --global yarn
  5. Run yarn install
  6. Done!

Windows Permissions Issues

In some situations, Windows will claim you do not have permission to run commands. Follow these steps to fix:

  1. First, Open Settings.
  2. Search 'powershell'
  3. Click 'Allow local PowerShell scripts to run without signing'
  4. Make sure that setting is turned on and clicked apply

Running the Application!

  1. Open the project in VSCode
  2. Open a new Terminal in VSCode (Ctrl + Shift + ~)
  3. Run yarn dev
  4. In your in browser, open localhost:3000
  5. To test multiplayer, you can open the tab in two different browsers
Clone this wiki locally