Node Express Server with UI Code

Basice template for a node-express server with UI

Brought to you by: vcrfix

Tree [53fe8e] master /

History

HTTPS access

File	Date	Author	Commit
views	2019-09-30	Patrick Ingle	[bc0918] initial commit
.gitignore	2022-05-28	Patrick Ingle	[53fe8e] remove node_mpodules from the repository
app.js	2019-09-30	Patrick Ingle	[bc0918] initial commit
package-lock.json	2019-09-30	Patrick Ingle	[bc0918] initial commit
package.json	2019-09-30	Patrick Ingle	[bc0918] initial commit
readme.md	2019-09-30	Patrick Ingle	[bc0918] initial commit
settings.json	2019-09-30	Patrick Ingle	[bc0918] initial commit

Read Me

Node Express Server with UI

Setup Node Environment

The following node modules are required,

npm install express config.json body-parser cors fs path

You will also need to install the PKG module globally,

npm install -g pkg

Using the Visual Studio Code editor (https://code.visualstudio.com/Download), you need to install the followng extensions,

hookyqr.minify

and,

vscode-base64

Directory Structure

Create a views directory, to hold the HTML files.

Inside the ./views subdirectory, create two files,

index.html and index.js

Edit the index.js,

module.exports.data = "";

will fill in the data variable with production version of the minified and base64 encoded version of index.html

SETTINGS.JSON

Create a settings.json in the project root,

{
    "domain": "localhost",
    "host": "localhost",
    "port": 5151
}

Development

For creating the index.html, launch the server using node,

node app.js

You will be able to edit index.html live and see changes just by refreshing your browser at http://localhost:5151

Prepare for Production (or standalone executable)

First, you need to minify the HTML, from with VSCode, press the F-1 key, type and select minify

the following file is created in the views directory,

index.min.html

Next, open the index.min.html in the VSCode editor, select all text (Ctrl-A), press F-1 and choose Base64 Encode

then perform Edit|Copy

PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PG1ldGEgY2hhcnNldD0idXRmLTgiPjx0aXRsZT5Ob2RlIEV4cHJlc3MgU2VydmVyIHdpdGggVUk8L3RpdGxlPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsaW5pdGlhbC1zY2FsZT0xIj48IS0tIFVzZSBDRE4gZm9yIHRoaXJkIHBhcnR5IGZyYW1ld29ya3MsIHNlZSBhIGxpc3Qgb2YgQ0ROIGF0IGh0dHBzOi8vY2RuanMuY29tLyAtLT48bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9Imh0dHBzOi8vd3d3Lnczc2Nob29scy5jb20vdzNjc3MvNC93My5jc3MiPjxsaW5rIGhyZWY9Imh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vaWNvbj9mYW1pbHk9TWF0ZXJpYWwrSWNvbnMiIHJlbD0ic3R5bGVzaGVldCI+PHN0eWxlPi5oZWFkZXJ7cG9zaXRpb246Zml4ZWQ7dG9wOjA7bGVmdDowO3dpZHRoOjEwMCV9LmZvb3Rlcntwb3NpdGlvbjpmaXhlZDtsZWZ0OjA7Ym90dG9tOjA7d2lkdGg6MTAwJTt0ZXh0LWFsaWduOmNlbnRlcn0uaW5kZW50e3RleHQtaW5kZW50OjElfWltZ3ttYXgtd2lkdGg6MTAwJTtoZWlnaHQ6YXV0b30uY2VudGVyLXNjcmVlbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6NTAlO2xlZnQ6NTAlO3BhZGRpbmc6NTBweDstbXMtdHJhbnNmb3JtOnRyYW5zbGF0ZVgoLTUwJSkgdHJhbnNsYXRlWSgtNTAlKTstd2Via2l0LXRyYW5zZm9ybTp0cmFuc2xhdGUoLTUwJSwtNTAlKTt0cmFuc2Zvcm06dHJhbnNsYXRlKC01MCUsLTUwJSl9PC9zdHlsZT48IS0tDQogICAgICAgICAgICAgICAgSW1hZ2VzIHNob3VsZCBiZSBsaW5rZWQgZXh0ZW5hbGx5LCBvciBlbWJlZGRlZCBpbiB0aGUgSFRNTCBhcyBCYXNlNjQsIHNlZSBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy82NzA2ODkxL2VtYmVkZGluZy1pbWFnZS1pbi1odG1sLWVtYWlsDQogICAgICAgICAgICAgICAgZS5nLiwgPGltZyBzcmM9ImRhdGE6aW1hZ2UvanBnO2Jhc2U2NCx7e2Jhc2U2NC1kYXRhLXN0cmluZyBoZXJlfX0iIC8+DQoNCiAgICAgICAgICAgICAgICBBbiBJbWFnZWQgRW5jb2RlciBhdmFpbGFibGUgYXQgaHR0cHM6Ly93d3cubW90b2JpdC5jb20vdXRpbC9iYXNlNjQtZGVjb2Rlci1lbmNvZGVyLmFzcA0KICAgICAgICAgICAgLS0+PC9oZWFkPjxib2R5PjwhLS0gSEVBREVSIC0tPjxkaXYgY2xhc3M9InczLWNvbnRhaW5lciI+PGgxIGNsYXNzPSJ3My1jb250YWluZXIgaGVhZGVyIHczLWluZGlnbyIgaWQ9ImhlYWRlciI+Tm9kZSBFeHByZXNzIFNlcnZlciB3aXRoIFVJPC9oMT48L2Rpdj48IS0tIE1BSU4gTkFWSUdBVElPTiAtLT48ZGl2IGlkPSJtYWluLXBhZ2UiIGNsYXNzPSJ3My1jb250YWluZXIgdzMtY2VudGVyIHczLWJsb2NrIHczLXBhZGRpbmctNjQiPjx0YWJsZSBjbGFzcz0idzMtdGFibGUgdzMtYm9yZGVyIiBpZD0iaW5mby10YWJsZSI+PC90YWJsZT48L2Rpdj48IS0tIEZPT1RFUiAtLT48Zm9vdGVyIGNsYXNzPSJ3My1jb250YWluZXIgZm9vdGVyIHczLWluZGlnbyIgaWQ9ImZvb3RlciI+PGgyPiZjb3B5OyAyMDE5IGJ5IDxhIGhyZWY9Imh0dHBzOi8vcHJlc3NwYWdlLmluZm8iIHN0eWxlPSJ0ZXh0LWRlY29yYXRpb246bm9uZSIgdGFyZ2V0PSJfYmxhbmsiPlByZXNzUGFnZSBFbnRlcnRhaW5tZW50IEluYzwvYT4uIEFsbCByaWdodHMgcmVzZXJ2ZWQuPC9oMj48L2Zvb3Rlcj48IS0tIFNDUklQVFMgLS0+PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPmxldCBiYXNlX3VybCA9IGxvY2F0aW9uLnByb3RvY29sKycvLycrbG9jYXRpb24uaG9zdG5hbWUrKGxvY2F0aW9uLnBvcnQgPyAnOicrbG9jYXRpb24ucG9ydDogJycpOw0KDQogICAgICAgICAgICBmdW5jdGlvbiBpZChlbGVtZW50X2lkKSB7DQogICAgICAgICAgICAgICAgcmV0dXJuIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGVsZW1lbnRfaWQpOw0KICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICB3aW5kb3cub25sb2FkID0gZnVuY3Rpb24oKSB7DQogICAgICAgICAgICAgICAgdmFyIGFib3V0X3VybCA9IGJhc2VfdXJsICsgIi9hYm91dCI7DQoNCiAgICAgICAgICAgICAgICBmZXRjaChhYm91dF91cmwpDQogICAgICAgICAgICAgICAgLnRoZW4ocmVzPT5yZXMuanNvbigpKQ0KICAgICAgICAgICAgICAgIC50aGVuKGZ1bmN0aW9uKGluZm8pew0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCA9ICI8dHI+PHRkPlByb2plY3QgTmFtZTo8L3RkPjx0ZD4iICsgaW5mby5uYW1lICsgIjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5EZXNjcmlwdGlvbjo8L3RkPjx0ZD4iICsgaW5mby5kZXNjcmlwdGlvbiArICI8L3RkPjwvdHI+IjsNCiAgICAgICAgICAgICAgICAgICAgaWQoImluZm8tdGFibGUiKS5pbm5lckhUTUwgKz0gIjx0cj48dGQ+VmVyc2lvbjo8L3RkPjx0ZD4iICsgaW5mby52ZXJzaW9uICsgIjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5BdXRob3I6PC90ZD48dGQ+IiArIGluZm8uYXV0aG9yICsgIjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5MaWNlbnNlOjwvdGQ+PHRkPjxhIGhyZWY9JyIgKyBpbmZvLmxpY2Vuc2VfdXJsICsgIicgdGFyZ2V0PSdfYmxhbmsnPiIgKyBpbmZvLmxpY2Vuc2UgKyAiPC9hPjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5EZXBlbmRlbmNpZXM6PC90ZD48dGQ+IjsNCiAgICAgICAgICAgICAgICAgICAgICAgIA0KICAgICAgICAgICAgICAgICAgICB2YXIgZGVwZW5kZW5jaWVzID0gaW5mby5kZXBlbmRlbmNpZXM7DQogICAgICAgICAgICAgICAgICAgIHZhciBrZXlzID0gT2JqZWN0LmtleXMoZGVwZW5kZW5jaWVzKTsNCiAgICAgICAgICAgICAgICAgICAga2V5cy5mb3JFYWNoKGZ1bmN0aW9uKGtleSwgaW5kZXgpew0KICAgICAgICAgICAgICAgICAgICAgICAgaWQoImluZm8tdGFibGUiKS5pbm5lckhUTUwgKz0gIjxwPiIgKyBrZXkgKyAiOiAiICsgZGVwZW5kZW5jaWVzW2tleV0gKyAiPC9wPiINCiAgICAgICAgICAgICAgICAgICAgfSk7DQogICAgICAgICAgICAgICAgICAgIGlkKCJpbmZvLXRhYmxlIikuaW5uZXJIVE1MICs9ICI8L3RkPjwvdHI+IjsNCiAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgIH07PC9zY3JpcHQ+PC9ib2R5PjwvaHRtbD4=

Now paste between the double quotes in the index.js file,

module.exports.data = "PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PG1ldGEgY2hhcnNldD0idXRmLTgiPjx0aXRsZT5Ob2RlIEV4cHJlc3MgU2VydmVyIHdpdGggVUk8L3RpdGxlPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsaW5pdGlhbC1zY2FsZT0xIj48IS0tIFVzZSBDRE4gZm9yIHRoaXJkIHBhcnR5IGZyYW1ld29ya3MsIHNlZSBhIGxpc3Qgb2YgQ0ROIGF0IGh0dHBzOi8vY2RuanMuY29tLyAtLT48bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9Imh0dHBzOi8vd3d3Lnczc2Nob29scy5jb20vdzNjc3MvNC93My5jc3MiPjxsaW5rIGhyZWY9Imh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vaWNvbj9mYW1pbHk9TWF0ZXJpYWwrSWNvbnMiIHJlbD0ic3R5bGVzaGVldCI+PHN0eWxlPi5oZWFkZXJ7cG9zaXRpb246Zml4ZWQ7dG9wOjA7bGVmdDowO3dpZHRoOjEwMCV9LmZvb3Rlcntwb3NpdGlvbjpmaXhlZDtsZWZ0OjA7Ym90dG9tOjA7d2lkdGg6MTAwJTt0ZXh0LWFsaWduOmNlbnRlcn0uaW5kZW50e3RleHQtaW5kZW50OjElfWltZ3ttYXgtd2lkdGg6MTAwJTtoZWlnaHQ6YXV0b30uY2VudGVyLXNjcmVlbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6NTAlO2xlZnQ6NTAlO3BhZGRpbmc6NTBweDstbXMtdHJhbnNmb3JtOnRyYW5zbGF0ZVgoLTUwJSkgdHJhbnNsYXRlWSgtNTAlKTstd2Via2l0LXRyYW5zZm9ybTp0cmFuc2xhdGUoLTUwJSwtNTAlKTt0cmFuc2Zvcm06dHJhbnNsYXRlKC01MCUsLTUwJSl9PC9zdHlsZT48IS0tDQogICAgICAgICAgICAgICAgSW1hZ2VzIHNob3VsZCBiZSBsaW5rZWQgZXh0ZW5hbGx5LCBvciBlbWJlZGRlZCBpbiB0aGUgSFRNTCBhcyBCYXNlNjQsIHNlZSBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy82NzA2ODkxL2VtYmVkZGluZy1pbWFnZS1pbi1odG1sLWVtYWlsDQogICAgICAgICAgICAgICAgZS5nLiwgPGltZyBzcmM9ImRhdGE6aW1hZ2UvanBnO2Jhc2U2NCx7e2Jhc2U2NC1kYXRhLXN0cmluZyBoZXJlfX0iIC8+DQoNCiAgICAgICAgICAgICAgICBBbiBJbWFnZWQgRW5jb2RlciBhdmFpbGFibGUgYXQgaHR0cHM6Ly93d3cubW90b2JpdC5jb20vdXRpbC9iYXNlNjQtZGVjb2Rlci1lbmNvZGVyLmFzcA0KICAgICAgICAgICAgLS0+PC9oZWFkPjxib2R5PjwhLS0gSEVBREVSIC0tPjxkaXYgY2xhc3M9InczLWNvbnRhaW5lciI+PGgxIGNsYXNzPSJ3My1jb250YWluZXIgaGVhZGVyIHczLWluZGlnbyIgaWQ9ImhlYWRlciI+Tm9kZSBFeHByZXNzIFNlcnZlciB3aXRoIFVJPC9oMT48L2Rpdj48IS0tIE1BSU4gTkFWSUdBVElPTiAtLT48ZGl2IGlkPSJtYWluLXBhZ2UiIGNsYXNzPSJ3My1jb250YWluZXIgdzMtY2VudGVyIHczLWJsb2NrIHczLXBhZGRpbmctNjQiPjx0YWJsZSBjbGFzcz0idzMtdGFibGUgdzMtYm9yZGVyIiBpZD0iaW5mby10YWJsZSI+PC90YWJsZT48L2Rpdj48IS0tIEZPT1RFUiAtLT48Zm9vdGVyIGNsYXNzPSJ3My1jb250YWluZXIgZm9vdGVyIHczLWluZGlnbyIgaWQ9ImZvb3RlciI+PGgyPiZjb3B5OyAyMDE5IGJ5IDxhIGhyZWY9Imh0dHBzOi8vcHJlc3NwYWdlLmluZm8iIHN0eWxlPSJ0ZXh0LWRlY29yYXRpb246bm9uZSIgdGFyZ2V0PSJfYmxhbmsiPlByZXNzUGFnZSBFbnRlcnRhaW5tZW50IEluYzwvYT4uIEFsbCByaWdodHMgcmVzZXJ2ZWQuPC9oMj48L2Zvb3Rlcj48IS0tIFNDUklQVFMgLS0+PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPmxldCBiYXNlX3VybCA9IGxvY2F0aW9uLnByb3RvY29sKycvLycrbG9jYXRpb24uaG9zdG5hbWUrKGxvY2F0aW9uLnBvcnQgPyAnOicrbG9jYXRpb24ucG9ydDogJycpOw0KDQogICAgICAgICAgICBmdW5jdGlvbiBpZChlbGVtZW50X2lkKSB7DQogICAgICAgICAgICAgICAgcmV0dXJuIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGVsZW1lbnRfaWQpOw0KICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICB3aW5kb3cub25sb2FkID0gZnVuY3Rpb24oKSB7DQogICAgICAgICAgICAgICAgdmFyIGFib3V0X3VybCA9IGJhc2VfdXJsICsgIi9hYm91dCI7DQoNCiAgICAgICAgICAgICAgICBmZXRjaChhYm91dF91cmwpDQogICAgICAgICAgICAgICAgLnRoZW4ocmVzPT5yZXMuanNvbigpKQ0KICAgICAgICAgICAgICAgIC50aGVuKGZ1bmN0aW9uKGluZm8pew0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCA9ICI8dHI+PHRkPlByb2plY3QgTmFtZTo8L3RkPjx0ZD4iICsgaW5mby5uYW1lICsgIjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5EZXNjcmlwdGlvbjo8L3RkPjx0ZD4iICsgaW5mby5kZXNjcmlwdGlvbiArICI8L3RkPjwvdHI+IjsNCiAgICAgICAgICAgICAgICAgICAgaWQoImluZm8tdGFibGUiKS5pbm5lckhUTUwgKz0gIjx0cj48dGQ+VmVyc2lvbjo8L3RkPjx0ZD4iICsgaW5mby52ZXJzaW9uICsgIjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5BdXRob3I6PC90ZD48dGQ+IiArIGluZm8uYXV0aG9yICsgIjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5MaWNlbnNlOjwvdGQ+PHRkPjxhIGhyZWY9JyIgKyBpbmZvLmxpY2Vuc2VfdXJsICsgIicgdGFyZ2V0PSdfYmxhbmsnPiIgKyBpbmZvLmxpY2Vuc2UgKyAiPC9hPjwvdGQ+PC90cj4iOw0KICAgICAgICAgICAgICAgICAgICBpZCgiaW5mby10YWJsZSIpLmlubmVySFRNTCArPSAiPHRyPjx0ZD5EZXBlbmRlbmNpZXM6PC90ZD48dGQ+IjsNCiAgICAgICAgICAgICAgICAgICAgICAgIA0KICAgICAgICAgICAgICAgICAgICB2YXIgZGVwZW5kZW5jaWVzID0gaW5mby5kZXBlbmRlbmNpZXM7DQogICAgICAgICAgICAgICAgICAgIHZhciBrZXlzID0gT2JqZWN0LmtleXMoZGVwZW5kZW5jaWVzKTsNCiAgICAgICAgICAgICAgICAgICAga2V5cy5mb3JFYWNoKGZ1bmN0aW9uKGtleSwgaW5kZXgpew0KICAgICAgICAgICAgICAgICAgICAgICAgaWQoImluZm8tdGFibGUiKS5pbm5lckhUTUwgKz0gIjxwPiIgKyBrZXkgKyAiOiAiICsgZGVwZW5kZW5jaWVzW2tleV0gKyAiPC9wPiINCiAgICAgICAgICAgICAgICAgICAgfSk7DQogICAgICAgICAgICAgICAgICAgIGlkKCJpbmZvLXRhYmxlIikuaW5uZXJIVE1MICs9ICI8L3RkPjwvdHI+IjsNCiAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgIH07PC9zY3JpcHQ+PC9ib2R5PjwvaHRtbD4=";

You will want to restore the index.min.html to ASCII by pressing F-1 and choosing Base64 Decode on the highlighted text.

Building the standalone executable

Requires the installation of pkg module globally,

npm install -g pkg

Then,

pkg app.js

will create three executables for windows, linux and macos.

Testing the standalone executable,

Create a subdirectory,

mkdir deploy

Copy the files to the deploy directory

copy app-win.exe deploy
copy|cp settings.json deploy
cp app-linux deploy
cp app-macos deploy

Then change to the deploy directory and start the standalone application,

cd deploy
app-win|./app-linux|./app-macos