Serve static files in express doesn't work in different routes, only in root route

Question

I have make some research about this issue, but all the possible solutions doesn't work for me I don' know why.

I am using page.js and express to develop my little app. When I serve my static files all works fine in my "/" (root) route. But when I navigate to other route, for example "/client-profile/:user_id", it seem like my static files doesn't serve, because my template show me only breaked links, and sometimes doesn't show me anything.

When I use "inspect element" tool in my browser over one image in the "/" route, it shows me for example "/image.jpg", but when I go to other route ("/client-profile/:user_id") with the same image, it shows me "/client-profile/image.jpg"

Here is my code:

server.js (express)

var express = require('express')
var path = require('path')

lisaPosApp.use(express.static(path.join(__dirname, '/public')))

lisaPosApp.get('/client-profile/:user_id', function (req, res) {
  res.render('index', { title : '.: LISA | Usuarios | Loyalty Improvement Service Application :.' })
})

index.js (pagejs)

var page = require('page')
var templateClientProfile = require('./template')
var request = require('superagent')
var header = require('../header-n-left-menu')
var utils = require('../utils')

page('/client-profile/:user_id', utils.loadUserAuth, header, loadClientInfo, function (ctx, next) {
    $('title').html(`.: LISA | ${ctx.user.username} | Loyalty Improvement Service Application :.`)
  var mainContainer = document.getElementById('main-container')

  mainContainer.innerHTML = ''
  mainContainer.appendChild(templateClientProfile(ctx.user))
  document.getElementById('section-preloader').remove()

  $('select').material_select()
  $('ul.tabs').tabs()
})

function loadClientInfo (ctx, next) {
  request
    .get(`/api/client-profile/${ctx.params.user_id}`)
    .end(function (err, res) {
      if (err) return console.log(err)

      ctx.user = res.body
      next()
    })
}

(Note: all my static files, no mattter what type, are in a folder named "public" in the root folder of the project)

In advance, thanks a lot!

Answer 1

When you use express.static('/public') You should put all your static resources in public folder and put relative path in your html page something like this : for index.js file which is in public directory, write

<script src="/index.js"></script>