Template engine styles render not working

28 Views Asked by At

CSS Not rendering:

CSS rendering in single level path like /, /users etc... CSS not rendering inside /admin/add-user.

My Folder structure:

Please here to view image

index.js:

const express = require('express');
const http = require('http');
const index = express();
const path = require('path');
const dirPath = require('./utils/dirPath');

index.set('view engine', 'ejs');
index.set('views', 'views');
index.use(express.urlencoded({ extended: false }));

index.use(express.static(path.join(dirPath, 'public')));

const home = require('./routes/home');
const get404 = require('./routes/404');
const usersList = require('./routes/usersList');
const addUser = require('./routes/addUser');

index.use('/admin', addUser);
index.use('/', usersList);
index.use('/', home);
index.use(get404);

const server = http.createServer(index);
server.listen(5000);

addUser.ejs:

<%- include("includes/header.ejs")%>
    <%- include("includes/navigation.ejs")%>
<body>
    
    <main>
        <article>
            <form action="/add-user" method="post">
                <input type="text" name="username">
                <input type="submit" value="Submit">
            </form>
        </article>
    </main>
</body>
<%- include("includes/footer.ejs")%>

header.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home page</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
0

There are 0 best solutions below