I am learning expressjs and I've been stuck at moment how to make the navigation between pages:
What I've done:
1. Installed express, and converted regular html to jade format.
2. In app.js I've added following code:
app.get('/', function(req, res){
res.render('views/index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('views/portfolio.jade', { title: 'about' });
});
All files I've stored in views folder and in index.jade I've added following code:
a.selected(href='/views/index.jade') TIMELINE
a(href='/views/portfolio.jade') PORTFOLIO
a(href='/views/about_me.jade') ABOUT ME
a(href='/views/store.jade') STORE
When I click on portfolio button, the following error appears:
You need to link href the route path:
a.selected(href='/') TIMELINE
a(href='/about') PORTFOLIO
a(href='/about') ABOUT ME
a(href='/store') STORE
You are actually creating routes, which enable a browser to ask the server for data on a specific path. What the server sends to the browser based on that path is up to the programmer.
In your case, you're internally configuring the /about route to render the file views/portfolio.jade.
Thus, instead of linking to the .jade files like you're doing, you should be linking to the actual routes you created:
a.selected(href='/') TIMELINE
a(href='/portfolio') PORTFOLIO
a(href='/about') ABOUT ME
a(href='/store') STORE
Assuming you have the following routes:
app.get('/', function(req, res){
res.render('views/index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('views/about_me.jade', { title: 'about' });
});
app.get('/store', function(req, res){
res.render('views/store.jade', { title: 'store' });
});
app.get('/portfolio', function(req, res){
res.render('views/portfolio.jade', { title: 'portfolio' });
});
Related
I have a JS File with an Array in it and Im trying to pas that array to html file so i can get elements using it. The issue is that im using node to write the page. Anyone have any ideas? Ive check a few pages but cant seem to find a solution.
{'image1.jpeg','image2.jpeg','image3.jpeg','image4.jpeg'}
to an html file
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
app.use(express.static(__dirname));
});
app.listen(3000);
You will want to look into using templates with express:
Ex using pug:
Template:
html
head
title= title
body
h1= message
Express app:
app.set('view engine', 'pug')
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})
How is the index.html (frontend Angular) getting called exactly?
In the tutorial, it was said that by having one of the following routes in route.js, frontend is getting called
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
});
----------or-------------------
app.get('*', function(req, res) {
res.sendfile('__dirname + '/public/index.html');
});
But even after removing that route, index.html is getting opened (or) If I rename index.html as index1.html at route and html file it is showing error.
Have you created a file index1.html in public folder? If yes, Use
res.sendfile('public/index1.html');
OR
var path = require('path');
res.sendFile(path.join(__dirname, '../public', 'index1.html'));
to render index1.html.
Note : sendfile is deprecated.
I'm using expressjs framework and I want to enable jQuery pjax, everything is coded well, but it's not working in a pjax way yet!
I figured out that when I click on a link from /login to /signup for example: the logger give me this:
GET /signup?_pjax=%23content
GET /signup
It seems that the request is working multiple times!!!
This is the code that I'm using:
// main.js
$(document).pjax('a', '#content');
// app.js
app.get('/login', function(req, res) {
if (req.user) {
return res.redirect('/');
}
res.render('account/login', {
title: 'login page'
});
});
app.get('/signup', function(req, res) {
if (req.user) {
return res.redirect('/');
}
res.render('account/signup', {
title: 'signup page'
});
});
//layout.jade
body#content
block content
//login.jade
extends ../layout
block content
...etc
//signup.jade
extends ../layout
block content
...etc
Can you help me, please?!
I just figured out that i have to send a part of the layout jade, and everything will be nice, for more information see this solution
My project have this following structure.
server.js
/node_modules
/build
vendor.js
main.js
index.html
I'm using express, and AngularJS's ui-router.
In server.js I have this code:
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
And locally it is working if I pass localhost:8080/hellothere, I get the correct page but when I've deployed, it doesn't.
Within the application if use the links to navigate the routes run, the URL is modified to /hellothere, but if I update the page or try to go straight to the absolute URL I get:
Cannot GET /hellothere
I'm already have tryied put:
app.get('/page1', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
app.get('/page2', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
...
And the behavior is the same of '/*'. Fine local, broke on cloud.
Any idea what's happening here?
homolog Website link
And locally it is working if I pass localhost:8080/hellothere, I get
the correct page but when I've deployed, it doesn't.
The possible reason might be after deploying your base url might be domainname.com/appname and your local code is for localhost:portNumber not for localhost:portNumber/appname
So modify your path to
app.get('/appname/hellothere', function(req, res) {
res.send("hellothere is working");
});
instead of
app.get('/hellothere', function(req, res) {
res.send("hellothere is working");
});
To run it locally, now you will need localhost:portNumber/appname/hellothere
I just followed the setup from http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application
This tutorial introduced controllers and services with angular.js for a single-page app..
When I directly visit /pageName, or click the anchor-link for the /pageName route and then press the browser 'Refresh', the page displays:
Error: ENOENT, stat './public/views/index.html'
After reading some answers to similar questions, I changed:
app.get('*', function(req, res) {
res.sendfile('./public/views/index.html');
});
to:
res.sendfile(__dirname + '/public/views/index.html');
..though now the result is Error: ENOENT, stat '/app/app/public/views/index.html'
well, first of all, your file is in ./public/index.html , and you are searching in ./public/views/index.html , try:
res.sendfile('./public/index.html');
if that doesen't work,try this:
app.get('*', function(req, res) {
res.sendfile('index.html', { root: './public' });
});