Use concurrently for dev work

This commit is contained in:
Chord 2020-05-12 23:48:34 +02:00
parent 1e34cbdfb0
commit 482b499fec
3 changed files with 237 additions and 35 deletions

View file

@ -62,6 +62,7 @@ Before running, you will need to create a `.env` file in the root of the project
PGUSER=your_database_user
PGHOST=localhost
PGPASSWORD=your_database_user_password
PSADMIN="127.0.0.1:51002"
PGDATABASE=psforever
PGPORT=5432
COOKIE_SECRET=make_this_very_long_and_random
@ -69,15 +70,53 @@ COOKIE_SECRET=make_this_very_long_and_random
**Never** share/release/commit your `.env` file.
Run the following commands:
Now run the following command:
```
# Will start the backend server (:8080)
npm run dev-server
# Will start the backend server (:8080) and webpack
npm run dev
```
You should see similar output:
```
> psfportal@1.0.0 dev /home/chord/PSFPortal
> concurrently --kill-others "npm run dev-server" "npm run webpack"
[1]
[1] > psfportal@1.0.0 webpack /home/chord/PSFPortal
[1] > webpack-dev-server --history-api-fallback --config webpack.config.cjs --content-base public
[1]
[0]
[0] > psfportal@1.0.0 dev-server /home/chord/PSFPortal
[0] > nodemon -w api/ -w index.js
[0]
[0] [nodemon] 2.0.2
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching dir(s): api/**/* index.js
[0] [nodemon] watching extensions: js,mjs,json
[0] [nodemon] starting `node index.js`
[0] (node:16193) ExperimentalWarning: The ESM module loader is experimental.
[0] WARNING: development server simulated delay active
[0] Trusting proxy
[0] Connected to the psql database at localhost
[0] Starting PSAdmin polling for 127.0.0.1:51002
[0] [MODE development] PSFWeb now accepting requests at http://localhost:8080/
[1] 「wds」: Project is running at http://dev.psforever.net:8081/
[1] 「wds」: webpack output is served from /
[1] 「wds」: Content not from webpack is served from /home/chord/PSFPortal/public
[1] 「wds」: 404s will fallback to /index.html
[1] 「wdm」: Hash: 72b56958125b6abdf96c
[1] Version: webpack 4.41.5
[1] Time: 4493ms
[1] Built at: 05/12/2020 11:44:23 PM
[1] Asset Size Chunks Chunk Names
[1] bundle.js 2.1 MiB bundle [emitted] bundle
[1] bundle.js.map 2.23 MiB bundle [emitted] [dev] bundle
[1] Entrypoint bundle = bundle.js bundle.js.map
[1] [1] multi (webpack)-dev-server/client?http://dev.psforever.net:8081 ./app/main.js 40 bytes {bundle} [built]
[1] [./app/App.svelte] 14.5 KiB {bundle} [built]
<snip>
[1] 「wdm」: Compiled successfully.
> psfportal@1.0.0 dev-server
> nodemon -w api/ -w index.js
@ -92,37 +131,6 @@ Connected to the psql database at localhost
[MODE development] PSFWeb now accepting requests at http://localhost:8080/
```
Finally run in another terminal:
```
# Will start the frontend Webpack builder with hot reload (:8081)
npm run dev
```
You should see similar output:
```
> psfportal@1.0.0 dev /home/username/PSFPortal
> webpack-dev-server --history-api-fallback --config webpack.config.cjs --content-base public
「wds」: Project is running at http://localhost:8081/
「wds」: webpack output is served from /
「wds」: Content not from webpack is served from /home/username/PSFPortal/public
「wds」: 404s will fallback to /index.html
「wdm」: Hash: 7936960d2ecba7f25c89
Version: webpack 4.41.5
Time: 4075ms
Built at: 01/07/2020 6:47:43 PM
Asset Size Chunks Chunk Names
bundle.js 2.09 MiB bundle [emitted] bundle
bundle.js.map 2.22 MiB bundle [emitted] [dev] bundle
Entrypoint bundle = bundle.js bundle.js.map
[1] multi (webpack)-dev-server/client?http://localhost:8081 ./app/main.js 40 bytes {bundle} [built]
[./app/App.svelte] 14.5 KiB {bundle} [built]
<snip>
+ 218 hidden modules
「wdm」: Compiled successfully.
```
Please note that Webpack (dev) will proxy all API requests (/api) to the host `http://localhost:8080` (see the `devServer` key in [webpack.config.cjs](webpack.config.cjs)). This MUST match your backend server's (dev-server) listening port, which is by default 8080.
**Finally, connect to http://localhost:8081** (webpack, not the raw express server)

192
package-lock.json generated
View file

@ -1371,6 +1371,94 @@
"typedarray": "^0.0.6"
}
},
"concurrently": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.2.0.tgz",
"integrity": "sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"date-fns": "^2.0.1",
"lodash": "^4.17.15",
"read-pkg": "^4.0.1",
"rxjs": "^6.5.2",
"spawn-command": "^0.0.2-1",
"supports-color": "^6.1.0",
"tree-kill": "^1.2.2",
"yargs": "^13.3.0"
},
"dependencies": {
"ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
"string-width": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
"integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
"dev": true,
"requires": {
"emoji-regex": "^7.0.1",
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^5.1.0"
}
},
"strip-ansi": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
}
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
},
"yargs": {
"version": "13.3.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
"integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
"dev": true,
"requires": {
"cliui": "^5.0.0",
"find-up": "^3.0.0",
"get-caller-file": "^2.0.1",
"require-directory": "^2.1.1",
"require-main-filename": "^2.0.0",
"set-blocking": "^2.0.0",
"string-width": "^3.0.0",
"which-module": "^2.0.0",
"y18n": "^4.0.0",
"yargs-parser": "^13.1.2"
}
},
"yargs-parser": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
"integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
"dev": true,
"requires": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
}
}
}
},
"configstore": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
@ -1660,6 +1748,12 @@
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
"dev": true
},
"date-fns": {
"version": "2.13.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.13.0.tgz",
"integrity": "sha512-xm0c61mevGF7f0XpCGtDTGpzEFC/1fpLXHbmFpxZZQJuvByIK2ozm6cSYuU+nxFYOPh2EuCfzUwlTEFwKG+h5w==",
"dev": true
},
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
@ -3179,6 +3273,12 @@
"parse-passwd": "^1.0.0"
}
},
"hosted-git-info": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
"dev": true
},
"hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@ -4587,6 +4687,18 @@
"osenv": "^0.1.4"
}
},
"normalize-package-data": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
"dev": true,
"requires": {
"hosted-git-info": "^2.1.4",
"resolve": "^1.10.0",
"semver": "2 || 3 || 4 || 5",
"validate-npm-package-license": "^3.0.1"
}
},
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -5090,6 +5202,12 @@
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
"dev": true
},
"path-parse": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
"dev": true
},
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@ -6164,6 +6282,17 @@
}
}
},
"read-pkg": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
"integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
"dev": true,
"requires": {
"normalize-package-data": "^2.3.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0"
}
},
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
@ -6274,6 +6403,15 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resolve": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
"integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
},
"resolve-cwd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
@ -7019,6 +7157,44 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
"spawn-command": {
"version": "0.0.2-1",
"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
"integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=",
"dev": true
},
"spdx-correct": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
"integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
"dev": true,
"requires": {
"spdx-expression-parse": "^3.0.0",
"spdx-license-ids": "^3.0.0"
}
},
"spdx-exceptions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
"integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
"dev": true
},
"spdx-expression-parse": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
"integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
"dev": true,
"requires": {
"spdx-exceptions": "^2.1.0",
"spdx-license-ids": "^3.0.0"
}
},
"spdx-license-ids": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
"integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
"dev": true
},
"spdy": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.1.tgz",
@ -7518,6 +7694,12 @@
}
}
},
"tree-kill": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
"dev": true
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
@ -7841,6 +8023,16 @@
"integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==",
"dev": true
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
"dev": true,
"requires": {
"spdx-correct": "^3.0.0",
"spdx-expression-parse": "^3.0.0"
}
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

View file

@ -6,7 +6,8 @@
"main": "index.js",
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack.config.cjs",
"dev": "webpack-dev-server --history-api-fallback --config webpack.config.cjs --content-base public",
"dev": "concurrently --kill-others \"npm run dev-server\" \"npm run webpack\"",
"webpack": "webpack-dev-server --history-api-fallback --config webpack.config.cjs --content-base public",
"prod-server": "cross-env NODE_ENV=production node index.js",
"dev-server": "nodemon -w api/ -w index.js",
"production": "npm run build && npm run prod-server"
@ -37,6 +38,7 @@
"autoprefixer": "^9.7.3",
"axios": "^0.19.0",
"bootstrap": "^4.4.1",
"concurrently": "^5.2.0",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"eslint": "^6.8.0",