New to node, and have it running pulling in an HTML page using Express and EJS
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
//load up index file
app.get('/', function(req, res){
res.render('index.html');
});
However the HTML includes some relative path JS scripts
<html>
....more...
<script src="js/libs/jquery.js"></script>
<script src="js/libs/underscore.js"></script>
<script src="js/libs/backbone.js"></script>
If i run my HTML page via my original "localhost/myProject" it all works fine. However if i launch my file via Node which is set to "localhost:8080"
app.server.listen(8080);
Then it no longer finds the "/js" directory. Is there some sort of configuration that I am missing, or should i go about this another way?
Update:
Just found this
app.use(express.static( __dirname + '/public' ));
might be what I am looking for, although i need to do some refactoring
you should configure express to server static files, for example, put all the static files under a directory called 'public'
app.configure(function () {
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use('/public', express.static(__dirname + '/public'));
app.use(app.router);
});
then in your html:
<script src="/public/js/libs/jquery.js"></script>
Related
Using a MEAN environment (Express 4) and EJS as a template engine, I am struggling with a path issue.
Root path of my project: /Users/admin/projectX/
path of pages (.ejs format): /Users/admin/projectX/views/pages
path of partials(.ejs format): /Users/admin/projectX/views/partials
Code samples:
app.set('view engine', 'ejs'); //using ejs as template engine instead of jade
app.set('views', __dirname + '/views'); //defining absolute path of views folder
//sample route for calling index.ejs
app.route('/')
.get(function(req, res) {
res.render('/pages/index'); //index.ejs is located in the pages folder (full path see list above)
});
For some reason I keep getting this error:
Error: Failed to lookup view "/pages/index" in views directory "/Users/admin/projectX/views"
IMHO the path should correctly add up to /Users/admin/projectX/views/pages/index, so why can't it be found?!
I have folder structure like
--project
----public
------flowplayer
----views
I want to access files inside js folder from the ejs file inside views. I tried like this but did not work
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
From EJS I am accessing file like this
<script type="text/javascript" src="../public/flowplayer/flowplayer-3.2.13.min.js"></script>
But I am getting error like
http://localhost:3000/connect/125468/test/48B1527B237BB/flowplayer/flowplayer-3.2.13.min.js
Thanks
I was able to solve this by giving the path for the required js file in ejs as '/flowplayer/flowplayer-3.2.13.min.js' instead of '../public/flowplayer/flowplayer-3.2.13.min.js'
I have created a simple static page in nodejs using the default express library.
However, when I run it, nodejs is unable to pick up the public files and throws 404 on them.
I believe that the paths that I have given are correct. This is driving me mad. I knoww the problem has to be so tiny and simple to be face-palm worthy but I am unable to find it.
Can you please help me here.
The code is on github at
Rishavs/ComingSoonPage
Thanks for your time and help.
~ Rishav
In your app.js, mount the static files earlier, like so:
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, '/public')));
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
});
Edit: Note the in /public VS public
Like markt mentioned. Your html should not be referencing "public".
<link href="../../styles/site.css" rel="stylesheet" />
vs.
<link href="../../public/styles/site.css" rel="stylesheet" />
In my case it was necessary to specify sub directories, as well as the main "public" static directory, eg:
app.use(express.static(path.join(__dirname, 'public')));
app.use('/public/uploads', express.static(path.join(__dirname, '/public/uploads')));
Also after playing around I found that it made no difference whether the "public" static directory was declared as "/public" or "public" (with or without leading slash).
However it did make a difference if I missed the leading slash from the sub directories, ie this gave me 404:
app.use('public/uploads', express.static(path.join(__dirname, 'public/uploads')));
but this worked ok:
app.use('/public/uploads', express.static(path.join(__dirname, '/public/uploads')));
And of course the old chestnut of making sure permissions are correctly set on the directory!
I am using express 2.5.8 I was able to access public like this:
app.use(express.static(__dirname + '/public'));
Then I noticed that when I have something like this in my layout:
<link rel="stylesheet" type="text/css" href="style.css">
It wasn't serving my style.css as expected, it was expecting me to do something like
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
added the following to my app.js file solved it for me:
app.use(express.static(__dirname + '/public/stylesheets'));
app.use(express.static(__dirname + '/public/javascripts'));
Everything looked like so:
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'handlebars');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/public/stylesheets'));
app.use(express.static(__dirname + '/public/javascripts'));
});
The express.static method does not include subfolders recursively. Your scripts and styles are under public/javascripts and public/stylesheets respectively. You have to let express know those folders contain static files that should be served directly, like so:
app.configure(function(){
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('public/javascripts', express.static(path.join(__dirname, 'public/javascripts')));
app.use('public/stylesheets', express.static(path.join(__dirname, 'public/stylesheets')));
});
The last two lines are the important ones. Note that there are two arguments passed to the app.use method. The first one tells what is the path where the script will be served (a.k.a. what you'd have to type in the browser to get it). The second one is the physical location of the file on the server.
I have a directory like this
/Workspace
/app
app.js
/lib
/public
/styles
*.css
/scripts
*.js
/views
*.jade
from app.js in app, I have the following code:
libPath = __dirname + '/../lib'
... express stuff ...
app.configure(function() {
app.set('view', libPath + '/views')
... express stuff ...
app.use(express.static(libPath + '/public'))
... rest of the app ...
Now, the problem is that Jade can't find any of the views, but all the static assets are found. Thus, app.set('view') isn't working, but express.static is. If I copy the views directory to app, using __dirname + '/views' works fine. Anyone know why this is happening?
doing app.get('view'), I get a directory like this: /Users/jong/Workspace/app/../lib/views. I tried doing the absolute route /Users/jong/Workspace/lib/views as well to no avail. It's just weird that this directory works for static assets but not templates.
You have a mistype, the correct option name is views, not view.
Configure your application like
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.set('view options', { layout: true });
But the main root of issue is that you seem to misunderstand how express (and the MVC at all) works.
express sends out the static data to the browser, using your express.static configure directive, once the request url matches the existing static file path.
Otherwise, it tries to find any defined route for the requested path and to execute the associated controller (which may or may not use the template engine in turn).
So, in order to show e.g. the index page (even if it has no parameters), given you have an index.js in your views folder, you have to do something like
app.get('/', function (req, res, next) {
res.render('index', {});
});
I have a nodejs app and am using expressjs. I've defined my static directory, but when I access it, it doesn't load. My express config is:
var app = express.createServer().listen(8001);
app.configure(function(){
app.use(express.methodOverride());
app.use(express.bodyParser());
app.use(app.router);
app.use('/public', express.static(__dirname + '/public'));
app.use(express.cookieParser());
app.use(express.session({ secret: "appsession" }));
app.use(express.errorHandler({showStack: true, dumpExceptions: true}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
});
Inside my /public directory I have 3 folders, css, js, and img. Inside css I have a style.css. When I try to access it directly via http://localhost:8001/public/css/style.css I get: Cannot GET /public/css/style.css
Any ideas what I could be doing wrong?
Thanks!
EDIT:
It seems to be related to how I have my routes setup. I'm doing it like this:
var routes = require('./routes')(db);
pp.get('/', routes.index);
Then in my index.js file, I have:
module.exports = function(db) {
return {
index: function(req, res, next) {
res.render('index');
}
}
}
I have my error handling enabled, but when I use the routing in this way, it doesn't use expresses error handling, however if I take this out, it does.
You setup the static http middleware as follows:
app.use(express.static(__dirname + '/public'));
And retrieve a file in ./public/css/style.css with the url:
"/css/style.css"
public is not part of the path when you actually request the file.
Change your static handler to this:
app.use('/public/css', express.static(__dirname + '/public/css'));
Then http://localhost:8001/public/css/style.css should get what you want
Full sample app that allows curl http://localhost:8001/public/css/style.css:
app.js
|-public
|-css
|-style.css
var express = require("express"),
app = express.createServer();
app.use('/public/css', express.static(__dirname + '/public/css'));
app.listen(8001);
Was running into the same issue found the answer here
https://github.com/senchalabs/connect/issues/298
When you have try to use nested files it kinda get lost,
it says fixed on the tracker a year ago, however i tried today and worked fine
I figured it out.
I have two services running on my host. Django is running the site at the root: http://myURL.com, and then Node is running at http://myURL.com/node
The configuration is fine with all the files in Node. The index.html file is requested fine, but the index.html when it requests the stylesheets and static files, the request gets caught by Django before it makes it to Node. Django saw the file and had no idea what it is and returned the 404 error.
By disabling Django from catching the requests to those files it all works fine.