Introduction

Now that Oracle JET is released, you may look for simple way to start playing with the framework, not only on the UI side but also using some mock-up REST APIs and probably build something more realistic. In this article I would like to show you a simple way to use Oracle JET in NodeJS with the ExpressJS framework.

Main Article

This article will be a step by step tutorial of how to setup NodeJS project with ExpressJS and include and use Oracle JET inside. Lucky there is a very small amount of custom code you need to write to make that possible. Let get started!

First you need to install NodeJS, if you haven’t done so already. I personally do this locally only over the NVM (Node Version Manager), as I had to run several versions of node at the same time for different projects. If you use Mac or Linux than this tool provides you really great NodeJS version management capabilities. For the Windows users there is an alternative solution, here is the NVM link from GitHub:

https://github.com/creationix/nvm

For the purpose of this example I used NodeJS v0.12.7 but you could use newer version, it should work without problems. So here the steps:

– Install NVM: follow the installation instructions from the official side: https://github.com/creationix/nvm

– Install NodeJS: you can use now NVM to do so, or you can just go the NodeJS page and download and install from there

– Install ExpressJS: this is a small Node Web Framework and probably one of the most popular for Node, and I will use it for this example

– Generate ExpressJS Project: the Express JS framework delivers also generator which you will use to generate the project structures. To install the generator use following command:

$ npm install express-generator -g

Generate Node Express JS project using following:

$ express oraclejetwithnodejs

The default project structure should look now like this:

Add Oracle JET into the ExpressJS project. To do so download first JET form the official Oracle page: http://www.oracle.com/webfolder/technetwork/jet/index.html

For my example I use the <strong>basic starter template</strong> project. You can download it from the Oracle JET download page:
<strong>http://www.oracle.com/technetwork/developer-tools/jet/downloads/index.htm</strong>

Unzipped and get the entire structure and copy it under the public folder form the NodeJS project, your project structure now should look like this:

In my case I just copy the static JET resources inside the public folder. You could also create sub folder and put the Oracle JET inside.

Notice that I did not copy the template folder with the html resources from the Quickstart JET template project. We will do this in the next step.

Now that we have all Oracle JET resources we need in the public folder, as next we have to copy the /template folder somewhere from the Quickstart project and the index.html file. However the template loading will be handle it in different way then the static content files in the public folder. The HTML partials templates will be loaded using an AJAX call. From here you have basically two possibilities to achieve this, you either use the /public folder again, or you use partials. Following describes the both methods.

Option #1 Use the static /public folder

You can put the /template folder and the index.html file from the JET Quickstart project inside the /public folder and serve it from there. This is the easy way, you only have to change the default ExpressJS project in two places, as the default ExpressJS project comes with Jade template engine configured, you have to remove it:

On line 15 from the app.js file, remove the view engine line:

app.set(‘view engine’, ‘jade’);

On line 9 from the app.js file, remove the users router, we do not need it anymore:

var users = require(‘./routes/users’);

Inside the /routers folder open the index.js file and change the code to this:

var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
    //res.sendFile('index.html', {root: './views/'});
    res.sendFile('index.html', {root: './public/'});
});

module.exports = router;

Remove form the /router folder the user.js file, we don’t need it anymore. Also form the /views folder you can remove now all jade templates.

If you start your node project now (npm start) you should be able to see everything loading properly.

Option #2 Using partials

This approach requires just a few lines of code, however it gives you more control over the templates. For example you can additionally secure specific templates if required, or depending on parameters execute specific code on server side before loading templates. You do have also the potential if required in some cases to generate specific HTML on server side and transfer only HTML to the client on the partial call. Overall it gives you more possibilities, as only serving the templates as static content.

To be able to use partials loading we will create simple partial.js code into the /routes folder. Here is the example code:

module.exports = function (basepath) {
    return {
        process: function (req, res) {
            res.sendFile('templates/' + req.params.name, {root: basepath + '/views/'});
        }
    };
}

This module basically tells the express router that within the /views folder there is another folder called /templates which contains the partial file that the AJAX call wants to load. Now we can initialize the module in the app.js file:

var loadPartials = require('./routes/partials.js');
var partials = loadPartials(__dirname);

// load the templaces using the partials
app.get('/templates/:name', partials.process);

Copy now the template folder under the /views folder and star the NodeJS server. You should be able to load the templates now as partials. Your folder structure now should look like this:

All content listed on this page is the property of Oracle Corp. Redistribution not allowed without written permission