A GUI for the WSS board, written in JavaScript using Electron and React.
-
Install the required software
- Git
- Note: When installing Git, you should use the default options
- Nodejs (select the LTS version)
- Visual Studio Code
- Git
-
Reboot your computer, and open up Visual Studio Code
-
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.
- Note: This command does not always complete successfully. If it freezes for
longer than one minute, press Ctrl+c to cancel the command, run
-
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. -
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.
-
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"). -
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.
-
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
-
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 typingnpm 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.
This directory contains code that deals with the layout of the app.
For more details, please consult
public/README.md
.
This directory contains most of the GUI code. For more details, please
consult src/README.md
.
This file contains configuration options for ESLint, the JavaScript code style checker used in this project.
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.
This file contains configuration options for npm
, the Node.js Package
Manager.
This file contains important information for npm
. The file is
automatically generated by npm
and should never be edited directly.
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.
This file contains configuration options for webpack, one of the tools used for building the app.