Merge pull request #12 from nkoder/reload_page_on_code_change_only_if_asked_to

Make it possible to run server with file-watching but without automatic webpage reload
This commit is contained in:
Nicola 2021-04-29 22:44:49 +02:00 committed by GitHub
commit d272c761cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 218 additions and 12 deletions

View File

@ -52,7 +52,7 @@ You also need `npm` in version 7 (because of 2nd version of lockfile which was i
2. Clone the repository to your computer.
3. Open the folder in command prompt and run **`npm install`**
4. Make any changes you would like to suggest.
5. In command prompt run **`npm run build`** which will compile it to the `/build` folder, where you can make sure it works the easiest way to do so is to run **`npm run serve`**. You can also do both at once by running `npm test`.
5. In command prompt run **`npm run hot`** which will compile app to the `/build` folder, serve under [http://localhost:3000](http://localhost:3000), then open in your browser. Moreover, it restarts server every time you save your changes in a codebase. You can go even further by running `npm run hot:reload`, which will also trigger webpage reloads.
6. Add, Commit and Push your changes to your fork.
7. On the github page for your fork, click **New Pull Request** above the file list.
8. Change the **head repository** dropdown to your fork.

197
package-lock.json generated
View File

@ -23,6 +23,7 @@
"sass": "^1.17.3"
},
"devDependencies": {
"cross-env": "7.0.3",
"reload": "^3.1.1",
"wait-cli": "^1.0.0"
}
@ -1528,6 +1529,53 @@
"version": "1.0.2",
"license": "MIT"
},
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
"dev": true,
"dependencies": {
"cross-spawn": "^7.0.1"
},
"bin": {
"cross-env": "src/bin/cross-env.js",
"cross-env-shell": "src/bin/cross-env-shell.js"
},
"engines": {
"node": ">=10.14",
"npm": ">=6",
"yarn": ">=1"
}
},
"node_modules/cross-env/node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
"dev": true,
"dependencies": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
"which": "^2.0.1"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/cross-env/node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"dependencies": {
"isexe": "^2.0.0"
},
"bin": {
"node-which": "bin/node-which"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/cross-spawn": {
"version": "3.0.1",
"license": "MIT",
@ -2447,7 +2495,72 @@
"node_modules/fsevents": {
"version": "1.2.12",
"bundleDependencies": [
"node-pre-gyp"
"node-pre-gyp",
"abbrev",
"ansi-regex",
"aproba",
"are-we-there-yet",
"balanced-match",
"brace-expansion",
"chownr",
"code-point-at",
"concat-map",
"console-control-strings",
"core-util-is",
"debug",
"deep-extend",
"delegates",
"detect-libc",
"fs-minipass",
"fs.realpath",
"gauge",
"glob",
"has-unicode",
"iconv-lite",
"ignore-walk",
"inflight",
"inherits",
"ini",
"is-fullwidth-code-point",
"isarray",
"minimatch",
"minimist",
"minipass",
"minizlib",
"mkdirp",
"ms",
"needle",
"nopt",
"npm-bundled",
"npm-normalize-package-bin",
"npm-packlist",
"npmlog",
"number-is-nan",
"object-assign",
"once",
"os-homedir",
"os-tmpdir",
"osenv",
"path-is-absolute",
"process-nextick-args",
"rc",
"readable-stream",
"rimraf",
"safe-buffer",
"safer-buffer",
"sax",
"semver",
"set-blocking",
"signal-exit",
"string_decoder",
"string-width",
"strip-ansi",
"strip-json-comments",
"tar",
"util-deprecate",
"wide-align",
"wrappy",
"yallist"
],
"hasInstallScript": true,
"license": "MIT",
@ -5598,6 +5711,15 @@
"node": ">=0.10.0"
}
},
"node_modules/path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/path-parse": {
"version": "1.0.6",
"license": "MIT"
@ -6411,6 +6533,27 @@
"version": "1.1.1",
"license": "ISC"
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
"dev": true,
"dependencies": {
"shebang-regex": "^3.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/shebang-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/signal-exit": {
"version": "3.0.3",
"license": "ISC"
@ -8847,6 +8990,37 @@
"core-util-is": {
"version": "1.0.2"
},
"cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
"dev": true,
"requires": {
"cross-spawn": "^7.0.1"
},
"dependencies": {
"cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
"dev": true,
"requires": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
"which": "^2.0.1"
}
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}
}
}
},
"cross-spawn": {
"version": "3.0.1",
"requires": {
@ -11575,6 +11749,12 @@
"path-is-absolute": {
"version": "1.0.1"
},
"path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true
},
"path-parse": {
"version": "1.0.6"
},
@ -12119,6 +12299,21 @@
"setprototypeof": {
"version": "1.1.1"
},
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
"dev": true,
"requires": {
"shebang-regex": "^3.0.0"
}
},
"shebang-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true
},
"signal-exit": {
"version": "3.0.3"
},

View File

@ -7,7 +7,8 @@
"build": "node ./build.js ./build",
"serve": "node ./server.js ./build 3000",
"test": "npm run build && npm run serve",
"hot": "concurrently \"nodemon --exec npm test\" \"await tcp localhost:3000 && open-cli http://localhost:3000\""
"hot": "concurrently \"nodemon --exec npm test\" \"await tcp localhost:3000 && open-cli http://localhost:3000\"",
"hot:reload": "cross-env RELOAD=yes npm run hot"
},
"author": "Lospec",
"license": "ISC",
@ -31,6 +32,7 @@
"sass": "^1.17.3"
},
"devDependencies": {
"cross-env": "7.0.3",
"reload": "^3.1.1",
"wait-cli": "^1.0.0"
}

View File

@ -9,7 +9,7 @@ const PORT = process.argv[3] || 3000;
//ROUTE - index.htm
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) {
if(err){
if (err) {
console.log('error sending file', err);
} else {
console.log("Server: Successfully served index.html");
@ -31,9 +31,18 @@ app.get('/pixel-editor/app', (req, res) => {
//ROUTE - other files
app.use(express.static(path.join(__dirname, BUILDDIR)));
reload(app).then(() => {
//start server
app.server = app.listen(3000, function () {
console.log('Web server listening on port ' + PORT)
// "reload" module allows us to trigger webpage reload automatically on file changes, but inside pixel editor it also
// makes browser steal focus from any other window in order to ask user about unsaved changes. It might be quite
// intrusive so we decided to give option to choose preferred workflow.
if (process.env.RELOAD === "yes") {
reload(app).then(() => {
//start server
app.server = app.listen(PORT, () => {
console.log(`Web server listening on port ${PORT} (with reload module)`);
})
});
} else {
app.listen(PORT, () => {
console.log(`Web server listening on port ${PORT}`);
})
});
}