Merge pull request #39 from RAIRLab/38-migrate-from-webpack-to-vite

Swapped Webpack to Vite

.eslintignore

@@ -1,3 +1,3 @@
 build/
 dist/
-webpack.*.js
+vite.config.js

.github/workflows/buildAndDeploy.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Install NPM deps
         run: npm install
 
-      - name: Webpack build
+      - name: Vite build
         run: npm run build
 
       - name: Documentation Generation

.github/workflows/validateBuild.yml

@@ -14,5 +14,5 @@ jobs:
       - name: Install NPM deps
         run: npm install
 
-      - name: use Webpack to compile the application
+      - name: use Vite to compile the application
         run: npm run build

.vscode/launch.json

@@ -7,10 +7,10 @@
         {
             "type": "chrome",
             "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080/",
-            "webRoot": "${workspaceRoot}",
-            "sourceMaps": true,
+            "name": "Chrome Vite Debug",
+            "url": "http://localhost:5173/",
+            "webRoot": "${workspaceRoot}/src",
+            //"sourceMaps": true,
         }
     ]
 }

.vscode/settings.json

@@ -1,10 +1,12 @@
 {
     "cSpell.words": [
         "Anusha",
+        "Huda",
         "jamesoswald",
         "peaceiris",
         "peircemyheart",
         "styleguidelines",
+        "Subrina",
         "Tiwari",
         "xshift",
         "yshift"

README.md

@@ -2,8 +2,9 @@
 
 [![Code Style: Google](https://img.shields.io/badge/code%20style-google-blueviolet.svg)](https://github.com/google/gts)
 
-A web application for modeling Charles Peirce's Alpha Existential Graph System. In development for UAlbany 499. Sponsored by James Oswald (RAIR Lab)
-
+A web application for modeling Charles Peirce's Alpha Existential Graph System. In development for
+The State University of New York at Albany Capstone Course ICSI-499.
+Sponsored by James Oswald (RAIR Lab)
 
 ## Development
 
@@ -23,15 +24,15 @@ npm install
 
 We use the following development tools: 
 
-1. **npm** : npm (node package manager) is a package manager for nodejs projects. We use it exclusively
-to install and manage the rest of our development dependencies such as typescript, webpack, etc.
-We also use it to invoke all core development tools via `npm run`
+1. [**npm**](https://www.npmjs.com/) : npm (node package manager) is a package manager for nodejs projects. We use it exclusively
+to install and manage the rest of our nodejs based development dependencies such as typescript, vite, etc.
+We also use it to invoke all core development tools via `npm run`.
 
-2. **webpack** : webpack is an asset bundler and build system for large web projects with 
+2. [**Vite**](https://vitejs.dev/) : Vite is an asset bundler and build system for large web projects with 
 many types of resources such as typescript. Additionally, it provides excellent debugging features.
-We use it as a build system for Typescript and asset compressor. 
+We use it as a build system for Typescript, Asset Compressor, and Live Debugger.
 
-3. **gts** : gts (Google TypeScript Style) is a set of style guidelines and tools for typescript
+3. [**gts**](https://github.com/google/gts) : gts (Google TypeScript Style) is a set of style guidelines and tools for typescript
 consistent and readable formatting. It provides defaults for the following tools we use:
     * **eslint** : an extensible linter for javascript and typescript code. It catches 
       many semantic errors such as unused variables.
@@ -56,45 +57,45 @@ npm run fix
 ```
 
 ## Building
-Build the project to the `/dist/` directory using webpack in either development or production mode.
+Build the project to the `/dist/` directory using Vite in either development or production mode.
 In production mode, all code will be compiled and compressed into a single file to ensure extremely
 fast loading of the web page, however debugging will be impossible. To build in production mode
 run:
 ```bash
 npm run build
 ```
 
-In development mode, webpack will not apply compression and will include a typescript source map with
+In development mode, Vite will include a typescript source map with
 the compiled js files, allowing you to seamlessly debug the application in browser. To build in
 development mode run:
 ```bash
-npm run buildDev
+npm run build-dev
 ```
 
 ## Debugging
 
-Webpack comes bundled with some very powerful debugging tools, the first of which is live
+Vite comes bundled with some very powerful debugging tools, the first of which is live
 recompilation, during which any edits you make to the source file are immediately compiled 
 and changes in the application appear right away in a corresponding web browser window. To 
 open a browser window and start listening for changes you can use the following command:
 ```bash
-npm run liveEdit
+npm run live-edit
 ```
-
-Live editing is very cool but if you want to debug you would have to set breakpoints in the browser debugger
-which can be annoying. In order to use VS Code debugger while the browser is open is a two step
-process. First, launch the webpack development server with:
+Live editing is very cool but if you want to debug you would have to set breakpoints in the browser
+debugger which can be annoying. In order to use VS Code debugger while the browser is open is a
+two step process. First, launch the Vite development server with:
 ```bash
-npm run vscDebug
+npm run vsc-debug
 ```
-Then go to the VS Code debug window and select the "Debug Chrome" configuration and run it (Other browsers can be
-supported through the correct extensions). A new chrome window will open attached to the webpack
-development server, any vs code breakpoints triggered in chrome will be jumped to in VSC.
+Then go to the VS Code debug window and select the "Chrome Vite Debug" configuration and run it
+(Other browsers can be supported through the correct VSC extensions). A new chrome window will
+open attached to the Vite server, any vs code breakpoints triggered in chrome
+will be jumped to in VSC.
 
 
 ### Root Files and Folders Overview
 ```
-/.github/ : The code for github workflows this project uses, used for automatically deploying the site when a new branch is merged into main. 
+/.github/ : The code for github workflows this project uses, used for automatically deploying.
 
 /src/ : source code for the application 
 
@@ -106,20 +107,18 @@ development server, any vs code breakpoints triggered in chrome will be jumped t
 
 /.prettierrc.js : config for prettier, which catches syntactic errors in your typescript code.
 
-/LICENSE : The legal jargon for who can use and sell the project, we are open source under the MIT License.
+/LICENSE : The legal jargon for who can use and sell the project.
 
 /package.json : main NPM file, contains information about the project and development dependencies.
 
-/package-lock.json : (Autogenerated by NPM do not edit) NPM record of all versions of all dev dependencies and sub-dependencies used for this project.
+/package-lock.json : NPM record of all  dependencies and sub-dependencies used for this project.
 
 /README.md : the information file you're reading right now.
 
 /tsconfig.json : config for the typescript compiler.
 
-/webpack.common.js : Main config file for webpack, specifies how different files from /src/ should be processed, provides common settings used in both development and production mode.
-
-/webpack.dev.js : development mode config webpack file
+/typedoc.json : Documentation generator configuration
 
-/webpack.prod.js : production mode config webpack file
+/vite.config.js : Vite build system configuration.
 
 ```