Express routing issue - javascript

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

Variable in JS File to HTML File

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!' })
})

Scotch-io/node-todo app

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.

jQuery pjax is not working on Express

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

ExpressJS cannot get /route in Openshift, but locally it is working

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

How do I handle Page Refresh with Angular.js?

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' });
});

Categories