The enyojs project includes a set of application templates, known as "Bootplate" (BOOTstrap + boilerPLATE) templates. These may be used to facilitate both the creation of new projects and their ultimate deployment.
Quick Start with Bootplate
generator-enyo is the preferred method for starting an app with Bootplate. It is implemented using Yeoman, an open-source suite of Web development tools.
Use the Node Package Manager
sudo npm install -g generator-enyo
Note that this will install Yeoman, if it is not already installed. (Also note that
sudomay not be necessary on all platforms.)
Run the generator, specifying the name of your new app:
yo enyo <myApp>
This will create the
<myApp>directory and populate it with the necessary files for an Enyo application. The Onyx UI library is included by default; to choose a different UI library, use the
yo enyo -m=moonstone <myApp> yo enyo --mode=moonstone <myApp>
The Other Way
Download a bootplate zip archive from enyojs.com, unzip the archive, and open the
bootplatefolder, for the Onyx version).
debug.htmlin a browser and see "Hello World".
At this point, you would refine your project through the normal cycle of development and testing, starting with the
package.js files, make sure to include these in your top-level
source/package.js and the
For the purposes of this article, let's assume that you've completed all of your work on the "HelloWorld" app, and turn our attention to the deployment process.
One advantage of installing
generator-enyo is that it makes deploying your app extremely easy. Just enter the application directory and issue the command:
The optimized app will be created in a directory called
deploy within the application directory.
Your project is now ready to deploy to various HTML5-ready targets. For details about deploying apps to specific platforms, see Platform-Specific Deployment.
The Other Way
If you're not using
generator-enyo, deploy your app by following these steps:
Make sure that you have the Node.js runtime (version 0.8 or later) installed on your system.
Make a deployment build as follows:
Open a command prompt (Windows) or terminal window (Mac/Linux).
On the command line, navigate to root of your bootplate folder.
tools\deploy.batscript (Windows) or
app.csscontain your application code, while
enyo.csscontain framework code.
buildfolder and a set of complementary files (an
index.htmlfile that loads your app, any images or other resources used by the app, etc.) are then copied into the final deployment folder, called
index.htmlin a browser, and see "Hello World" (but faster!).
Additional Notes on Bootplate Projects
Bootplate projects are set up to use embedded Enyo. In other words, the Enyo library and other dependencies are stored completely inside the project folder. These resources are relatively small, and keeping all the dependencies together allows the developer to control versions and to easily deploy sealed packages (e.g., PhoneGap builds).
Development vs. Deployment
When developing and debugging your project, it's common to need various source files and helper tools that are not needed in the final package. For this reason, we have the concept of making an application deployment. A deployment refers to a final production package, ready for inclusion in an app store or other method of distribution.
An important feature of bootplate projects is that you can generate deployments from them with relative ease.
A bootplate project has the following structure:
assets/ build/ enyo/ lib/ source/ tools/ debug.html index.html
assetscontains images or other data files for you projects. Files in this folder are intended to be necessary for deployment.
buildfolder does not exist, it will be created when the
deployscript is run.
enyocontains the Enyo framework source files. This folder is only necessary for debugging, and may be deleted for deployment.
libcontains various plugin files. Individual folders in
libmay come from various sources and may have custom rules for deployment. In general,
imagesfolders are required, and other files are only for debugging.
sourcecontains the code source files or other debug-only materials.
debug.htmlloads the application without using any built files; loading
debug.htmlis generally the easiest way to debug.
index.htmlloads the application using built files only. If built files are not available, it will redirect to
Updating the Framework Code
generator-enyo uses the latest stable version of each Bootplate template. (And each version of Bootplate, in turn, references a particular version of Enyo core and each of its associated libraries.) From time to time, the Bootplate versions specified by the
generator-enyo tool will be updated, as new stable builds become available.
To check for updates to
generator-enyo, use the command
sudo npm update -g generator-enyo
If an updated version was found and installed, you may update the framework code for a given application by entering the app's directory and issuing the command
generator-enyo supports a number of additional options, which we will be documenting shortly.)