Best practice for rendering views in Express.js and EJS

Question

I got passed a website that render only EJS templates, using Express.js routing. All possible routes are in /routes/index.js file. Because file will get bigger(multiple new routes will be added), I want to split file to more friendly state for future developers. And even though there are multiple categories, URL is only 1 level deep.

https://i.stack.imgur.com/J5eEq.png <-navigation bar with categories and pages

Example: On picture you can see multiple categories, but if you click on "Gamble Diagram", it redirect you to route /acidbase-belance . More logical one would be /acidbase/belance . And there is a lot of code repetition.

Current implementation:

 router.get("/acidbase", function (req, res, next) {
  res.render("template", { title: "Acid-base Simulator", page: "acidbase" });
});

router.get("/acidbase-intro", function (req, res, next) {
  res.render("template", {
    title: "The ABC of Acid-base balance",
    page: "acidbaseintro",
  });
});

router.get("/acidbase-the-interpreter", function (req, res, next) {
  res.render("template", {
    title: "The Interpreter",
    page: "acidbaseInterpreter",
  });
});

router.get("/acidbase-balance", function (req, res, next) {
  res.render("template", {
    title: "Acid-base balance",
    page: "acidbaseBalance",
  });
});

router.get("/cardiovascular", function (req, res, next) {
  res.render("template", {
    title: "Cardiac and vascular function coupling",
    page: "cardiovascular",
  });
});

router.get("/cardiovascular-theory", function (req, res, next) {
  res.render("template", {
    title: "Cardiovascular theory",
    page: "cardiovascularTheory",
  });
});

router.get("/pvsimulator", function (req, res, next) {
  res.render("template", { title: "pV Diagram", page: "cardiovascularpv" });
});

router.get("/electrophysiology2", function (req, res, next) {
  res.render("template", {
    title: "Nernst potentials",
    page: "electrophysiology2",
  });
});

router.get("/electrophysiology", function (req, res, next) {
  res.render("template", {
    title: "Equilibrium membrane potential",
    page: "electrophysiology",
  });
});

...
...
...

What would be best practice to refactor this?

My ideas:

• split each category to separate file ( routes\categorieName.js )

• create array of possible routes in routes\index.js , and create some lookup mechanism. Example:

var possible_routes = [{ categorie: "acidbase", subroutes: [{ title: "test", page: "acid" }] }];
router.get("/:categorie/:page", function (req, res, next) {

var categorie = possible_routes.find(obj => {
  return obj.categorie === req.params.categorie
})

...
...
...

  if (typeof req.params.page !== "undefined")

    res.render("template", { title: "Express", page: req.params.categorie/req.params.page });
});

• or mix between both previous ideas, split categories to separate file and create mechanism for pages.

Answer 1

Ok now I got what you mean to do.

So you would go about like this:

const productRouter = require('./routes/productRouter.js');
app.get('/product', productRouter));

The product router would be something like this:

const express = require('express');

const router = express.router();

router.get('/acidbaseblabla', (req, res) => {
    res.render('yourview.ejs')
});

export default router;

You can repeat this multiple times as needed and thus dividing your routes in different files.

You have to use the request parameters ( /:product ) only if you need to render a dynamic item, not for static views.

I hope this makes sense and can help you understand how to approach this: :)