Don
Don

Reputation: 531

Searching for public folder in routes path

Whenever a different route is visited other than the root, express is not able to find the public folder containing all the stylesheets and javascript files, instead it searches for the assets inside the route path. Any help would be appreciated.

error when visiting http://localhost:3000/users/login/ gives -

GET /users/login/stylesheets/bootstrap.css 404 14.872 ms - 10418
GET /users/login/stylesheets/style.css 404 7.134 ms - 10418
GET /users/login/javascripts/bootstrap.js 404 57.890 ms - 10418
GET /users/login/javascripts/bootstrap.js 404 5.326 ms - 10418

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();

// extra modules
var hbs = require('hbs');
var defaultLogger = require('express-logger');

var index = require('./routes/index');
var users = require('./routes/users');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.set('view options', {layout: './layouts/application'});
hbs.registerPartials(__dirname + '/views/layouts/partials');

app.use(express.static(path.join(__dirname, 'public')));
app.use(defaultLogger({path: "log/development.log"})); //logger
app.use(favicon(path.join(__dirname, 'public', 'bulb.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

uses.js

var express = require('express');
var router = express.Router();
var userService = require('../services/users')

/* GET users listing. */
router.get('/', function(req, res, next) {
  userService.all(function(users){
    res.render('users/dummy')
  })
});

// GET login form
router.get('/login', function(req, res, next){
  res.render('users/login', {title: 'Login'});
});

module.exports = router;

Upvotes: 0

Views: 862

Answers (2)

chungvh
chungvh

Reputation: 46

I guess your path now in this format: <link href="stylesheets/bootstrap.css">

You should always contain / at the start of the path. This will help you to load the correct path. <link href="/stylesheets/bootstrap.css">

Upvotes: 2

ponury-kostek
ponury-kostek

Reputation: 8070

Use absolute paths when requiring js and css files /javascripts/bootstrap.js and /stylesheets/bootstrap.css

Upvotes: 1

Related Questions