how to load assets in ejs file when you have two different main routes?

i have simple blog express app which i set up of two different main routes, regular routes (login,post,signup etc...) and for admin (add post,edit post etc...) the issue is my assets, css or any other static files does not load in the admin routes only but fortunately works in regular routes. my express setup is as follow:

app.use('/admin/pages', adminPages);
app.use('/', pages);

so after investigating the chrome developer tools for both main routs this is the issue but have no idea how to solve it ! this is when the admin routs does not load bootstrap or css files: enter image description here notice all assets is prefixed with unwanted (admin/pages/...) after localhost:3005

but it works here (without the prefix) : enter image description here

heres my file structure:

enter image description here

full App.js :

const express = require('express'),
    app = express(),
    path = require('path'),
    mongoose = require('mongoose'),
    bodyParser = require('body-parser'),
    pages = require('./routes/pages.js'),
    config = require('./config/database'),
    expressSession = require('express-session'),
    expressValidator = require('express-validator'),
    adminPages = require('./routes/admin_pages.js');

mongoose.connect(config.database);
const database = mongoose.connection;
database.on('error', console.error.bind(console, '@@error with database:'));
database.once('open', () => {
    console.log('Connected To Database successfully');
});

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
// app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.set('trust proxy', 1);
app.use(
    expressSession({
        secret: 'keyboard cat',
        resave: false,
        saveUninitialized: true,
        cookie: { secure: true }
    })
);

app.use(require('connect-flash')());
app.use(function(req, res, next) {
    res.locals.messages = require('express-messages')(req, res);
    next();
});

app.use(
    expressValidator({
        errorFormatter: function(param, msg, value) {
            var namespace = param.split('.'),
                root = namespace.shift(),
                formParam = root;
            while (namespace.length) {
                formParam += '[' + namespace.shift() + ']';
            }
            return {
                param: formParam,
                msg: msg,
                value: value
            };
        }
    })
);

app.use('/admin/pages', adminPages);
app.use('/', pages);

const port = 3005;
app.listen(port, () => {
    console.log(`App Listening @ localhost:${port}`);
});

add_page.ejs :

<%- include('../_layouts/header') %>

    <form>
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <button> submit </button>
    </form>
    <%- include('../_layouts/footer') %>

heres my both main routes: enter image description here


i've found the answer. when using two main routes you need to specify each route to its static file so we have got this middleware for the regular route as follow :

app.use('/', express.static('public'));

since you have another route for admin/pages this was missing:

app.use('/admin/pages', express.static('public')); 

this fixed the issue :D