Espresso build - mway-io/Espresso GitHub Wiki

#Espresso build

##Introduction

Status: 16.01.2012

This section is a brief description of the sequence that is executed, when running espresso build. The espresso build tool builds and bundles the application, ready for deployment on some web server. The result is saved to local file system, into a folder, called build located in the projects directory.

Usage

Build the application by running: path/to/Espresso/bin/espresso.js build from the projects folder, it takes no additional arguments.Your builded application will appear in the special build folder, and can be customized by setting: the outputFolder property in the config.json.

Example:

Apps/myFirstApp/build/1291019025993/

To run the application open the index.html in your web browser (Safari or Chrome are recommended)

Configurate the build process

The code below shows a example of config.json, which is placed in the projects root directory and holds the necessary configuration properties for espresso build to run, see also config.json.

{  
    "name" : "Twitter",
    "version": "v0.0.1",
    "buildLanguage" : "en",
    "theme" : "m-deafult",
    "jslintCheck" : true
}

All build options Note: Only the options with: used = YES are used at the moment - see status.

  this.name = 'defaultName';   /*used = YES - the name of the application */  
  this.version = 'v0.0.1'          /* used = YES */   
  this.server = null;                /*used = YES - reference to the server*/    
  this.buildVersion = new Date().getTime(); /*used = YES - timestamp*/    
  this.buildLanguage = 'english';  /*used = NO - language of the app*/    
  this.theme = 'm-deafult';          /*used = NO - default theme of the app*/    
  this.outputFolder = 'build';        /*used = YES - name of the output folder, default is 'build ' */  
  this.jslintCheck = true;            /*used = NO*/  
  this.execPath = "";     /*used = YES - path of the current project to be build, should not be overridden!*/

The process

The diagram below shows the components ( exclusive the File components).

The main difference between espresso build and espresso server, is that espresso build writes the build application to the local files system only. It is part of the espresso sever, which uses espresso build internal, but starts the Espresso server as last step, waiting for requests.

The build process is started by executing espresso build via node in the projects root directory. A new object instance of Server is constructed, to return a object instance of App. The two build processes espresso build and espresso server are very similar, to stay convenient the application is bound also to the server object as it is when running espresso server .

So, anyway .... the App is called to load the projects data, like the main.js or the controllers, view and other project related stuff. After loading the Project the core files of the: The-M-Project are loaded as well. And finally build(callback) is called an the app object. The callback is the operation that should be executed after all the building action has been done. In case of espresso build, a massage is posted to on the shell, that all files has been build and saved to the files system.

The app will now start to build the application out of the loaded project data. First the index.html is build, which looks like here:

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>myApp</title>
    <link href="theme/jquery.mobile-1.0a2.min.css" rel="stylesheet" />
    <script src="jquery-1.4.4.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script>
    <script src="underscore-min.js"></script>
    <script src="core.js"></script>
    <script src="ui.js"></script>
    <script language="JavaScript">var myApp= myApp || {}; M.Application.name="myApp";</script>
    <script src="myApp.js"></script>
</head>
<body>
     <script language="JavaScript">myApp.app.main()</script>

</body>
</html>

After the index.html file, the output folder structure is created. This includes a build folder, the concrete folder name can be specified in the the espresso build. The folder structure contains a extra build folder (named with a timestamp) for every time the build process runs. After building the folder structure, the AppBuilder is called to build all files (framework and project). The AppBuild is inner object of App and takes care that the callback, which indicates that the build process is done, is called after all steps are finished. The AppBuild knows all properties of App.

The AppBuilder now calls every framework (containing the files and resources of both, the framework and the project) to build itself. The frameworks are loaded during: loadApp() and loadMProject. This is done iterative. The build call for the frameworks and all steps that are made during a framework is building themselves are all asynchronous!

The AppBuild taks care, that all frameworks are build completely, before calling the final callback to tell the App that all work is done!. The App object will call the callback function after it gets this signal.

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️