I am trying to route multiple HTML pages. It loads index.html file, but when I want to load raw.html, it says
Error: Failed to lookup view "error" in views directory
app.js
var routes = require('./routes/index');
var users = require('./routes/users');
var raw = require('./routes/raw');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/raw', raw);
/routes/index.js
var express = require('express');
var router = express.Router();
var path = require('path');
router.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
module.exports = router;
/routes/raw.js
var express = require('express');
var router = express.Router();
var path = require('path');
router.get('/raw', function(req, res) {
res.sendFile(path.join(__dirname + '/public/raw.html'));
});
module.exports = router;
You are configuring express to use the pug (formerly known as jade) template engine.
A template engine enables you to use static template files in your
application. At runtime, the template engine replaces variables in a
template file with actual values, and transforms the template into an
HTML file sent to the client. This approach makes it easier to design
an HTML page.
The error you mention above is because you do not have a template file named error.pug in the views directory. The template engine catches the first error, which is:
Error: ENOENT: no such file or directory,
and then tries to render the error template.
res.sendFile(path.join(__dirname + '/public/index.html'));
The line above in your file routes/index.js will try to send routes/public/index.html and that file do not exists.
You can fix your express configuration using a correct path in your request handlers, i.e:
router.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../public/index.html'));
});
You should also remove the template engine configuration, since you do not seem use it.
You mentioned in the comments that you want to use Angular, so...
You dont need a view engine if you want to use Angular.
When using Angular, the "main" part of your website is located on the clients' side, in the index.html file (this is not 100% correct, just an example).
That part (in the users browser) has JS code (Angular) that sends http request to the server - $http.
The server part basicaly just operates these requests and sends back data to Angular on the clients side, and then you do what ever you want with that data on the clients side.
You can respond to these requests with Node, PHP and etc.
This is similar to the idea behind AJAX, when only small parts of the page are changed without reloading the whole page.
On the other hand, if you are using view-engines, when the server gets a request, for example:
app.get('/',.routes.views.home);
The server renders an entire html page and sends it to the client, as it works with PHP.
Related
We have app.js running on server and index.html on the server where app.js is located. app.js code is as below.
var express = require('express');
var engine = require('consolidate');
var app = express();
app.set('views', __dirname);
app.engine('html', engine.mustache);
app.set('view engine', 'html');
app.use(express.static('.'));
app.get('/', function(req, res) {
console.log("Got request for index.html");
res.render('index.html');
});
app.listen(5000, '0.0.0.0');
From our mobile app (java code), we are hitting the server with GET request and we are sending encrypted user data as one of the headers for that GET request. Once our app.js receives the request, it will serve index.html file. Is there any way we can read the encrypted data in index.html by using javascript. I have gone through some stack overflow questions as below but not able to find the solution.
Accessing the web page's HTTP Headers in JavaScript
Get index.html response headers
Hi i am starting a project of nodejs app with angular7. This is my mail server.js file in nodejs
var express = require('express');
var mysql = require('mysql');
var bodyParser = require('body-parser')
var cookieParser = require('cookie-parser');
var router = express.Router();
var app = express();
app.use(cookieParser());
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
app.set('view engine', 'pug');
app.set('views', __dirname + '/app/views');
app.use(express.static(__dirname + '/public'));
app.use('/', express.static(__dirname + '/angular/src'));
require('./app/routes')(router);
app.use(router);
app.listen(2233, function(){
console.log('app started on 2233');
});
This line app.use('/', express.static(__dirname + '/angular/src')); indicates that i want to render src folder inside angular folder on nodejs app load but this is rendering blank screen. When i run ng build and change it to app.use('/', express.static(__dirname + '/angular/dist')); then start working.
All the tutorial showing to run ng build and run angular inside node but why can i use src folder inside nodejs.
src folder is used during development. They are actual source files which has your programs in readable format.
dist is generated when you do ng build, it will have all your src files, assets and your node modules combined and minified into a small package.
So, there is no point of having src in your deployment
Updated:
When you are in development as you said for every small change minfying the code and building whole code again takes lot of time. So, when we do ng serve it will just convert files to js but no minification or other things will happen.
Why src will not work if you copy it for deployment is, src contains .ts files if you are using latest Angular and you have to transpile it to JS with some modifications required in order for it to be understandable by browser.
I'm using Nodejs and Express to create a dynamic webpage.
I have a home.ejs file that has this iframe:
<iframe id="newstable" src="/news_tables/2018-08-04.html" height="1000" width="100%"></iframe>
My folder directory is:
News_Aggregator (includes app.js)
News_Aggregator/news_tables (includes a bunch of html files, e.g. `2018-08-04.html`)
News_Aggregator/views (includes my `home.ejs` file)
And my app.js:
const express = require('express');
const app = express();
app.set("view engine", "ejs");
app.get('/', function(req, res){
res.render('home.ejs');
});
app.listen(8000, () => {
console.log('Example app listening on port 8000!')
});
However, when home.ejs is rendered, my iframe doesn't load the html page:
This works in "normal" HTML. What am I missing to get the .ejs file to find this and render correctly?
You get the error because the server dosen't know where to get the files from.
First You must define where the static .ejs files will be. Lets say something like this. if your files are in a public folder(ejs,css etc) and you will get them from there. Setup both with:
app.use(express.static(__dirname + '/public'))
app.set('views', path.join(__dirname, '/public'));
from here you can just in your response if you have a home.ejs file
res.render('home', {});
You should look over Express static() from here and learn how to serve files
The fact your HTML is generated from a .ejs file is irrelevant.
Your HTML says the browser should ask the server for the URL /news_tables/2018-08-04.html.
Your HTTP server has a route app.get('/', and no other routes.
Your HTTP server doesn't know about the URL /news_tables/2018-08-04.html, so it returns a 404 Not Found.
You need to write code which will serve up all the URLs you want it to.
You should probably look at the Express static() middleware if you want to serve static files.
The only thing that works is removing ".html" from address "localhost:3000/index.html".
Can someone help me out? I am trying to connect my HTML page to the router, so that when I go to a certain link, I can render a certain HTML page. Right now, I am just trying to send something and nothing works. Here is a screenshot of my work:
My ultimate goal is to render movie_info.html.
Thanks in advance!
you don't have to render html pages. You can simply open html as static file.
var express = require('express');
var server = express(); // better instead
server.use('/', express.static(__dirname + '/your_html_page_folder'));
server.listen(3000);
You can also do this with ejs templates. first you have to install ejs
npm i ejs
then create a views folder in your main folder.In that folder save your file with .ejs extension.In your case movie_info.ejs
in movie_info.js do the following:
const express = require('express')
const app = express();
// setting ejs as templating engine
app.set('view engine', 'ejs');
app.get('/test', function(req, res, next) {
res.render('movie_info');
});
app.listen(3000)
this will render your page.
Following is a small server (app.js) which is is simply calling index.jade file to add jquery.js, underscore.js and backbone.js for later use. But its not working.
My directory structure is:
base
app.js
public
jquery.js
underscore.js
backbone.js
theapp.js
views
index.jade
My app.js file is:
var express= require("express"),
http = require("http"),
path = require("path");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.get("/", function(req, res){
res.render("views/index.jade");
});
app.listen(3000);
My index.jade file is:
#main
script(src= "jquery.js")
script(src= "underscore.js")
script(src= "backbone.js")
script(src= "theapp.js")
When I run localhost:3000 in the browser, it says: Error: Failed to lookup view "views/index.jade"
(Localhost is working fine with another node.js program)
Please help. Thanks a lot!
Dont include the .jade
res.render("views/index");
Assuming your view engine is already setup to use Jade. (app.set('view engine', 'jade');)
You also probably dont need to specify the "views" folder, check for the line
app.set('views', path.join(__dirname, 'views'));
in your app.js - this is the root directory for your views, so you'll only need:
res.render("index");