JavaScript Express Multi Stack Lab

(: It's all about learning stuff :)

Table of contents

• 1. Purpose of project
  • The main stack
  • Security
  • Real-time notification and communication
  • Template engine
  • Database tools
  • Design
  • Serve, build and deploy
• 2. Server application structure
• 3. Prerequisites
• 4. How do I start
  • 4.1 Clone the project
  • 4.2 Start MongoDB as background process (local installation only)
  • 4.3 Setup environment variables
  • 4.4 Start development
  • 4.5 Build production
  • 4.6 Start production
• 5. UI Design
• 6. References
  • Project software
  • Inspirational articles
• 7. Present simplifications and future improvements
  • 7.1 Urgent todos
  • 7.2 Future

1. Purpose of project

Create a secure, versatile, simple multi stack application with pure JavaScript code, to act as a template for learning, further discussions and improvements.

The main stack

• Node.js as JavaScript runtime environment
• Express as Node.js server framework
• MongoDB as document/NoSql database

Security

• 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

Real-time notification and communication

• socket.io as real-time bi-directional event based communication library between web and server (todo...)
• Web Push as web browser notification library (todo...)

Template engine

• Handlebars as client template engine for using Express with server side rendering

Note! To be deprecated in favour of pure html.

Database tools

• Mongoose as object modeling tool for MongoDB

Design

• Bootstrap as UI kit
• Fontawesome as icon kit

Serve, build and deploy

• 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

2. Server application structure

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

3. Prerequisites

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.

4. How do I start

4.1 Clone 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

4.2 Start MongoDB as background process (local installation only)

mongod --config /usr/local/etc/mongod.conf --fork

4.3 Setup environment variables

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.

4.4 Start development

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.

4.5 Build production

npm run build

4.6 Start production

npm run server:prod

Open a browser and navigate to http://localhost:8000.

Or build for production and start at once.

npm run prod

5. UI Design

• Bootstrap Components
• Fontawesome Icons

Fontawesome is installed to use SVG icons together with jQuery. This will enable event binding and other DOM manipulations.

6. References

Project software

• https://expressjs.com/en/starter/generator.html
• https://github.com/pillarjs/hbs
• https://handlebarsjs.com/
• https://docs.mongodb.com/manual/administration/install-community/
• https://docs.mongodb.com/compass/current/
• https://mongoosejs.com/
• https://getbootstrap.com/
• https://fontawesome.com/
• http://www.passportjs.org/
• https://jwt.io/
• https://github.com/web-push-libs/web-push
• https://github.com/rolodato/dotenv-safe

Inspirational articles

• Sessionless authentication in Express with JWT and Passport

7. Present simplifications and future improvements

7.1 Urgent todos

• Replace Handlebars with pure html files to be able to use ES6 everywhere and to get better builds
• Use webpack-dev-server instead of nodemon and babel-node (same as above)
• Use Axios for REST-api calls to complete the login process

7.2 Future

• Remove jQuery dependency
• ...