Skip to content

OnsenUI - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement

License

Notifications You must be signed in to change notification settings

lakexyde/cordova-template-onsenui-vue-webpack

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OnsenUI - Vue - Webpack Cordova Template

You can start your new cordova project perfectly with this template.

This template uses:

Minimum Requirements

  • Cordova: 6.0.0
  • Node.js: 6.5.0 (Supports ES6)

WARNING (For Linux and Mac OS users):

For live-reload i can't find easy way to do fixed version of this. But you can develop your app with this way:

  1. cordova platform add ios browser (browser needs for development in live-reload mode.)
  2. 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.)
  3. 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.)

Features

Hooks are smart. They can fix some problems for you. Fix list:

  • npm install Automatically checks node js dependencies.
  • package.json Renames name variable if it has a space characters and auto saves. (It needed for npm install)
  • www Automatically manages www folder. You don't need to think about www folder. Your target is always src folder.
  • static Static assets automatically sync on live reload!
  • CordovaHtmlOutputPlugin Automatically adds cordova.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 your src folder, our smart hooks automagically copy it to www folder!
Live Reload Related
  • 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 right cordova.js file to page. So you can connect to webpack-dev-server from multiple devices at same time.

Installation

IMPORTANT: Phonegap build tools not supported currently. I suggest to use cordova with this template.

This template need cordova or phonegap, for more information cordova installation or phonegap installation.

Our Magic words:

cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-onsenui-vue-webpack
phonegap create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-onsenui-vue-webpack

And you have your brand new cordova / phonegap project with OnsenUI- vue 2 and webpack 2!


One central node_modules folder for your projects

Yeah... That's right. You can share a node_modules folder with all your projects. Just make make sure it is in the parent directory of your projects folders. Like this:

- projects
 -- node_modules
 -- project1
 -- project 2
 -- package.json

And then edit the hookers.js file like this:

nodePath = '..', // tells the script to search for node_modules folder in the parent directory
nodeModulesPath = path.resolve(nodePath, 'node_modules/'),

// Then comment out this below:
nodeModulesPath = path.resolve(pRoot, 'node_modules/'),

And there you go. You can always update your node_modules folder and install new packages by running:

npm install <package-name> --save-dev

Usage

You can use every cordova | phonegap commands. You just have one more command option: -- --lr. It starts live reload.

Example usage:

cordova run android -- --lr
cordova run browser -- --live-reload
phonegap run ios -- --lr

And 🎉 that's all folks!

You can check:

for more information.

Adapted from Framework7 - Vue - Webpack Cordova Template

By Oğuz Özcan

About

OnsenUI - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 79.1%
  • HTML 14.1%
  • Vue 6.7%
  • CSS 0.1%