|
| 1 | +[](https://travis-ci.org/w3tecch/aurelia-ts-boilerplate) |
| 2 | +[](https://david-dm.org/w3tecch/aurelia-ts-boilerplate) |
| 3 | +[](https://david-dm.org/w3tecch/aurelia-ts-boilerplate#info=devDependencies) |
1 | 4 |
|
2 | 5 | ## Prerequisites |
3 | 6 | 1. Install [NodeJS](https://nodejs.org/en/) |
@@ -179,3 +182,97 @@ You can find the configurations in ```<root>/environment```. |
179 | 182 | ## HTML5 pushState routing |
180 | 183 | By default pushState, also known as html5 routing, is enabled. The Webpack server is already configured to handle this but many webserver need |
181 | 184 | extra confuration to enable this. |
| 185 | + |
| 186 | +## Cordova - Mobile Development |
| 187 | + |
| 188 | +### Installation |
| 189 | +Initiate cordova with the following commands: |
| 190 | +```shell |
| 191 | +npm install -g cordova |
| 192 | +npm run cordova:init |
| 193 | +``` |
| 194 | + |
| 195 | +Finally add the following code just before the ```</body>``` closing tag: |
| 196 | +``` |
| 197 | +<!-- Cordova --> |
| 198 | +<script src="cordova.js"></script> |
| 199 | +``` |
| 200 | + |
| 201 | +Cordova has a issue in the way they serve the source code files to the WebView in the platforms. So we have to remove/alter the following code |
| 202 | +to make sure everything works in cordova. |
| 203 | + |
| 204 | +Remove the following line in src/index.ejs |
| 205 | +``` |
| 206 | +12: <base href="<%= htmlWebpackPlugin.options.baseUrl %>"> |
| 207 | +``` |
| 208 | + |
| 209 | +Remove the following line in src/app/app.ts |
| 210 | +``` |
| 211 | +8: config.options.pushState = true; |
| 212 | +``` |
| 213 | + |
| 214 | +Add those lines to the src/styles/_base.scss |
| 215 | +``` |
| 216 | +html { |
| 217 | + -ms-touch-action: manipulation; |
| 218 | + touch-action: manipulation; |
| 219 | + -webkit-user-select: none; /* Chrome all / Safari all */ |
| 220 | + -moz-user-select: none; /* Firefox all */ |
| 221 | + -ms-user-select: none; /* IE 10+ */ |
| 222 | + user-select: none; /* Likely future */ |
| 223 | +} |
| 224 | +```css |
| 225 | +
|
| 226 | +Install the following Libraries |
| 227 | +``` |
| 228 | +npm i hammerjs fastclick iscroll --save |
| 229 | +``` |
| 230 | +
|
| 231 | +Install the following Libraries |
| 232 | +``` |
| 233 | +npm i hammerjs fastclick --save |
| 234 | +``` |
| 235 | +
|
| 236 | +Provide those Libraries for the whole app and to do so add this into the config/config-globals.js file. |
| 237 | +```` |
| 238 | +... |
| 239 | +new webpack.ProvidePlugin({ |
| 240 | + 'moment': 'moment', |
| 241 | + '_': 'lodash', |
| 242 | + 'Hammer': 'hammerjs', |
| 243 | + 'FastClick': 'fastclick' |
| 244 | +}) |
| 245 | +... |
| 246 | +``` |
| 247 | + |
| 248 | +Add this at the bottom of the src/main.ts file to activate FastClick and to prevent default by touchmoves. |
| 249 | +``` |
| 250 | +/** |
| 251 | + * Disabels the scroll events from the generel page |
| 252 | + */ |
| 253 | +document.addEventListener('touchmove', e => e.preventDefault(), false); |
| 254 | +
|
| 255 | +/** |
| 256 | + * Activates Fastclick |
| 257 | + */ |
| 258 | +$(() => { |
| 259 | + FastClick.attach(document.body); |
| 260 | +}); |
| 261 | +``` |
| 262 | + |
| 263 | + |
| 264 | +### Run and build |
| 265 | +Cordova takes the ```www``` folder source to create the Cordova app. This ```www``` folder is a symlink to the ```dist``` folder. |
| 266 | +So make sure you run for example ```npm run build``` first before runing/buildinga Cordova app. |
| 267 | + |
| 268 | +### |
| 269 | + |
| 270 | + |
| 271 | + |
| 272 | +### Configs |
| 273 | + |
| 274 | +bounce |
| 275 | + |
| 276 | +### Plugins |
| 277 | + |
| 278 | + |
0 commit comments