CSS seems to be sent to page, but nothing applies [ExpressJS + Handlebars]
up vote
1
down vote
favorite
I am attempting to do a very simple page with Handlebars and Express with NodeJS, however I am running into difficulty getting it to display css. It seems that the browser is receiving the CSS file given the feedback and the 200 code I'm getting in my Node window, but no effect is shown on the actual page.
file structure
app.js
/public
/stylesheets
style.css
/views
/layouts
main.handlebars
home.handlebars
app.js
var express = require('express');
var exphbs = require('express-handlebars');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/', express.static(path.join(__dirname, '/public')));
var person = {
name:"Clay",
age:"20",
attr:["tall","handsome","wearing a red sweater"]
}
app.get('/', function (req, res, next) {
res.render('home', {layout: false, people: person});
});
module.exports = app;
main.handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Database</title>
<link rel="stylesheet" href="stylesheets/style.css" />
</head>
<body>
{{{body}}}
</body>
</html>
home.handlebars
<h1>Example App: Home</h1>
hello world
style.css
body {
background-color: red;
}
node console
javascript node.js express handlebars.js
asked Nov 5 at 1:48
clbx
248
add a comment |
up vote
1
down vote
favorite
I am attempting to do a very simple page with Handlebars and Express with NodeJS, however I am running into difficulty getting it to display css. It seems that the browser is receiving the CSS file given the feedback and the 200 code I'm getting in my Node window, but no effect is shown on the actual page.
file structure
app.js
/public
/stylesheets
style.css
/views
/layouts
main.handlebars
home.handlebars
app.js
var express = require('express');
var exphbs = require('express-handlebars');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/', express.static(path.join(__dirname, '/public')));
var person = {
name:"Clay",
age:"20",
attr:["tall","handsome","wearing a red sweater"]
}
app.get('/', function (req, res, next) {
res.render('home', {layout: false, people: person});
});
module.exports = app;
main.handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Database</title>
<link rel="stylesheet" href="stylesheets/style.css" />
</head>
<body>
{{{body}}}
</body>
</html>
home.handlebars
<h1>Example App: Home</h1>
hello world
style.css
body {
background-color: red;
}
node console
javascript node.js express handlebars.js
asked Nov 5 at 1:48
clbx
248
can you try to change app.use('/', express.static(path.join(__dirname, '/public'))); to app.use('/public',express.static(path.join(__dirname, '/public'))); and see.
– xan_z
Nov 5 at 3:09
does not appear to work @xan_z
– clbx
Nov 5 at 3:32
Okay, also update the HTML template from <link rel="stylesheet" href="stylesheets/style.css" /> to <link rel="/public/stylesheet" href="stylesheets/style.css" />.. this is what I have and it works. I use ejs thou..
– xan_z
Nov 5 at 15:22
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am attempting to do a very simple page with Handlebars and Express with NodeJS, however I am running into difficulty getting it to display css. It seems that the browser is receiving the CSS file given the feedback and the 200 code I'm getting in my Node window, but no effect is shown on the actual page.
file structure
app.js
/public
/stylesheets
style.css
/views
/layouts
main.handlebars
home.handlebars
app.js
var express = require('express');
var exphbs = require('express-handlebars');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/', express.static(path.join(__dirname, '/public')));
var person = {
name:"Clay",
age:"20",
attr:["tall","handsome","wearing a red sweater"]
}
app.get('/', function (req, res, next) {
res.render('home', {layout: false, people: person});
});
module.exports = app;
main.handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Database</title>
<link rel="stylesheet" href="stylesheets/style.css" />
</head>
<body>
{{{body}}}
</body>
</html>
home.handlebars
<h1>Example App: Home</h1>
hello world
style.css
body {
background-color: red;
}
node console
javascript node.js express handlebars.js
asked Nov 5 at 1:48
clbx
248
I am attempting to do a very simple page with Handlebars and Express with NodeJS, however I am running into difficulty getting it to display css. It seems that the browser is receiving the CSS file given the feedback and the 200 code I'm getting in my Node window, but no effect is shown on the actual page.
file structure
app.js
/public
/stylesheets
style.css
/views
/layouts
main.handlebars
home.handlebars
app.js
var express = require('express');
var exphbs = require('express-handlebars');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/', express.static(path.join(__dirname, '/public')));
var person = {
name:"Clay",
age:"20",
attr:["tall","handsome","wearing a red sweater"]
}
app.get('/', function (req, res, next) {
res.render('home', {layout: false, people: person});
});
module.exports = app;
main.handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Database</title>
<link rel="stylesheet" href="stylesheets/style.css" />
</head>
<body>
{{{body}}}
</body>
</html>
home.handlebars
<h1>Example App: Home</h1>
hello world
style.css
body {
background-color: red;
}
node console
javascript node.js express handlebars.js
javascript node.js express handlebars.js
asked Nov 5 at 1:48
clbx
248
asked Nov 5 at 1:48
clbx
248
asked Nov 5 at 1:48
clbx
248
asked Nov 5 at 1:48
clbx
248
asked Nov 5 at 1:48
clbx
248
248
can you try to change app.use('/', express.static(path.join(__dirname, '/public'))); to app.use('/public',express.static(path.join(__dirname, '/public'))); and see.
– xan_z
Nov 5 at 3:09
does not appear to work @xan_z
– clbx
Nov 5 at 3:32
Okay, also update the HTML template from <link rel="stylesheet" href="stylesheets/style.css" /> to <link rel="/public/stylesheet" href="stylesheets/style.css" />.. this is what I have and it works. I use ejs thou..
– xan_z
Nov 5 at 15:22
add a comment |
can you try to change app.use('/', express.static(path.join(__dirname, '/public'))); to app.use('/public',express.static(path.join(__dirname, '/public'))); and see.
– xan_z
Nov 5 at 3:09
does not appear to work @xan_z
– clbx
Nov 5 at 3:32
Okay, also update the HTML template from <link rel="stylesheet" href="stylesheets/style.css" /> to <link rel="/public/stylesheet" href="stylesheets/style.css" />.. this is what I have and it works. I use ejs thou..
– xan_z
Nov 5 at 15:22
can you try to change app.use('/', express.static(path.join(__dirname, '/public'))); to app.use('/public',express.static(path.join(__dirname, '/public'))); and see.
– xan_z
Nov 5 at 3:09
can you try to change app.use('/', express.static(path.join(__dirname, '/public'))); to app.use('/public',express.static(path.join(__dirname, '/public'))); and see.
– xan_z
Nov 5 at 3:09
does not appear to work @xan_z
– clbx
Nov 5 at 3:32
does not appear to work @xan_z
– clbx
Nov 5 at 3:32
Okay, also update the HTML template from <link rel="stylesheet" href="stylesheets/style.css" /> to <link rel="/public/stylesheet" href="stylesheets/style.css" />.. this is what I have and it works. I use ejs thou..
– xan_z
Nov 5 at 15:22
Okay, also update the HTML template from <link rel="stylesheet" href="stylesheets/style.css" /> to <link rel="/public/stylesheet" href="stylesheets/style.css" />.. this is what I have and it works. I use ejs thou..
– xan_z
Nov 5 at 15:22
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53147312%2fcss-seems-to-be-sent-to-page-but-nothing-applies-expressjs-handlebars%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
can you try to change app.use('/', express.static(path.join(__dirname, '/public'))); to app.use('/public',express.static(path.join(__dirname, '/public'))); and see.
– xan_z
Nov 5 at 3:09
does not appear to work @xan_z
– clbx
Nov 5 at 3:32
Okay, also update the HTML template from <link rel="stylesheet" href="stylesheets/style.css" /> to <link rel="/public/stylesheet" href="stylesheets/style.css" />.. this is what I have and it works. I use ejs thou..
– xan_z
Nov 5 at 15:22