maoooricio maoooricio -4 years ago 120
Node.js Question

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

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 Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download