This tutorial is a step by step explanation of most features provided by Xone and will be updated continuously.
Installation
1.) Install Xone
Install Xone via NPM (Node Package Manager, requires Node.js):
> npm install -g xone
2.) Create New Xone Project
Create a blank project folder and run from there:
> xone create
3.) Build Xone Project
Build the project:
> xone build
4.) Run Xone Project
Start local webserver:
> xone server
Open your browser and goto:
- http://localhost/app/ to run development environment
- http://localhost/public/www/ to run production build (www is the default platform)
If you have choosen "Create New Xone Project" then you will see the default Xone placeholder screen of a new created project:
A single local Xone installation (without any global installation in addition) does not support the CLI commands: xone .... Please install at least one global Xone installation via npm install -g xone or use plain terminal commands alternatively (as shown below). For this reason each Xone project provides you a local command as an alternative fallback to the global CLI counterpart.
Accordingly to xone create, xone update and xone init you can do same with:
Alternatively download this package: master.zip and extract included xone folder into the project folder, e.g. my_project/xone/.
Change into the extracted xone folder and start installation via NPM:
Accordingly to xone create, xone update and xone init you can do same with:
For Windows users:
For MacOS/Linux users:
a) Download Xone (NPM)
Create a blank project folder and run from there:
> npm install xone
Accordingly to xone create, xone update and xone init you can do same with:
> node node_modules/xone/create
> node node_modules/xone/update
> node node_modules/xone/init
b) Download Xone (Git, Zip)
Create a blank project folder and run from there:
> git clone https://github.com/nextapps-de/xone.git
Alternatively download this package: master.zip and extract included xone folder into the project folder, e.g. my_project/xone/.
Change into the extracted xone folder and start installation via NPM:
> cd xone
> npm install
> cd ..
Accordingly to xone create, xone update and xone init you can do same with:
> node xone/create
> node xone/update
> node xone/init
Local CLI Fallback
You can use a local CLI fallback from the projects root folder.
For Windows users:
> app build
For MacOS/Linux users:
> bash xone build
1.) Initialize Xone Project
If you have an already existing codebase and want to migrate this to a xone project, goto the projects root folder and run from there:
> xone init
Move all your html, css and js contents/sources to the folder my_project/app/. Accordingly CSS files are located in my_project/app/css/, Javascript files are located in my_project/app/js/.
2.) Provide Main Class
Provide at least the APP.MAIN class definition, e.g. in my_project/app/js/main.js:
goog.provide('APP.MAIN');
APP.MAIN = function(){
alert('Hello World!');
};
a) Xone Update (Global)
In the root of your project folder run:
> npm install -g xone
Install the new files from node modules to the project:
> xone install
b) Xone Update (Local)
In the root of your project folder run:
> npm install xone
Install the new files from node modules to the project:
> xone install local
Manage
Check Current Installation:
Check Global Node Modules:
Check Local Node Modules:
Check Custom Location:
> xone version current
Check Global Node Modules:
> xone version global
Check Local Node Modules:
> xone version local
Check Custom Location:
> node ./path/to/xone/version
a) Manage Default Environments
Xone default environments are:
- production (build)
- development (local)
- test (local)
- benchmark (local)
Change current active environment in app/manifest.js:
"env": "test"
Alternatively adding parameters to the URL:
http://localhost:9000/?env=test&platform=android&debug=true
You are also able to override any CONFIG attribute by passing URL parameters respectively.
b) Manage Custom Environments
Show/List currently defined environments:
> xone env list
Add custom environments:
> xone env add offline
Creates a new env file in destination: workspace/my_project/app/config/offline.js
a) Manage Default Platforms
Xone default platform is called www.
Change current active platform in app/manifest.js:
"platform": "android"
Alternatively adding parameters to the URL:
http://localhost:9000/?env=test&platform=android&debug=true
You are also able to override any CONFIG attribute by passing URL parameters respectively.
b) Manage Custom Platforms
Show/List currently defined platforms:
> xone platform list
Add custom platform:
> xone platform add webapp
Creates a new platform folder in destination: workspace/my_project/app/platform/webapp/*
Make a build with the new platform:
> xone build webapp
Build destination: workspace/my_project/public/webapp/*
Notice
Xone build uses the Google Closure Compiler under the hood. All Xone libraries also supports compilation in Advanced Mode. The build properties can be configured in xone.json. The Closure Compiler also provides a simple dependency management system (provide/require) you should make use of to improve dead code removal.
Actually Xone supports 2 different versions of closure compiler:
- requires Java
- requires Javascript (Node)
It is recommended to have a Java (JRE) properly installed on your machine to unlock some benefits of the Closure Compiler Java version.
a) Change Compiler
To change the type of the compiler you need to change the value of the field closure_compiler_lib_type from "js" into "jar" in xone.json accordingly:
"closure_compiler_lib_type": "jar"
b) Configure Compilation
If you have less experience with the Closure Compiler you can optionally set the compilation level to "simple" on the field closure_compiler_level within the xone config file:
"closure_compiler_level": "simple"
c) Disable Compilation
You can do one of both in xone.json:
"closure_compiler_lib_type": "none"
"closure_compiler_level": "none"