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");
Related
I am trying to connect a pug file to a javascript file using script. However I do not see anything viewed in the console in-spite of the console.log that I have placed there.
The following is the structure of my app.js file.
const app = express();
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
I have placed the pug file under the views directory and js file in the public/js folder.
I am able to render and view the pug file on load but it does not seem to be connected to the js file.
The following is the script tag I have added on my pug file.
.script(type='text/javascript', src='js/game-client.js')
This is the folder structure of my app with public and views being in the root directory
public/js/game-client.js
views/gameroom.pug
Please help me on how to proceed this. Any help is appreciated. Thank you!
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".
I switched my nodejs template engine over to ejs (from jade). When I run my app.js with my ejs template, I receive a series of "Failed to lookup view 'error' in views" logs.
Some of which include:
GET /css/bootstrap.min.css 500 12.588 ms - 1390
Error: Failed to lookup view "error" in views directory
...
GET /css/clean-blog.min.css
Error: Failed to lookup view "error" in views directory
...
GET /js/bootstrap.min.js
Error: Failed to lookup view "error" in views directory
...
GET /js/jquery.js
Error: Failed to lookup view "error" in views directory
Thing is, many of these dependencies are included in the template itself (included via script tags). What is the proper place to get these to work in express? It seems like express ultimately should not be looking for these in the views folder (since they aren't views).
Make sure your Express App has this setup, for the current layout it sounds like you have.
// Require static assets from public folder
app.use(express.static(path.join(__dirname, 'public')));
// Set 'views' directory for any views
// being rendered res.render()
app.set('views', path.join(__dirname, 'views'));
// Set view engine as EJS
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
It is pretty normal for views that are getting rendered by res.render() to be placed in a 'Views' directory at the top level of your app. The express-generator actually uses that view setup. You can change that by modifying the below line
// replace with the directory path below ./
app.set('views', path.join(__dirname, 'views'));
It seems that Express doesn't find your files, so your poor little server want to return an error, but your error file is missing in views directory.
In views directory, you have just to create a file called error.jade.
Then you have to search where Express searches your files yet.
I resolved my issue by using below code.
// Require static assets from public folder
app.use(express.static(path.join(__dirname, 'public')));
// Set view engine as EJS
app.engine('ejs', require('ejs').renderFile);
app.set('view engine', 'ejs');
// Set 'views' directory for any views
// being rendered res.render()
app.set('views', path.join(__dirname, ''));
app.use('/form', express.static(__dirname + '/index.html'));
its worked foe me , in my case:
i need to remove ./views/ from ./views/payment.pug
res.render('payment.pug', { title: 'Hey', message: 'Hello there!'});
this is incorrect:
res.render('./views/payment.pug', { title: 'Hey', message: 'Hello there!'});
^^^^^^
should remove ^^^^^^^^^ and just like first sample
Check file extension
In my case, i use .js instead of .ejs
Remove app.use(expresslayouts). The express-ejs-layouts module is used to avoid duplication of code when there are multiple html pages. In the above code there is only one html page, so express-ejs-layouts is not required.
Once you have started using layouts in your views folder then you can use it. It won't create any problem then else in the starting you can simply avoid using expresslayouts
I fixed mine by adding this:
app.set('views', './src/views');
I had my file with extension .js and I renamed it to .ejs in my view directory which I have set it up in ./src/pages
This question already has an answer here:
nodejs express not to intercept messages for a folder with static content
(1 answer)
Closed 7 years ago.
I have a folder structure for my Node.JS app
/
|-js
|-ajax.js
|-img
|-css
|-views
|-index.html
|-router
|-main.js
|-node_modules
|-server.js
My server.js file looks like
var express=require('express');
var app=express();
require('./router/main')(app);
app.set('views',__dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
var server=app.listen(3000,function() {
console.log("Express is running on port 3000");
});
I am very new to Node and Express. When I try to include a js file within my index.html (inside views), it says the file can't be found. I don't understand why
../js/ajax.js
is unable to be found from my index.html
I think the same issue is happening with my css files.
You need to set your js directory as static.
app.use(express.static('js'));
http://expressjs.com/starter/static-files.html
However I would recommend doing this with your directory structure:
-static
-js
-ajax.js
-img
-css
-views
-router
And then
app.use(express.static('static'));
I am trying to build my first web app using MEAN on Heroku. I followed their guide to getting a sample app running. Then I downloaded the sample app code and altered it to load the login page. Unfortunately, I can't get the my app.js file to load. This is the angular script. In the main directory I have index.js that is running express. Anyways, I am able to get the .ejs .css and img files to load but this script wont. I am stuck. I need to be able to get past this to tinker enough to start learning the stack.
Script is in the public directory with the other files that get loaded. Code looks okay? Don't know why I get 404 on the script.
Any help is much appreciated!
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
// views is directory for all template files
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.get('/', function(request, response) {
response.render('pages/index');
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});
<script src="/js/app.js"></script>
Turns out changes weren't being pushed to the server. That's all folks!
You just need to move app.js to the public folder. This line app.use(express.static(__dirname + '/public')); in your index.js tells express to serve static assets out of the /public folder. Everything else in your project will be "hidden" on the server unless you expose it.
You could create a js folder in public and move app.js there. Then change the reference in index.ejs from src="/app.js" to src="/js/app.js".