Within my "views" folder, i have another folder inside called "partials" that has other html files i'd like to render.
I thought it'd be self explanatory but searching through google I can't find the answer to this, but I'd like to render a file within the subdirectory as well.
I'm sure the answer is rather simple but I can't seem to find it..
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
var router = express.Router();
//This Works
router.get('/', function(req, res, next) {
res.render('index');
});
//This Works
router.get('/about', function(req, res, next) {
res.render('about');
});
//This Does NOT Work, How do I get this to work?
router.get('/partials/navbar', function(req, res, next) {
res.render('/partials/navbar');
});
Maybe just remove the first / from res.render('/partials/navbar')
Related
app.js
app.engine('.hbs', expressHbs({
defaultLayout: 'layout',
extname: '.hbs',
layoutsDir:'views/layouts',
partialsDir:'views/partials'
}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', '.hbs');
app.use(express.static(path.join(__dirname, 'public')));
it work correctly in this route [admin.js]
router.get('/', function(req, res, next){
res.render('admin/admin', {title: 'Admin'});
});
});
//will render http://localhost:3000/admin
however, when i add new route in [admin.js]
router.get('/insert-scene', function(req, res, next){
res.render('admin/insert-scene', {title: 'Insert Scene'});
});
//will render http://localhost:3000/admin/insert-scene
example:
<link href="./stylesheets/site.css" rel="stylesheet">
http://localhost:3000/public/stylesheets/site.css[work][/admin]
http://localhost:3000/admin/stylesheets/site.css[wrong path][/admin/insert-scene]
public folder not work in this route so hbs view just render /admin/.... in my ref source. How to solve this problem?
Do not serve static files with node, while node can handle it, it's not the intended use case of the technology.
Use a specific web server for that like nginx or a CDN.
If I path to a view in ./views express will render it but it doesn't that for example ./views/api/login.jade and it send 500: Internal Server Error.
my codes:
/* GET api/... */
router.get('/login', function(req, res, next) {
res.render('api/login.jade', { title: 'Login' });
});
Thanks
You have to set the views path as well.
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
router.get('/login', function(req, res, next) {
res.render('api/login', { title: 'Login' });
});
step 1: you have to make sure you are using jade as the view engine.
app.set('view engine', 'jade');
step 2: set view path
app.set('views', __dirname);
or you can write it in every render call, res.render(__dirname+'api/login')
Step 3: do not write extension names
router.get('/login', function(req, res, next) {
res.render('api/login', { title: 'Login' });
});
P.S.
i recommend that you start using pug instead of jade since pug is jade 2.0
I study the MEAN conceptions by this video course by Joe Eames.
This course interesting because teach how to use JADE templates as partials instead of HTML.
\bin
\node_modules
\public
\app
\main
someCntr.js
otherCntr.js
main.js
\server
\views
\partials
main.jade
featured-courses.jade
new-courses.jade
And all was going well until he moved this jade templates from \views\includes to \public\app\main and \public\app\courses in his Express 3.4. This trick does not work in my Express 4
his server.js file before
app.set('views', path.join(__dirname, '/server/views'));
app.set('view engine', 'jade');
app.get('/partials/:partialPath', function(req, res) {
res.render('partials/' + req.params.partialPath);
});
and after moving
app.set('views', path.join(__dirname, '/server/views'));
app.set('view engine', 'jade');
app.get('/partials/*', function(req, res) {
res.render('public/app/' + req.params);
});
You have to update jade to it's latest version:
http://expressjs.com/guide/migrating-4.html
I'm studying this course too, and I come to same problem...
The solution is to use req.params[0]. In server.js file the route to partials views like this:
insted of
app.get('/partials/*', function(req, res) {
res.render('public/app/' + req.params);
});
write:
app.get('/partials/*', function(req, res) {
res.render('../../public/app/' + req.params[0]);
});
I am a bit confused on how to deal with the Backbone hashes and pushState.
Basically I want
localhost:3004/#/explore
to be
localhost:3004/explore
and
localhost:3004/#/profile/123456
to be
localhost:3004/profile/123456
The first thing was specify all my static directories, which seems to work, since i could access all the files directly via the browser.
app.configure(function(){
app.use("/js", express.static( path.join(__dirname, 'www/js')));
app.use("/assets", express.static( path.join(__dirname, 'www/assets')));
app.use("/style", express.static( path.join(__dirname, 'www/style')));
app.use("/templates", express.static( path.join(__dirname, 'www/templates')));
app.use("/config", express.static( path.join(__dirname, 'www/config')));
app.use(express.favicon());
app.use(express.logger());
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use(express.session({
secret: 'adasdasdasdasdasdasdasdasdasdasd'
}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.methodOverride());
app.use(allowCrossDomain);
app.use(app.router);
app.use(express.static(clientDir));
});
This seems to work since I could now navigate to any file from the location bar.
I'm also set up to use pushState
Backbone.history.start({pushState: true});
Where I am confused is in capturing the initial page call and making sure it hits index.html. However it also needs to pass in the directories so BackBones router knows where to go.
A couple unsuccessful attempts include:
app.get("*", function(req, res) {
fs.createReadStream(path.join(clientDir, 'index.html')).pipe(res);
});
another
app.get("*", function(req, res) {
res.redirect('http://localhost:3004#/'+req.url);
});
another
app.get('/', function(req, res){
res.sendfile(path.join(clientDir, 'index.html'));
});
any ideas would be helpful.
I am open to other methods, such as htaccess, etc., although not sure how that would work with heroku deployments.
Looks like this works for me.
app.get('/*', function(req, res){
res.sendfile(path.join(clientDir, 'index.html'));
});
Instead of checking in every controller I want to use app.all('*') to check if the user is authenticated and it already works quite well. If the user is logged in I'm just calling next() and if he's not I'm calling another route to display the login page.
So far so good, but it seems that rendering from that middleware callback function somehow messes up my paths, for example the stylesheet doesn't work and when I click on it in the page source I again land on the index page.
To sum it up, this works and displays my styles:
app.get('/', function (req, res) {
res.render('index', { title: 'Account Page' });
});
while this does work partially, it only displayes the HTML without the styles from the stylesheet:
app.all('*', function (req, res) {
app.set('loggedIn', controller.security.authenticationAction(req));
if (app.get('loggedIn')) next(); // go on with '/' route
else res.render('index', { title: 'Index Page' });
});
This also displays the same HTML page (with another title though) just without the styles.
This is my default config in the app.js:
app.all('*', function (req, res) { ... });
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.cookieParser('keykeykey'));
Help!
Your stylesheets are (probably) served by express.static, which is declared after your app.all() route (with Express, whenever you first declare a route, the router middleware is inserted into the middleware chain there-and-then; in fact, using app.use(app.router) is useless most of the time, because Express has already inserted it behind the scenes).
Because requests are processed by middleware in order of their declaration, your app.all gets to handle the requests for static resources as well. Try moving the static middleware to before your app.all:
app.use(express.static(path.join(__dirname, 'public')));
app.all('*', function (req, res) { ... });
By the way, express.favicon() would probably give similar issues, and if you want to use any of the services provided by express.bodyParser or express.cookieParser etc., the same applies again).