I have this node.js project, it uses jade template. But I need to use simple html pages. Guideline needed for safe transformation.
I need to use complete .html pages like index.html, login.html. Without any template engine to show at routes like localhost:3000 and localhost:3000/login.html. Which should work with full functionality.
You can change it in config/express.js:
app.set('view engine', 'jade')
For example, if you want to use Handlebars, then remove "jade": "latest", in packages.json and add "handlebars": "latest". Then run npm install and edit config/express.js:
app.set('view engine', 'handlebars')
Express server static html files by default.
Place your html files in /public folder:
...
/public
index.html
login.html
...
and go localhost:3000/ or localhost:3000/login.html
but this is static files and then the application logic should be on the front-end. For example using angular or backbone.
app.get('/any_location', function(req, res){
res.sendFile('Location_to_htmlFile');
})
Related
I add static CSS,
and this file exists in source code of the page,
but CSS not applied...
In console wrote "blocking CSS because MIMO type does not define correctly"
In link tag type='text/css' exist.
Ask is how I can define 'Content-type' in express automatically?
You can create public folder and add all the client side files.
In your server side you must use it :
app.use(express.static(path.join(__dirname, 'public')));
with path module :
npm install path
I had the same issue yesterday and solved it.
So first node uses folder path to get files.
That means that if you're at http://localhost:3000/ you are at the root of your directory. also you can access your stylesheet via http://localhost:3000/public/css/style.css.
But, you can modify the path using routes and express.static().
You may have an url which is http://localhost:3000/user/index. So he is seeking for the css file such as http://localhost:3000/user/public/css/style.css which does not exist.
the solution might be to use different route files like this :
app.use('/', indexRouter);
app.use('/users', usersRouter);
I am trying to wrap my html in a nodejs express app (latest version of express). I try using res.sendFile to send my "index.html" file. I am running into an issue where there are a lot of 404s when loading the page in a browser because it can't find any of my js or css files. My js files are in the bower_components directory, some are in "js" directory. My css files are in a "css" directory.
Path for one is:
/bower_components/jquery/dist/jquery.min.js
What is the best way to update in my server.js file and my index.html file so that it can find all the "css" and "js" files?
You can use the directive express.static
var server = express();
server.use(express.static(path.join(__dirname, 'static')));
It will look for a static folder to serve your static files. Just put your css and js files in this folder and reference them in the <head> part of your templates (index.html in your case)
If you have this two line of code in your app.js file:
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
Then you need to put your HTML files in view folder.
I myself use ejs (templator) for render HTML files and more ,by adding this line of code to my app.js :
app.set('view engine', 'ejs');
Then by changing your extention of HTML fils to .ejs you can render them with this code :
res.render('file_name');
More info
For example if you have a css file in /public/css/style.css you have to link to it in your html with this address : ./css/style.css or something like this.
Locally, my node.js with express app works as expected. When I push to Heroku, the app is able to load some stylesheets and javascripts, but not others. Here is the relevant snippet from app.js:
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
Here are the assets that I'm loading from my jade templates:
link(href='/stylesheets/style.css', rel='stylesheet')
link(href='/lib/bootstrap/docs/assets/css/bootstrap.css', rel='stylesheet')
link(href='/lib/bootstrap/docs/assets/css/bootstrap-responsive.css', rel='stylesheet')
script(src='/lib/jquery/jquery-1.7.2.js')
script(src='/lib/bootstrap/docs/assets/js/bootstrap-collapse.js')
Everything works locally, but when I push to Heroku, the style.css file and the jquery file are loaded fine. The bootstrap files return a 404.
I'm baffled why this would work locally but would break, and in parts, on Heroku.
Check that the files are really present
Check if your static files are being served by node or the web server e.g. nginx. It is possible the web server is misconfigured to serve static files and is not looking in /lib/bootstrap/
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'm trying to use Ember in a Node + Express based project. I put client code under public/javascript and serve it using the index.jade file that we have by default in every express project. I need to use handlebars template for my client views but I can't figure out how to do this. Where should I put my template files and how the node server will compile and serve them ? Thanks!
I like to use this library for the Handlebars templating with node.js + express.
https://github.com/donpark/hbs
Here are the steps to start using Handlebars in your node + express setup
Install the hbs npm module with
npm install hbs --save
Import the module and change the view engine to use hbs.
var hbs = require('hbs')
app.set('view engine', 'hbs');
(Optional) To use partials, you ll need to register partials.
hbs.registerPartials(__dirname + '/views/partials');
The files should be in the views folder with an extension of .hbs. You can change this if need be.
app.set('views', path.join(__dirname, '<your_folder_name>'));
Check here more for partial naming conventions https://github.com/donpark/hbs