From 7cbd9d272294a43e5e613e920105bd2dbfea3ea0 Mon Sep 17 00:00:00 2001 From: Ferotiq <64989416+Ferotiq@users.noreply.github.com> Date: Sun, 20 Feb 2022 14:47:24 -0600 Subject: [PATCH] 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 --- .github/workflows/pr-check.yml | 2 +- CONTRIBUTING.md | 9 ++++++--- bin/install.cmd | 7 +++++++ package-lock.json | 19 ++++++++++++++++++- package.json | 10 +++++++--- 5 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 bin/install.cmd diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml index 595bcd1fb..9e8095505 100644 --- 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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 589de7d4b..d07f9c666 100644 --- 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 Ctrl+C 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. diff --git a/bin/install.cmd b/bin/install.cmd new file mode 100644 index 000000000..24131bf97 --- /dev/null +++ b/bin/install.cmd @@ -0,0 +1,7 @@ +npm ci +cd .\frontend +npm ci +cd ..\backend +npm ci +cd ..\ +PAUSE diff --git a/package-lock.json b/package-lock.json index c94bbdcbf..801609ca6 100644 --- 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", diff --git a/package.json b/package.json index 7ef69a370..9879764a9 100644 --- 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": {