How to render a page in pug template engine in node.js

Question

I want to render a page when I click on Signin . I use a Service Oriented Architecture , in which I use the Pug Template Engine for making an Admin-Panel . When I click on SignIn , it give the error below.

{"error":{"message":"Not found"}}

I don't know where I made a mistake. Please help me.

Here is the welcome.pug code where there is a Signin link. Please see if I use the correct url or not.

  doctype html
  html(lang='{{ app()->getLocale() }}')
    head
      meta(charset='utf-8')
      meta(http-equiv='X-UA-Compatible', content='IE=edge')
      meta(name='viewport', content='width=device-width, initial-scale=1')
      title QuizLit
      // Fonts
      link(href='https://fonts.googleapis.com/css?family=Raleway:100,600', rel='stylesheet', type='text/css')
      // Styles
      style.
        html, body {
        background-color: #fff;
        color: #636b6f;
        font-family: 'Raleway', sans-serif;
        font-weight: 100;
        height: 100vh;
        margin: 0;
        }
        .full-height {
        height: 100vh;
        }
        .flex-center {
        align-items: center;
        display: flex;
        justify-content: center;
        }
        .position-ref {
        position: relative;
        }
        .top-right {
        position: absolute;
        right: 10px;
        top: 18px;
        }
        .content {
        text-align: center;
        }
        .title {
        font-size: 84px;
        }
        .links > a {
        color: #636b6f;
        padding: 5px 25px;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
        border: solid 1px #636b6f;
        border-radius: 50px;
        }
        .m-b-md {
        margin-bottom: 30px;
        }
    body
      .flex-center.position-ref.full-height
        .content
          .title.m-b-md
            | Welcome to QuizLit
          .links
            a(href='/login') Sign in

Here is the structure of my code.

Here is the login.pug file

  include ../layout/main

  block content
  // Horizontal Form
  .login-box
    .login-logo
      a(href='/')
        b Admin
    // /.login-logo
    .login-box-body
      p.login-box-msg Sign in to start your session
      form(role='form', method='POST', action="/login")
        ul.text-danger
        .has-feedback(class="form-group{{ $errors->has('email') ? ' has-error' : '' }}")
          input#email.form-control(type='email', name='email', value=" ", placeholder='Email', required='')
          //- |         @if ($errors->has('email'))
          span.help-block
          //-   strong {{ $errors->first('email') }}
          //- |         @endif
          span.glyphicon.glyphicon-envelope.form-control-feedback
        .has-feedback(class="form-group{{ $errors->has('password') ? ' has-error' : '' }}")
          input#password.form-control(type='password', name='password', placeholder='Password', required='')
          //- |             @if ($errors->has('password'))
          span.help-block
          //-   strong {{ $errors->first('password') }}
          //- |             @endif
          span.glyphicon.glyphicon-lock.form-control-feedback
        .row
          .col-xs-7.col-xs-offset-1
            .checkbox.icheck
              label
                input(type='checkbox')
                |  Remember Me
          // /.col
          .col-xs-4
            button.btn.btn-primary.btn-block.btn-flat(type='submit') Sign In
          // /.col

  //- | @section('page_specific_scripts')
  script(src="/plugins/iCheck/icheck.min.js")
  script.
    $(function () {
    $('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' /* optional */
    });
    });

And here is the Api.js code:

'use strict'

const express = require('express');
const router = express.Router();
const adminAuthService = require('../service/adminAuthService');
const middlewares = require('../../../base/service/middlewares/accessControl');

router.post("/login", (req, res, next) => {
    adminAuthService.login(req.body)
        .then(data => {
            return res.send(data)
        }, err => next(err))
});

router.post("/createstudent", middlewares.assertUserIsAdmin, (req, res, next) => {
    // router.post("/createstudent", (req, res, next) => {
    adminAuthService.signupStudent(req.body)
        .then(data => {
            return res.send(data)
        }, err => next(err))
});

module.exports = router;

Here is the Index.js file:

'use strict'

const express = require('express');
const router = express.Router();
const adminRoutes = require("./admin");
const teacherRoutes = require("./teacher");
const appRoutes = require("./api");

router.use("/admin", adminRoutes);
router.use("/teacher", teacherRoutes);
router.use("/api", appRoutes);

router.get('/', (req, res, next) => {
   res.render('welcome');
})

module.exports = router

How should I separately define the Web Routes and Api Routes to use a Service Oriented Architecture in Node.js.

Answer 1

Firstly you do not have any /login route in the index.js file, so /login on the button would not work.

Secondly you don't seem to have any route handler which will render the login.pug file. You can define this in the index.js file as a GET route

router.get('/login', (req, res, next) => {
   res.render('login');
});

You can even keep this route handler in your api.js file in which case the effective route for the button would be

.links
   a(href='/api/login') Sign in

Answer 2

Another thing that may help is including a POST method request in your pug file.

At the moment, it appears you only have an API endpoint for /login listening for POST requests.

@stephen suggested you add a get route. If you don't want to or can't do that, you need to call /login with a POST method. Make sure to pass along the user information needed to authenticate them.