Express.js MVC Server with Handlebars and Sneat Admin Template + Built-in database-less Authentication

This repository contains an Express.js server structured in the MVC (Model-View-Controller) pattern, using Handlebars (hbs) for templating and incorporating the Sneat Admin Template for the frontend with pre built in authentication by json. it uses cookies to store the user session.

Table of Contents

• Installation
• Usage
• Routes
• Controllers
• Views
• License

Installation

1. Clone the repository:

    git clone https://github.com/hassankhurram/simplewebjs.git
    cd simplewebjs

2. Install dependencies:

   npm install

3. Environment Variables:

   you can rename example.env to .env and set the variables as per your needs.

   NODE_ENV=development
   PORT=7896
   APP_TITLE=BatchCom CE
   BASE_URL=https://localhost:7896
   PASS_SALT_ROUNDS=10
   JWT_SECRET="abc1234"
   JWT_EXPIRES_IN=3600s

4. Docker:

   DockerFile and docker-compose file is included:

   docker compose up --build -d

Usage

In development:

npm run dev

In Production:

npm run start

Routes

Routers are automatically loaded based on their name and class name by routers/routes.js file, it loops all the files in the folder routes and loads them for you so that you don't have to manually import them.

i.e.

authRouter.js >

   export default class AuthRouter extends BaseRouter{
      static urlPath = "/auth";
      constructor(router) {
         super(router, AuthController);
         this.router.get('/login', AuthController.generateLoginPage);
         this.router.get('/logout', AuthController.logOutUser);
         this.router.post("/submit_login", AuthController.attemptLogin);
      }
   };

file name and class name should be the same with naming convention in mind.

The variable urlPath defines the prefix of the URL per router Syntax: http://localhost:7896/:urlPath/url i.ie

   static urlPath = "/auth";

  http://localhost:7896/auth/

Controllers

Controllers are simple having static functions in the class, can be exported and called, take an example of working of AuthController with AuthRouter

example:

export class MyController extends BaseController {

   constructor() {
      super();
   }

   static async someRandomController(req, res) {
      
   }
}

Views

Views are placed inside pages folder, having layout and partials.

Layouts are the structure in the page (component is loaded) along with partials ( repeated parts of the code. ) The variables are populated using handlebars. you can also use ejs instead of handlebars. The pages are generated using utils/generator.js file.

Layout:

.
├── layouts
│   ├── authcontext.hbs
│   ├── basic.hbs
│   └── dashboardcontext.hbs
├── pages
│   ├── http
│   │   └── error.hbs
│   ├── index.hbs
│   └── login.hbs
└── partials
   ├── footer.hbs
   ├── navbar.hbs
   ├── scripts.hbs
   └── sidebar.hbs

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

This project was inspired by the following resources:

• Express.js
• Handlebars
• Sneat Admin Template

Feel free to contact me on [email protected] if you have any questions or suggestions or raise an issue if needed.