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!

any path you give shall be relative to public folder not to any specific route — binariedMe, Mar 23 '17 at 14:13

binariedMe · Accepted Answer · 2017-03-23T18:04:38.910

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>

edited Mar 23 '17 at 18:04

answered Mar 23 '17 at 14:46

binariedMe

4,309
1
18
34

after "this" and "write" in your answer you put something?. If so, I can't see it. Thanks for your help – maoooricio Mar 23 '17 at 15:24
I didn't understand you. – binariedMe Mar 23 '17 at 15:28
In your answer you write "your html page something like this : for index.js". In this part of the answer what do you mean with the ":" – maoooricio Mar 23 '17 at 15:41
And, at the end of your answer, you write: " is in public directory, write" I don't understand the word "write", it seems that is incomplete the message, In advance sorry if I wrong – maoooricio Mar 23 '17 at 15:43
Big apology, just noticed the mistake. I don't know why SO filter out the text of HTML earlier. Anyway, I hope it makes sense now – binariedMe Mar 23 '17 at 18:05
1

Now, all have sense. Thanks, I fixed my issue. Thanks a lot! – maoooricio Mar 23 '17 at 19:26

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

1 Answers1