I am building out a MEAN app right now that is getting big. I really need to start modularizing the app but right now my Express server is configured to look for Jade views in one folder
app.set('views', path.join(__dirname, '/app/views'));
app.set('view engine', 'jade');
The authors of these posts show the view files scattered about the app in the different module directories.
https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/
http://www.johnpapa.net/angular-app-structuring-guidelines/
If I try to do this now, my Express server will not be able to see them. How can I make it so Express will be able to find all the Jade views?
Two solutions :
You can use a base folder named views and create subfolders inside views.
For example, views/menu/, views/header/. To use this, you have to
declare a basedir in Express so Jade will know where to look your
views, by doing app.locals.basedir = __dirname + "/views";. Then,
in your Jade file, use include /header/a.jade, include
/menu/item1.jade etc...
Use Express App submounting feature. This allows you to modularize
your main app into small apps, which all have their own routes, views
etc... You can watch this nice video tutorial by TJ
Holowaychuk to learn more about this.
Does that help you ?
I just start using module prefixes in my render calls and set my views base directory to be the parent directory of my modules. So if I started with:
app/views/page1.jade
app/views/page2.jade
and was doing res.render("page1"), I reorganize to:
app/module1/page1.jade
app/module2/page2.jade
and I do app.set("views", "app") then render with res.render("module1/page1").
Related
I need to create static layout page in express js using handlebars. Layout will have header (contains username and company logo) and footer (contains copyright info). Hence the layout page should be common for all the pages in the route and only its body content should get change dynamically. I have tried with rendering header and footer as partial view but it displays only in index page and it is not appearing in further pages. Please suggest me to design layout page for express js application
You can easily do it. Just prepare your layout.hbs file and then put {{{body}}} where you want all other parts to be added. Alternatively (I prefer this way) you can use a bit extended version of handlebars with some extras.
You have to download module express-handlebars and require it in your server, then you will need to modify your template engine's config like this:
var expressHbs = require('express-handlebars');
app.engine('.hbs', expressHbs({defaultLayout: 'layout', extname: '.hbs'}));
app.set('view engine', '.hbs');
And then just create folders "layouts" and "partials" inside your view folder. And create your "layout.hbs" inside layouts folder. Now your app will run from layout page. Then just put all the partials together to your layout by using this syntax {{> partialName}}. All other partials you put in your partials folder
I would like to pre-render my Jade files with a Gulp task, so that my views are not rendered on-the-fly. From my understanding, if one is using the Jade view engine with Express 4, this is how the Jade templates become their HTML equivalents (please correct me if I am wrong).
I realize that the views directory is typically pointed to using the statement app.set('views', __dirname + '/views/directory');, where app is an Express app. However, I am not sure how to force Express to serve the pre-rendered HTML files instead.
Any suggestions are appreciated.
I'm writing a single page web application using node.js and express. After going through some online tutorials, I found out this is how express.js serves a client directory with HTML, javascript and css
app.use(express.static(__dirname + '/public'));
This works great except the fact that public directory has to have .html root file which is static. I'd like to know how can I serve a dynamic HTML file with this same approach.
I want to insert some data into the page for example "Hello user_name" at the top. How do I do that for this single file.
I want to only do it once, at the startup, after that my application will make rest API calls and get plain JSON responses which it will then put it in the page.
You cannot use the express static server to serve dynamic files as far as I'm aware. In order to serve a dynamic HTML you need to use a templating engine, such as jade or any of these templating engines.
Jade is pretty straightforward to use and is supported by express by default. To set up jade, include the following lines in your app configuration block:
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
The first line sets your views directory - from which the template files would be served. Since you want to serve only an index file, this directory would contain your index.jade template. The second line sets jade as the templating engine.
Now, instead of using the static server to serve the index.html, you need to create a get route '/' to serve the index file, like so:
app.get('/', function(req, res) {
res.render('index', {user_name: username});
});
I can't find an answer to this, despite it seeming rather useful.
I would like to host a site using node.js to serve compiled jade files instead of html files. Currently, I'm using:
app.get('/', function(req, res) {
app.use(express.static(__dirname));
});
How can I get it to find page.jade when someone types in domain.com/page? And furthermore, could I write links that way in the jade file (so a(href='page') link would link to the aforementioned page)?
Set your path as
app.get('/:pageName')
// more code
// then
res.render(req.params.pageName+'.jade')
req.params will contain the last part in property name pageName
Express has a number of possible options for what it calls a "view engine". In order to have it process jade files and serve them as html you must configure it to do so.
One of the easiest ways to do this, if you are starting fresh, is to simply create your project using the express command as mentioned in their guide. The default views engine is jade and the following command sets stylus as the css processor:
express --css stylus myapp
If, instead, you are configuring your own server you need to configure the views engine:
app.configure(function(){
app.set('views', path.join(staticDir,'views'));
app.set('view engine', 'jade');
... the rest of your setup ...
}
Is there a way to use Chaplin with node.js/express? I haven't found a single tutorial or an example on this subject.
If so, how do I get started? How would the folder structure look like? Or my server.js file?
Chaplin appears to be purely client side. For a basic app your back end could be a static HTML page. It requires no particular server structure.
Backbone, which it's built on, expects a RESTful JSON API to persist its models, but otherwise doesn't require a backend either. If your app has models which need to be saved (likely), then you'll want to look into tutorials for writing a REST API in express (there are many) or for extending Backbone to suit your particular backend needs.
So to get started, your server.js file will look exactly like the one created by the express install script.
There's no de facto best practice for how to structure the folders in an end-to-end javascript app. In my experience I tend to keep client side javascript in its own folder (/client, /app/client, /lib/client, etc), then generate the publicly exposed compressed/concated scripts in a build step. To get started, you might just deposit them in /public/javascripts.
I still don't understand this..
In my express file it says
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
Should I move all my chaplin app files into that views folders or how do I launch them?
Anyway, express seems to use this jade thing but chaplin does not, how does that go?
My problem is to understand where everything goes and why.
Express creates it's own folder structure:
node_modules
public
routes
views
app.js
then again chaplin has it like this:
app
generators
bower.json
config.json
etc.
in that app folder:
assets
controllers
lib
models
views
Now, where do I place all of this chaplin stuff in my node folders? under public or views or where?
And then how do I get this whole thing started? Do I just include all the chaplin .js files in that index file I have in my node.js views folder (jade file)?