Repository is here --> GitHub
You can start creating awesome apps with this template right away!
This template uses:
- Cordova: 6.0.0
- Node.js: 6.5.0 (Supports ES6)
IMPORTANT: Phonegap build tools not supported currently. I suggest to use cordova with this template.
This template needs cordova, for more information cordova installation.
-
There are two ways of getting this repository working with the kitchen sink app that is already configured into the template:
- Use
npm run init
inside the template_src/ directory, just wait for all the dependencies to install, the code to be built, the cordova platforms to be added to the project and the browser to respond to the script.
- Use
-
The other step by step way of getting the repository working:
- Clone this repository.
- Using the terminal navigate into the template_src directory.
- Run
npm install
inside the template_src directory. - Run
npm run build
after the previous command. - Run
cordova platform add android browser ios
. - You are ready to run the ios apps from Xcode, Android apps using
npm run dev:android
while having an Android device connected and developing directly in the browser usingnpm run dev:browser
.
- Add the plugins using the following syntax
cordova plugin add {plugin name} --save
so the plugin is recognized and saved correctly in the project.
You can use every cordova command.
You just have one more command option: -- --lr
. It starts live reload.
Example of live reload feature:
cordova run android -- --lr
cordova run browser -- --live-reload
cordova run ios -- --live-reload
Important: Only use live-reload for development purposes only!
For production build please build in the regular way you would build a Cordova app.
Hooks! Hooks are smart. They can fix some problems for you. Fix list:
npm install
Automatically checks node js dependencies.package.json
Renamesname
variable if it has a space characters and auto saves. (It needed for npm install)www
Automatically manageswww
folder. You don't need to think about www folder. Your target is alwayssrc
folder.static
Static assets automatically sync on live reload!CordovaHtmlOutputPlugin
Automatically addscordova.js
to html. You don't need to add to your file manually. It's helpful for webpack.manifest.json
Some cordova plugins needs manifest.json in root folder. If you add manifest.json file to yoursrc
folder, our smart hooks automagically copy it towww
folder!- The template uses a dynamic theme to load the basic and corresponding theme according to the device detected (useful when developing on a browser). To disable or modify this please check main.js.
For live-reload there is sometimes trouble getting live-reload to work. But you can develop your app with this way while a fix comes:
cordova platform add ios browser
(browser needs for development in live-reload mode.)cordova run ios -- --lr
(wait till app opens in your ios emulator or phone. it will close console output after publish, so live-reload will not work. don't close the app and go to next step.)cordova run browser -- --lr
(you can use live-reload in your phone-emulator and browser at same time. you can edit your files in live-reload mode now.)
config.xml
Live reload needs<allow-navigation href="*"/>
in development mode. So our smart hooks manages this too. You don't need to think about it.live-reload
Manages live-reload dependencies automatically. Just write your code, and don't think about dependencies.device_router.html
Smart router in live-reload mode. It searches for best available ip for connect server. if it can't find, you can write ip:port manually.CordovaDeviceRouter.js
In live-reload mode, you can connect to server from multiple devices. This file inject rightcordova.js
file to page. So you can connect to webpack-dev-server from multiple devices at same time.
You can check:
for more information.