/webserver-template

Primary LanguageTypeScriptMIT LicenseMIT

Web-Server/Client

Introduction

This project combines a Node.js/Express Web-Server and a Angular 2+ Web-Client (based on Angular CLI). This project is using Visual Studio Code as development environment (IDE).

See also:

Prerequisites

Make sure that you have installed on your system:

  • Node.js
  • Visual Studio Code
  • Angular CLI

Now clone the project from git repository, install all modules in the subdirectory server (Node.js/Express server) and the subdirectory ng2 (Angular2 app). If you want to start a Angular 2+ project from scratch, remove the ng2 subdirectory and recreate it with Angular-Cli.

git clone <project>
cd <project>
cd server
npm install
cd ../ng2
npm install
cd ..
code .

To recreate the Angular 2+ project use...

rm -r ng2
ng new ng2

Visual Studio Code

There are many extensions available. It' strongly recommended to install the following extensions:

  • TSLint

The Web-Server subproject is using Gulp as building control tool. To combine some actions with keyboard shortcuts, copy the content of .vscode/keybindings.json to your personal Keyboard shortcut definition (menu File->Preferences->Keyboard Shortcuts). Then the following keyboard shortcuts are available:

  • CTRL + C ... Clean project
  • CTRL + V ... Clean and build project
  • CTRL + B ... Build project
  • CTRL + N ... Build Angular 2+ project

To start the Web-Server press:

  • F5 ... start in debugging mode
  • CTRL + F5 ... start normal (without debugging)

Branches

Use command git checkout <branch> to get one of the following branches:

  • step1-express-middleware

    • How to create and insert middleware functionality to the web-server.
    • How to prettify your HTML response using Bootstrap.
    • How to simplify creation of HTML response using the rendering engine pug.

  • step2-provide-ng2-app

    • How to support the Angular 2+ application from express web-server.
    • How to use a spinner element to indicate Angular application loading.

  • step3-server-oop-and-logging

    • How to use the logger module morgan.
    • How to implement the server as object.
    • How to use config files with the module nconf
    • How to filter debug-sx messages.
    • How to act on client connect and disconnect

  • step4-professional-logging

    • How to use debug-sx handlers.
    • How to configure logging by config file.

  • step5-ng2-component

    • How to show object attributes in components' HTML.
    • How to call object methods caused by HTML button click.
    • How to insert an image into the component's HTML.
    • How to use of Bootstrap CSS in Angular components.
    • How to create a new Angular 2+ component.
    • How to use the component's lifecycle to implement a time view.
    • How to use then module sprintf-js to format strings.

  • step6-login-form

    • How to create a login form with id and password.
    • How to create an Angular 2+ service for user management.
    • How to make a XML HTTP Request (XHR) in order to login a user.
    • How to use a shared service in order to exchange data between two components.
    • How to solve the cross origin problem when running separated servers.
    • How to handle a Post request on server side.

  • step7-login-logout

    • How to use the Angular 2+ router module if user is logged in.
    • How to implement the logout.
    • How to show a flash message if login fails.
    • How to create a singleton for user management on server side.
    • How to create and verify a password hash.

  • step8a-sessions-with-cookies

    • How to get restricted data after as user after login (client-side)
    • How to implement cookie based sessions on express-server (server-side).
    • How to restrict data access, depending on if user is verified (server-side).

  • step8b-json-web-token

    • How to create and verify access tokens.
    • How to implement restriced data resources.
    • How to login and logut the user using an access-token.

  • step9-mongodb

    • How to use the database MongoDB to manage users.
    • How to use mongoose to implement database schemes.
    • How to use password-hash for password hashes.
    • How to handle server startup and shutdown with Promises.
    • How to handle nested database schemes.

  • step10-modal-dialog

    • How to support (server-side) and use (client-side) Bootstrap V4
    • How to implement the modal dialogs.
    • How to user modal dialogs for login.
    • How to dynamically create and remove components.
    • How to handle authentication if user logout from another session.
    • How to implement a non angular login page.
    • How to use Font Awesome Icons as replacement for Bootstrap V3 Glyphicons.

  • step11-non-ngx-login

    • How to support /login resource with non angular page.
    • How to use modal login dialog in all other cases automatically.
    • How to transport remote token to the Angular application.
    • How to handle logout in order to exit from Angular application.
    • How to take over remote token on startup.
    • How to open modal login dialog authomatically on startup.