Setting Up a Development Environment - Enyo: Up and Running (2015)

Enyo: Up and Running (2015)

Appendix A. Setting Up a Development Environment

At some point, you’ll need to set up a copy of Enyo on your local computer or a server, if only to package up the applications you’ve developed. We’ll cover a few methods of setting up Enyo and discuss the prerequisites for each.

Prerequisites

Two basic tools are used by Enyo, which you may need to install: Node.js and Git. Let’s look at why they are needed and where to get them.

Node.js

Node.js is a platform for running JavaScript outside of a browser. It allows JavaScript to be used as a general purpose scripting language. Node is available for Windows, Linux, and Mac OS X. Visit the Node.js download page to download the appropriate version of Node for your system.

TO NODE OR NOT TO NODE

There are several features of Enyo that rely upon Node.js. In Enyo, Node is used for minimizing Enyo source, packaging apps derived from Bootplate, and compiling Less files into CSS. It is also a requirement for the Enyo Yeoman generator. If you plan to release an Enyo app, you will need to install Node. If you just want to play around with Enyo and you don’t mind running the non-minimized, debug version of Enyo, you don’t need Node.

Git

Git is a distributed source-code management tool. It allows software developers to keep versioned copies of their source code. It is also the tool the Enyo team uses for Enyo development and the tool required to work with GitHub, an online source code repository that hosts the Enyo source.

Git is not required to use the basic parts of Enyo. You’ll want to install Git if any of the following is true:

1. You want to keep up with the latest developments with Enyo.

2. You want to contribute to Enyo.

3. You want to use a system that makes it easy to keep past versions of your source code.

GitHub has instructions for setting up Git. The basic installation installs a command-line client. There are also GUI clients available for all the major platforms.

Installing Enyo

There are two general methods for installing Enyo, and one method specific to developing webOS Smart TV apps. The easiest way to make Enyo apps is to start with Bootplate. Bootplate includes all the scaffolding you’ll need to debug and deploy an app. We’ll cover Bootplate and the other methods for installing Enyo.

Bootplate

Bootplate is a scaffold upon which to build an Enyo app. It includes tools that allow you to easily debug your app in a browser and then deploy a minified version of Enyo with your app. It also provides an easy-to-use structure for your app. There are two versions of Bootplate available: Onyx Bootplate (for mobile and desktop apps) and Moonstone Bootplate (for smart TV apps).

There are three ways to install Bootplate: use the Yeoman generator, download a zipped archive from the Enyo site, or clone the archive from GitHub.

The simplest method is to download the zip archive from the Get Enyo page. As of this writing, the latest version is 2.5.1. After downloading, simply unzip the archive.

The next easiest method is to use the Enyo Yeoman generator. After installing Node on your computer, install the generator using the following command:

npm install -g generator-enyo

Once installed, a new bootplate can be generated by executing the following command:

yo enyo MyProject

In this command, MyProject is a directory name. This method will create an Onyx Bootplate. To create a Moonstone Bootplate, use the following:

yo enyo -m=moonstone

For more information on the generator and its options, see the Bootplate guide.

The last method is cloning Bootplate from GitHub. Use the following command to download the Onyx Bootplate:

git clone --recursive https://github.com/enyojs/bootplate.git

To clone Moonstone Bootplate from GitHub:

git clone --recursive https://github.com/enyojs/bootplate-moonstone.git

Full Source

You can also download the full source-code tree for Enyo from GitHub. To set up Enyo, you will need to clone the Enyo repository and then create a lib directory within the directory that contains the cloned repo. Inside the lib directory, clone the Enyo libraries you need for your application. The following diagram shows the directory structure and the Git repos:

enyo/ git@github.com:enyojs/enyo.git

lib/ (mkdir the lib folder)

onyx/ git@github.com:enyojs/onyx.git

layout/ git@github.com:enyojs/layout.git

...

Using the webOS Developer Tools

Enyo is the primary method for developing smart TV applications for LG webOS Smart TVs. To make it easier for developers to get started, LG has prepared a Software Development Toolkit (SDK). This SDK includes a TV Emulator and command-line tools. One of the command-line tools,ares-generate, can be used to generate app templates based on the Moonstone version of Bootplate. To create a new application template in the directory sampleProj, issue the following command:

ares-generate sampleProj

To see the list of available templates, use:

ares-generate -l

Other command-line tools are discussed in webOS Smart TVs.

TIP

The version of Enyo that is included with the SDK may not be the latest. You can use more recent versions of Enyo with the TV and the SDK. Use one of the other methods to install Enyo and add any needed files to the project.

Using Bootplate

Bootplate gives you a head start in creating your app by providing a ready-to-use structure for your app. Among other things, it provides a source directory that contains your app’s controller (app.js), a views directory that contains your views, and a style directory to house CSS. You can modify the included package.js to add additional source files and directories.

Bootplate provides scripts to create a ready-to-deploy version of your app, including a minified version of Enyo. For general testing, you will load debug.html into your browser. When you have created a production version, you can load it by opening index.html. To produce a deployable production version of your app, issue the following command:

tools/deploy.sh (tools\deploy.bat on Windows)

When all the source has been combined and minified, it will be placed into the deploy directory. The contents of that directory can be copied up to a web server or packaged with one of the various packaging tools. For more about the layout of Bootplate, see Bootplate App Structure.

WARNING

When testing Enyo apps by loading a file directly into the browser (as opposed to serving it from a web server), you can run into security restrictions in the browser, particularly when attempting to perform requests to load resources. Some browsers allow you to override those security restrictions. For best results, test your app by serving it with a web browser (such as Apache) or using the node-based server included with Bootplate (see Using Grunt).

Using Grunt

Bootplate includes an easy-to-use script for deploying Enyo apps. This script uses Grunt (a node package) to execute tasks. If you have installed Enyo using the Yeoman generator, Grunt is set up and ready to use. If not, you will need to initialize the dependencies and install the Grunt command-line tool. Execute the following commands from the Bootplate directory to initialize Grunt:

npm install -g grunt-cli

npm install

Once initialized, a minified version of the app can be created by issuing the command:

grunt

The script (Gruntfile.js) also includes tasks to start a simple HTTP server, check the app source for warnings using JSHint, and remove deployed files. The commands, in order, are:

grunt serve

grunt jshint

grunt clean