Development Environment Setup & FAQ

Development Environment Setup & FAQ

Installation of the Development Environment

Adding Environment Variables

Now go into the chessClient directory and run npm i dotenv

Repeat this step in chessServer as well

The last step is to add environment files to the app, which you will be given if working with us, otherwise you will have to use your personal accounts. Below is a list of all the directories in root and where to place your env files for each directory if you want to do it manually. Otherwise, run the given create_envs.sh script from the root by typing bash create_envs.sh

THIS IS ONLY TESTED ON UBUNTU

YStemAndChess

Within the root of this directory type cd src

Within the src directory type mdkir environments && cd environments

Now you need to create the two environment files within this directory with this command touch environment.ts && touch environment.prod.ts

Now copy and paste the content given into these files.

chessClient

Within this directory type touch .env

Then copy and paste the environment variables given for this component or use your own.

chessServer

Within this directory type touch .env

Then copy and paste the environment variables given for this component or use your own.

stockfishServer

Within this directory type touch .env

Then copy and paste the environment variables given for this component or use your own.

middleware

Within this directory type touch environment.php

Then copy and paste the environment variables given for this component or use your own.

Now you should be good to start developing!

Quick GitHub Developer Guide

This is a quick guide on how to develop with GitHub locally.

How to clone and have your own working branch locally:

Create your own branch from the master branch on GitHub. Clone the repo locally onto your computer, wherever you want it, using git clone (https or ssh key). Create that same branch locally using git checkout -b (branch name created from step 1). Begin developing! How to Push and Pull to your GitHub repo branch:

Always pull from your branch on GitHub before working locally, using git pull origin (branch name here). Begin coding and developing what you want/tasked to do. When you are ready to push your changes to your GitHub branch, navigate to the home directory of the repo and use git add .. This will get all the files, in the current branch, ready for the push. This ignores all the files stated in the .gitignore. Create a commit by using the command git commit -m "(Insert commit message here. Usually the commit message is about what changes you made to the repository)". Finish the push by using the command git push origin (branch to push to here). Go onto the GitHub repo on the web and create a pull request to merge your branch changes with the master branch. Congrats! You have learned the basic commands and techniques to use GitHub!

Running the Development Environment

To begin the development of servers, please follow the steps listed below.

Start by going into the YStemAndChess, chessServer, chessClient, and stockfishServer directories and running npm i in each. This will install all the packages we need to run the development environment. Make sure React-CLI is installed afterward by using the ng command. If it is not installed, you can install it using the command npm install -g @React/cli.

After installing the packages, head back out to the root of our directory using cd .. and then navigate into the scripts folder. We now want to build the docker images that we need to run. We can do this by using the command bash tag_build_containers.sh. If you are on Linux, use this command instead: sudo bash tag_build_containers.sh.

Next, we need to start the network to run our local virtual machine of docker containers. Use the command docker network create ysc-net to achieve this. This only needs to be run one time. After it is run, you can skip this step for all future cases.

After that, we can run the command docker-compose up -d to start all our docker images.

To stop the images, use the command docker-compose down.

Important Note: You need to run the bash script every time you make changes to a file and want to see them. This only applies to changes outside of the YStemAndChess folder. You need to run docker-compose down, build the docker images using bash tag_build_containers.sh, and then docker-compose up -d to restart the virtual machine. Also, make sure you run the terminal AS AN ADMINISTRATOR!!!!!!

Potential Set Up Issues

These are some potential issues that could be encountered when setting up your development environment.

docker-compose up -d

If docker-compose complains that port 80 is already in use then you will have to kill the process using port 80 on your machine. For Ubuntu use this command to find the process sudo netstat -plnt using port 80, then use this command to kill the process sudo kill {PID}.

Running Tests in YStemAndChess Directory

We use karma and jasmine to test front-end functionality. To run tests simply run ng test inside of the YStemAndChess directory. Tests will automatically be re-run whenever you make a saved change to the source code. If tests do not work you may need to go into the karma.conf.js file in the root and add your browser to the browser's array.

Adding New Lessons

Adding new lessons to the YStem app is fairly simple. All you have to do is under the "lessons" collection, select the piece you wish to add a lesson for. You need to add a lesson number, start FEN, end FEN, and end square so it can be highlighted on the board. If you do not want to highlight a square on the board simply leave that section blank. Below is an example of input for lessons being created.

lessonNumber: 5

startFEN : "rnbqkbnr/pppppppp/8/8/8/8/PPP4P/RNBQKB1R w KQkq - 0 1"

endFEN: "rnbqkbnr/pppppppp/8/8/2P5/8/PP5P/RNBQKB1R b KQkq - 1 1"

endSquare: "e4"

Once this is added to the database the lesson will be generated when a user reaches that lesson number. I like to use https://lichess.org/editor to create a starting lesson FEN. From there it is easiest to get the ending lesson FEN by going to that lesson number on the YStem app and moving to the desired end position. The current FEN will be output in the browser console. The reason the end FEN cannot be achieved in other editors is that they do not update the color and turns completed. Plus you have to see which moves Stockfish makes when you move to the end square. Stockfish will always make the same move if you do because stockfish will only make the optimal move.