JavaScript Multi Stack Lab
Create a secure, versatile, simple multi stack application with pure JavaScript code, to act as a template for learning, further discussions and improvements.
Node.js
as JavaScript runtime environment
Express
as Node.js server framework
MongoDB
as document/NoSql database
JWT
as stateless authentication token generator
Bcrypt
as password hashing algoritm
Passport
as authentication tool
Helmet
as protection to well-known web vulnerabilities by setting HTTP headers appropriately
socket.io
as real-time bi-directional event based communication library between web and server (todo...)
Web Push
as web browser notification library (todo...)
Handlebars
as client template engine for using Express with server side rendering
Note! To be deprecated in favour of pure html.
Mongoose
as object modeling tool for MongoDB
Bootstrap
as UI kit
Fontawesome
as icon kit
Babel
as transpiler of modern ECMAScript to ES5
Webpack
as production build tool
cssnano
as CSS compression tool powered by PostCSS
Nodemon
as live reload tool for node server (dev)
Browsersync
as live reload tool for browser (dev)
cors
as cross-origin resource sharing enabler
dotenv-safe
as environment provider
Description of the most important parts of the structure.
├── api # Express route controllers for all endpoints
├── assets # Static assets for server side rendered pages
├── config # Configuration including environment variables
├── loaders # Express startup process split into specific modules
├── models # Moongoose database models
├── services # Business logic services
└── views # Handlebars templates used by server side redering
.env # Environment variables
server.js # Server entry point
Install Node.js
(version 12). MongoDB
could be installed locally on your development machine or e.g. provided by MongoDB Atlas in the cloud.
All other packages are installed isolated inside the project.
cd to-your-working-folder
git clone https://github.com/hakalb/express-stack-lab.git
Install project dependencies to node_modules
.
npm i
mongod --config /usr/local/etc/mongod.conf --fork
Create an environment file from the provided example och edit with your settings.
cp .env.example .env
Note!
.env
should be kept secret and not shared with anyone not trusted.
npm run dev
Open a browser and navigate to http://localhost:3000.
Add application debug to terminal (optional).
DEBUG=app:* npm run dev
You can also include more namespaces for more extended debug; e.g. app,express
.
npm run build
npm run server:prod
Open a browser and navigate to http://localhost:8000.
Or build for production and start at once.
npm run prod
Fontawesome is installed to use SVG icons together with jQuery. This will enable event binding and other DOM manipulations.
webpack-dev-server
instead of nodemon
and babel-node
(same as above)Axios
for REST-api calls to complete the login process