Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/szokeasaurusrex/wssgui

A GUI for the WSS board
https://github.com/szokeasaurusrex/wssgui

Last synced: about 2 months ago
JSON representation

A GUI for the WSS board

Awesome Lists containing this project

README 

        
# wssgui

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



## Table of contents

* [Setting up development environment on Windows](#setting-up-development-environment-on-windows)

* [Documentation](#documentation)



## Setting up development environment on Windows

1. Install the required software

   * [Git](https://git-scm.com/download/)

     * Note: When installing Git, you should use the default options

   * [Nodejs](https://nodejs.org/en/) (select the LTS version)

   * [Visual Studio Code](https://code.visualstudio.com/)



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



1. 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.



1. 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.



1. In order to download the code, type the following command into the

   Git Bash command line, replacing `` with the

   URL of this repository, which you can copy-paste from your browser's

   address bar:

   ```

   git clone 

   ```

   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.



1. 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"). 

   

1. 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.

   

1. 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

   ```



1. 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/](public/)

This directory contains code that deals with the layout of the app.

For more details, please consult

[`public/README.md`](public/README.md).



### [src/](src/)

This directory contains most of the GUI code. For more details, please

consult [`src/README.md`](src/README.md).



### [.eslintrc.json](.eslintjc.json)

This file contains configuration options for ESLint, the JavaScript

code style checker used in this project.



### [.gitignore](.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](.npmrc)

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

Manager.



### [package-lock.json](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](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](webpack.config.js)

This file contains configuration options for webpack, one of the tools

used for building the app.