A module for creating Web apps with ChocolateChip-UI
Just run (depending on your setup, you may need to run it with
npm i -g chui
chui is dependent on
chocolatechipui for its resources. Since we update
chocolatechipui frequently, it's a go idea to run
npm update at least once a week. This will pull down the latest version for
chui to use.
You can test this after running
npm i in this directory. The tests use Mocha and Chai. Because this tool create folders and files on the user's desktop, we do not physically test for those results. Instead we use mocks of internal functions to test the logic used to determine who files should be created. To run the tests:
Chui helps you quickly create a ChocolateChip-UI project. There are two types of projects:
Here are example's of using
chui with these options:
# Android navigation list:chui -n myProject -o anroid -t navigation# iOS slideout app:chui -n coolApp -t slideout -o ios# Android tabbar app:chui -n tabbie -o android -t tabbar# Plain iOS app:chui -n simpleApp# Plain Android app:chui -n simpleApp -o android# Android app with Box:chui -n storageApp -o android -bchui -n storageApp -o ios -b
To learn more about local data persistence with ChocolateChip-UI's Box, please read the documentation.
The official launch of ES6 (ECMAScript 2015) means that if you want, you can build your ChocolateChip-UI app with it. Chui helps you by giving you the tools to write your app using the advanced features of ES6 while transpiling to ES5 for browsers that do not yet support ES6. Using ES6 modules, you can organize your app's code for better maintainability.
When you create a project that uses ES6, you'll need to build it before launching it in a browser. Chui provides everything to make this easy for you.
To create a project that supports ES6, use the flag
-j. This will set your project up to use Babel and JSPM:
# Android app using ES6:chui -n myES6App -o android -t navigation -j# iOS app using ES6:chui -n coolApp -o ios -t slideout -j# Android app using ES6 and Box:chui -n storageApp -o android -t basic -j -b
After creating a project with support for ES6, you need to
cd to the project folder and run these commands:
npm i# When the npm install finishes, run:jspm i# When the jspm install finishes, run:gulp
Running gulp will build and launch your project in your default browser. It will also watch your dev folder and reload the browser whenever you make and save chages to the code in that folder.
When you create a new project for ES6, you'll find all your development code in the project's
dev folder. When you run
gulp, it takes those files and compiles them into ES5 and puts them in the
js folder, which your project loads.
You can also make a project that has a minimal build of ChocolateChip-UI. This can greatly reduce the size of your app, sometimes by half. This is only possible with ES6 projects since it uses ES6 modules to let you import only the parts you need. To create a custom project, use the
# For Android:chui -n myProject -o android -t basic -j -cchui -n myProject -o android -t navigation -j -cchui -n myProject -o android -t slideout -j -cchui -n myProject -o android -t tabbar -j -c# Default (basic):chui -n myProject -o android -j -c
# For iOS:chui -n myProject -o ios -t basic -j -cchui -n myProject -o ios -t navigation -j -cchui -n myProject -o ios -t slideout -j -cchui -n myProject -o ios -t tabbar -j -c# Default (basic):chui -n myProject -j -c
Creating a custom build puts a folder called
src in your project's
dev folder. You can import any other modules you want from that
import './src/switches';import './src/range';import './src/popup';
Be aware that the path will need to be adjusted depending on where you are importing the module into. You can check out the reference apps to see how this is done. Open the
jspm folder and examine the files in each project's
dev folder to see how they import their ChocolateChip-UI modules.
--ts. This will put a folder called
typings at the root of your project, along with a filed called
jsconfig.json. Editors and IDEs that have plugins or extensions to support TypeScript will be able to use the TypeScript declaration file to add intellisense to your code. This provides code hints, code completion and code lookups as you type or hover over ChocolateChip-UI code.
Chui can also convert your completed app into a hybrid app for Android and iOS. It does this by create a simple webview shell that loads your web app. This allows your to open your Android project in Android Studio and your iOS porject in Xcode. You can then build and test these on the respective emulator/simulator or load them directly on tethered devices. When you're satisfied with the performance of your app, you can then submit it for review on Android Play or the Apple App Store.
To create a hybrid app, you use the
-h flag. You can also use the
-w followed by the path to your web app. After typing
-w followed by a space, you can drag your project folder on to the terminal, and the path will be added automatically. Or you can leave
-w out and copy your app in later. To do this for iOS, open the Xcode project and copy your app's files into the
Website folder. For Android, copy your app's files into the Android Studio Project's assets folder at
When you create a hybrid app for Android or iOS,
chui includes default icons for your app. You'll of course want to replace those with ones for your app. Android and iOS put have different sized apps and store them in different places. Note down the dimensions of the icons provided in your hybrid project and replace them with your custom images with the same dimensions and names.
You can learn about how to build apps with ChocolateChip-UI at the website: chocolatechip-ui.github.io.
If you want to create a project for an earlier version of ChocolateChip-UI (version 3.9.2), use chui 1.2.13:
npm i -g email@example.com
For documentation for this older version of
chui, please read this.