Using Global Assets¶

Summary¶

This example shows how to configure and use global assets in Mojito applications. In this example, the HTMLFrameMojit inserts global assets into the rendered view. See Adding CSS for an example that uses mojit-level assets.

The following topics will be covered:

• configuring your application to insert global assets into the view
• creating and storing your global assets
• static URLs to global assets

Implementation Notes¶

global_assets/
├── application.json
├── assets
│   ├── favicon.ico
│   ├── ohhai.css
│   └── sadwalrus.jpeg
├── mojits
│   └── OhHai
│       ├── binders
│       │   └── index.js
│       ├── controller.server.js
│       ├── models
│       │   └── foo.server.js
│       └── views
│           └── index.hb.html
├── package.json
├── routes.json (deprecated)

<div id="" class="lolrus">
  <img src="/static/global_assets/assets/sadwalrus.jpeg" alt="walrus smile fail" height="497" width="486">
</div>

[
  {
    "settings": [ "master" ],
    "specs": {
      "ohhai": {
        "type": "HTMLFrameMojit",
        "config": {
          "deploy": true,
          "title": "global assets",
          "child": {
            "type": "OhHai"
          },
          "assets": {
            "top": {
              "css": [
                "/static/global_assets/assets/ohhai.css"
              ]
            }
          }
        }
      }
    },
    "staticHandling": {
      "appName": "global_assets"
    }
  }
]

Setting Up this Example¶

To set up and run global_assets:

1. Create your application.

   $ mojito create app global_assets

2. Change to the application directory.

3. Create your mojit.

   $ mojito create mojit OhHai

4. To specify that your application use HTMLFrameMojit with a child mojit, replace the code in application.json with the following:

   [
     {
       "settings": [ "master" ],
       "specs": {
         "ohhai": {
           "type": "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "title": "global assets",
             "child": {
               "type": "OhHai"
             },
             "assets": {
               "top": {
                 "css": [
                   "/static/global_assets/assets/ohhai.css"
                 ]
               }
             }
           }
         }
       },
       "staticHandling": {
         "appName": "global_assets"
       }
     }
   ]
   

5. Update your app.js with the following to use Mojito’s middleware, configure routing and the port, and have your application listen for requests:

   'use strict';
   
   var debug = require('debug')('app'),
       express = require('express'),
       libmojito = require('mojito'),
       app;
   
       app = express();
       app.set('port', process.env.PORT || 8666);
       libmojito.extend(app);
   
       app.use(libmojito.middleware());
   
       app.get('/', libmojito.dispatch('ohhai.index'));
       app.get('/status', function (req, res) {
           res.send('200 OK');
       });
   
       app.listen(app.get('port'), function () {
           debug('Server listening on port ' + app.get('port') + ' ' +
           'in ' + app.get('env') + ' mode');
       });
       module.exports = app;
   

6. Confirm that your package.json has the correct dependencies as show below. If not, update package.json.

   "dependencies": {
       "debug": "*",
        "mojito": "~0.9.0"
   },
   "devDependencies": {
       "mojito-cli": ">= 0.2.0"
   },
   

7. From the application directory, install the application dependencies:

   $ npm install

8. Create the file assets/ohhai.css using the following:

   div.lolrus img {
     margin: 5em;
   }
   

9. Add the following image files to the assets directory.

   • $ wget -O assets/sadwalrus.jpeg http://fypa.net/wp-content/uploads/2011/08/10-sad-walrus.jpeg
   • $ wget -O assets/favicon.ico http://static.treehugger.com/images/favicon.ico

10. Change to mojits/OhHai.

11. Modify the mojit controller to get data from the model by replacing the code in controller.server.js with the following:

    YUI.add('ohhai', function(Y, NAME) {
      Y.namespace('mojito.controllers')[NAME] = {
        index: function(ac) {
          ac.done();
        }
      };
    }, '0.0.1', {requires: ['mojito']});
    

12. Modify your index template to explicitly include the global asset sadwalrus.jpeg by replacing the code in views/index.hb.html with the following:

    <div id="" class="lolrus">
      <img src="/static/global_assets/assets/sadwalrus.jpeg" alt="walrus smile fail" height="497" width="486">
    </div>
    

13. From the application directory, run the server.

    $ node app.js

14. To view your application with the sad walrus image, go to the URL:

    http://localhost:8666

15. View the source code to see that the global asset ohhai.css was inserted into the head element.

Source Code¶

• Application Configuration
• Assets
• Global Assets Application