CODEWITHSUNDEEP
javascriptnode.js
user9347049
user9347049

Reputation: 2045

Not able to load stylesheets or js files with NodeJs

I'm working on NodeJs application.

I created route for admin page also made a layout for it.

app.js

app.engine('.hbs', expressHsb({defaultLayout: 'default', extname: '.hbs'}));
app.set('view engine', '.hbs');

/* configure express */
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '/public')));

/* routes */
const adminRoutes = require('./routes/adminRoutes');

app.use('/admin', adminRoutes);
app.use('/posts', adminRoutes);

My app folder structure looks like this:

enter image description here

Also the admin page has a part for creating posts which is in admin/posts/create route.

adminControllers.js

module.exports = {
    index: (req, res) => {
        res.render('admin/index');
    },

    createPosts: (req, res) => {
        res.render('admin/posts/create');
    }
};

adminRoutes.js

router.route('/')
    .get(adminController.index);

router.route('/posts')
    .get(adminController.getPosts)
    .post(adminController.submitPosts);

    router.route('/posts/create')
    .get(adminController.createPosts);

When I start my app and I go to admin page everything works fine but when I enter create post part that has form my stylesheets and js files can't be reached.

On page there is html structure but no functionalities or style and when I view source code in browser and for example click on link like

 <link href="css/sb-admin-2.min.css" rel="stylesheet">

I get following error:

Cannot GET /admin/posts/css/sb-admin-2.min.css

Like it's searching css folder in post folder and not in public.

Admin layout looks like this:

{{> admin/admin-header }}

<body id="page-top">
  <!-- Page Wrapper -->
  <div id="wrapper">

    <!-- Sidebar -->
    {{> admin/admin-sidebar}}
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar -->
        {{> admin/admin-topNav }}
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">
          {{{body}}}
        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- End of Main Content -->

      <!-- Footer -->
      {{> admin/admin-footer}}
      <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->

Everything works fine for admin page but if I go to link on admin page

<a class="collapse-item" href="/admin/posts/create">Create new Post</a>

It's just not loading as already mentioned stylesheets or js files, like that part of code doesn't belong as body to admin layout.

I am not sure why is this happening any advice highly appreciated.

Upvotes: 2

Views: 79

Answers (1)

some
some

Reputation: 49582

css/sb-admin-2.min.css is a relative link. Change it to /css/sb-admin-2.min.css.

Technically it is still a relative link, since it doesn't include protocol or host, but the important part in this case is that the path is absolute

Upvotes: 2

Related Questions