Allow the process for setting up project and committing code on Windows to be much smoother (#2549)

* Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Create install.cmd * Update package.json * Update CONTRIBUTING.md * Update install.cmd * Update install.cmd * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update package.json * fix lint script so windows users can use it correctly * adFd * rename
2025-09-11 09:06:36 +08:00 · 2022-02-20 14:47:24 -06:00 · 2022-02-20 14:47:24 -06:00 · 7cbd9d2722
commit 7cbd9d2722
parent 4ea967d677
5 changed files with 39 additions and 8 deletions
--- a/.github/workflows/pr-check.yml
+++ b/.github/workflows/pr-check.yml
@ -59,7 +59,7 @@ jobs:

      - name: Install dependencies
        if: steps.filter.outputs.changes != '[]'
-        run: npm run install:all
+        run: npm run install

      # - name: Run webpack
      #   run: npm run build:live
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -18,11 +18,11 @@

 ## Getting Started

-When contributing to Monkeytype, it's good to know our best practices, tips, and tricks. First, Monkeytype is written in Javascript, CSS, and HTML (in order of language usage within the project); thus, we assume you are comfortable in these languages or have basic knowledge of them. Our backend is in NodeJS and we use MongoDB to store our user data. Furthermore, we use Prettier to format our code.
+When contributing to Monkeytype, it's good to know our best practices, tips, and tricks. First, Monkeytype is written in ~~JavaScript~~ TypeScript, CSS, and HTML (in order of language usage within the project); thus, we assume you are comfortable in these languages or have basic knowledge of them. Our backend is in NodeJS and we use MongoDB to store our user data. Firebase is used for authentication. Furthermore, we use Prettier to format our code.

 ## Prerequisites

-While most contributions don't require that you install dependencies, there are a few tools you will need to be able to run the project (this is useful and almost always necessary for tasks like creating features and fixing bugs; running the project is also useful if you are contributing a theme and want to view it on the site before you contribute it). You will need a computer with a stable internet connection, a text editor, Git, Firebase, and NodeJS with a version < 14.
+While most contributions don't require that you install dependencies, there are a few tools you will need to be able to run the project (this is useful and almost always necessary for tasks like creating features and fixing bugs; running the project is also useful if you are contributing a theme and want to view it on the site before you contribute it). You will need a computer with a stable internet connection, a text editor, Git, Firebase, and NodeJS with version 16.13.2.

 #### Text Editor

@ -49,6 +49,7 @@ Alternatively, if you use `nvm` then you can run `nvm install` and `nvm use` (yo
 1. Run `npm install -g firebase-tools` to install the Firebase Command Line Interface.
 1. Run `firebase login` on your terminal to log in to the same google account you just used to create the project.
 1. Git clone this project.
+   - IMPORTANT: If you are on Windows, run `git config --global core.autocrlf false` before-hand to prevent CRLF errors.
 1. Within the frontend directory, duplicate `.firebaserc_example`, rename the new file to `.firebaserc` and change the project name of default to the firebase project id you just created.

   - If `.firebaserc_example` does not exist after cloning, create your own with:
@ -92,7 +93,9 @@ Follow these steps if you want to work on anything involving the database/accoun

 Once you have completed the above steps, you are ready to build and run Monkeytype.

-1. Run `npm install` in the project root/backend/frontend directories to install all dependencies.
+1. Run `npm run install` in the project root to install all dependencies.
+   - If you are on Windows, use `npm run install:windows`.
+   - If none of this works, you will have to run `npm install` in root, frontend, and backend directories.
 2. Run `npm run start:dev` (`npm run start:dev:fe` if you skipped the mongo section) to start a local dev server on [port 5000](http://localhost:5000). It will watch for changes and rebuild when you edit files in `src/` or `public/` directories. Note that rebuilding doesn't happen instantaneously so be patient for changes to appear. Use <kbd>Ctrl+C</kbd> to kill it.

 **Mac Users:** If you get 403 Forbidden errors while trying to access the local server, go into System Preferences > Sharing and disable AirPlay Receiver - it also runs on port 5000 and takes priority, causing 403 errors.
--- a/bin/install.cmd
+++ b/bin/install.cmd
@ -0,0 +1,7 @@
+npm ci
+cd .\frontend
+npm ci
+cd ..\backend
+npm ci
+cd ..\
+PAUSE
--- a/package-lock.json
+++ b/package-lock.json
@ -24,7 +24,8 @@
        "husky": "4.3.0",
        "jsonschema": "1.4.0",
        "prettier": "2.5.1",
-        "pretty-quick": "3.1.0"
+        "pretty-quick": "3.1.0",
+        "run-script-os": "1.1.6"
      },
      "engines": {
        "npm": "8.1.2"
@ -4818,6 +4819,16 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/run-script-os": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/run-script-os/-/run-script-os-1.1.6.tgz",
+      "integrity": "sha512-ql6P2LzhBTTDfzKts+Qo4H94VUKpxKDFz6QxxwaUZN0mwvi7L3lpOI7BqPCq7lgDh3XLl0dpeXwfcVIitlrYrw==",
+      "dev": true,
+      "bin": {
+        "run-os": "index.js",
+        "run-script-os": "index.js"
+      }
+    },
    "node_modules/rxjs": {
      "version": "6.6.7",
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@ -9506,6 +9517,12 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "run-script-os": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/run-script-os/-/run-script-os-1.1.6.tgz",
+      "integrity": "sha512-ql6P2LzhBTTDfzKts+Qo4H94VUKpxKDFz6QxxwaUZN0mwvi7L3lpOI7BqPCq7lgDh3XLl0dpeXwfcVIitlrYrw==",
+      "dev": true
+    },
    "rxjs": {
      "version": "6.6.7",
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
--- a/package.json
+++ b/package.json
@ -8,8 +8,11 @@
    "start:dev:be": "cd backend && npm run start:dev",
    "start:dev:fe": "cd frontend && npm run start:dev",
    "deploy:live": "cd frontend && npm run deploy:live",
-    "install:all": "sh ./bin/install.sh",
-    "lint": "./node_modules/.bin/eslint './backend/**/*.js' './frontend/src/scripts/**/*.js'",
+    "install": "sh ./bin/install.sh",
+    "install:windows": ".\\bin\\install.cmd",
+    "lint": "run-script-os",
+    "lint:windows": ".\\node_modules\\.bin\\eslint \"./backend/**/*.{ts,js}\" \"./frontend/src/scripts/**/*.{ts,js}\"",
+    "lint:default": "./node_modules/.bin/eslint './backend/**/*.{ts,js}' './frontend/src/scripts/**/*.{ts,js}'",
    "build:live": "cd ./frontend && npm run build:live",
    "pretty": "prettier --check './backend/**/*.js' './frontend/src/**/*.{js,scss}' './frontend/static/**/*.{json,html}'",
    "pr-check-lint-json": "cd frontend && npx gulp pr-check-lint-json",
@ -38,7 +41,8 @@
    "husky": "4.3.0",
    "jsonschema": "1.4.0",
    "prettier": "2.5.1",
-    "pretty-quick": "3.1.0"
+    "pretty-quick": "3.1.0",
+    "run-script-os": "1.1.6"
  },
  "husky": {
    "hooks": {