wssgui

A GUI for the WSS board, written in JavaScript using Electron and React.

Table of contents

• Setting up development environment on Windows
• Documentation

Setting up development environment on Windows

1. Install the required software

   • Git
     • Note: When installing Git, you should use the default options
   • Nodejs (select the LTS version)
   • Visual Studio Code

2. Reboot your computer, and open up Visual Studio Code

3. Open an administrator PowerShell window (you can do this by going to the start menu, typing PowerShell, then right-clicking on PowerShell and selecting "Run as administrator"). Type the following command into powershell and press enter in order to install the required build tools:

   npm install --global --production windows-build-tools
   

   After the command is complete, type exit and press enter to close PowerShell

   • Note: This command does not always complete successfully. If it freezes for
     longer than one minute, press Ctrl+c to cancel the command, run
     npm remove --global windows-build-tools, then reboot your computer
     and try again.

4. After you have installed the windows-build-tools in the previous step, open the file explorer and navigate to the folder where you would like to store the code. Once you are in that folder, right click and select "Git Bash here" to open a Git Bash terminal.

5. In order to download the code, type the following command into the Git Bash command line, replacing <Github repository URL> with the URL of this repository, which you can copy-paste from your browser's address bar:

   git clone <Github repository URL>
   

   This command will download the code from Github and place it into a new folder.

   • Note: When copy-pasting into Git Bash, Ctrl+V does not work! Instead,
     you must right click and select "Paste", or alternatively press
     Shift+Insert.

6. Open Visual Studio Code, go to File -> Open Folder, and open the folder that the git clone command created (the folder should be named "wssgui").

7. In Visual Studio Code, press Ctrl+Shift+X to open the extenstion panel. In the extension panel, search for, and install, the ESLint extension. This extension will provide warning and error messages when JavaScript style and best practices rules are broken.

8. In Visual Studio Code, go to Terminal -> New Terminal to open a terminal window within Visual Studio Code. Type the following command into the terminal to install all the required dependencies:

   npm install
   

9. The development environment is now ready! You can type npm start in order to run the code. If you'd like to stop running the code, press Ctrl+c in the terminal window. You can also create a portable .exe file to run on other computers by typing npm run dist. Please note, this command will take a few minutes to complete. After the command finishes, you will notice a new folder called dist; inside this folder you will find a .exe file which can be run without installation by double-clicking on it.

Documentation

public/

This directory contains code that deals with the layout of the app. For more details, please consult public/README.md.

src/

This directory contains most of the GUI code. For more details, please consult src/README.md.

.eslintrc.json

This file contains configuration options for ESLint, the JavaScript code style checker used in this project.

.gitignore

This file contains a list of files and directories that Git, the version control system, should ignore. For example, the node_modules/ directory is listed in this file, as this directory contains all of the Node.js dependency packages. Git should ignore this directory and not upload it to Github because all dependencies can be installed with the npm install command when setting up the development environment.

.npmrc

This file contains configuration options for npm, the Node.js Package Manager.

package-lock.json

This file contains important information for npm. The file is automatically generated by npm and should never be edited directly.

package.json

This file contains the main configuration for this project. It includes configuration for scripts, like npm start and npm run dist, and also lists the required dependencies and build options.

webpack.config.js

This file contains configuration options for webpack, one of the tools used for building the app.