Basic Introduction to Developing for this Repo

Overview of the stack

Suggested terminal tabs to keep open

1. ./run_server.sh

• This runs the flask server.
• Will usually automatically update when there are flask code changes. Want to see the line “Restarting with stat” to indicate it has been updated.
• Sometimes, need to just restart the server manually

2. ./run_npm.sh

• This rebuilds the client code when there are changes
• Want to see “webpack compiled successfully in …”
• To see your changes need to hard refresh the page on chrome

3. git

Debugging flask endpoints

• Add print statements
• In a client component, send a request to the endpoint of interest
• On the localhost webpage, navigate to the client component that sends the request
• Check the terminal tab that is running the server for the printed statements
• Check the networks tab of the chrome inspector tool to see what the endpoint is returning

Debugging client code

• Add console.log statements
• Set breakpoints in the chrome inspector tool in the sources tab and refresh the page to have it run
• If the webpage is getting an error:
  • Open chrome inspector tool
  • Check console to see if the error got logged and if it says which file the error is in
  • If information is present, go to the sources tab and navigate to the file that threw the error
  • The line causing the error will be underlined in red

An example Workflow

1. Checkout a new branch using git
   git checkout master
git pull dc master
git checkout -b <name of new branch>
2. Make changes
3. Test changes
   ./run_test.sh -cl
./run_test.sh -f
4. Commit and push changes
   git add <files changed>
git commit -m <commit message of what the changes were>
git push

If master has new code
git checkout master
git pull dc master
git checkout <name of your branch with changes>
git merge master
if there are merge conflicts, I will go to VSCode to resolve them
git commit

To revert the last commit
git reset –soft HEAD~1