I have been using ES6/ES2015 for a project, transpiling to ES5 via Babel(ify) and bundling with Browserify all via budo. This provides a nice workflow wherein a change to a ES6 file is detected, transpiling, and incremental bundling are done in memory without any file I/O and the browser is told to refresh.
I am new to Cordova and am trying to get a similar workflow working where the browser is replaced with the native iOS/Android in-app browser reloading on changes.
I've setup my config.xml to have a content element using "http://192.168.1.8:9966/index.html" which is the IP of my laptop running budo.
I think there's a "cordova prepare" needed somewhere but I'm not sure how to integrate this or if budo needs to have copies of cordova.js or something. That I am fuzzy on...
https://cordova.apache.org/docs/en/5.1.1/config_ref/index.html#link-1
https://github.com/mattdesl/budo
https://babeljs.io/
http://browserify.org/
Plugins being used:
com.telerik.plugins.wkwebview 0.6.5 "WKWebView Polyfill"
cordova-plugin-battery-status 1.1.0 "Battery"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-dialogs 1.1.1 "Notification"
cordova-plugin-file 3.0.0 "File"
cordova-plugin-file-transfer 1.3.0 "File Transfer"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-globalization 1.0.1 "Globalization"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-network-information 1.0.1 "Network Information"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-webserver 1.0.3 "CordovaWebServer"
cordova-plugin-whitelist 1.0.0 "Whitelist"
I have no errors in the iOS simulator log (Debug > System Log).
Anyone have live reload working for ES6 and Cordova? Thanks!
OK I figured this out. No one seems to be going this route but it's pretty awesome.
Live Reload with Cordova via Budo, Babel, and Browserify
Assumptions
your dev machine has an IP of 192.168.1.8
your app's entry point or main file is src/main.js
your Cordova app's root dir is app
Budo
Run budo. Budo will also inject a script tag that talks to its LiveReload server. All of your transpiled and bundled ES5 code will be served will be from path "js/bundle.js".
budo src/main.js:js/bundle.js \
--dir=app/www \
--live="app/www/**/*" \
-t babelify | garnish
Config.xml
Development version
Update your Cordova app's config.xml, setting the content element's src property to load the app content (e.g. index.html) from your budo instance instead of the local filesystem.
<content src="http://192.168.1.8:9966/index.html" />
Production version
<content src="index.html" />
This loads the config from the filesystem as normal.
Index.html
Split your app/www/index.html file into 2 versions: development and production. Switch between them with a shell script or similar.
Both versions of index.html reference js/bundle.js via a script tag.
Development index.html
The development version of index.html needs to load the cordova.js and cordova_plugins.js as well.
In my case, I am using iOS9 and the Telerik plugin that enables WKWebView. This plugin serves assets with an internal httpd to workaround an iOS bug and can be found at http://localhost:1234. Thus, I simply load cordova.js and cordova_plugins.js from there.
<script type="text/javascript" src="http://localhost:12344/cordova.js"></script>
<script type="text/javascript" src="http://localhost:12344/cordova_plugins.js"></script>
Thus, your development index.html should have a Content Security Policy that allows for all of these things to be loaded.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' http://localhost:12344 http://192.168.1.8:*; connect-src 'self' ws://192.168.1.8:*" />
In other cases (e.g. Android), you will likely have to fiddle with symlinks and hooks.
Production index.html
You only need to load the js/bundle.js and do not need the Content Security Policy entries that reference 192.168.1.8.
Live Reload / Making Changes
When you edit a ES2015 file referenced (in)directly by src/main.js, Budo will notice the change, transpile, bundle, and then notify the client via a WebSockets connection created the LiveReload injected script.
Make changes to app/www/css/index.css (or use SASS/LESS etc and have those write to index.css). Budo will notice and will send down changes to be realized without a page reload.
Make changes to app/www/index.html and Budo will notice and send those changes down via its LiveReload server.
Notes
deviceready will only fire once as you might expect, not on every change to a ES2015 file.
Adding/removing plugins or changes to config.xml are to be realized with a rebuild: cordova run ios.
If you periodically see a file being cached after a build, clean the project and rebuild: cordova clean ios.
Telerik's WKWebView Plugin
If you are using the Telerik WKWebView plugin, use the latest from github instead of NPM.
cordova plugin add https://github.com/Telerik-Verified-Plugins/WKWebView
There's a bug in the plugin code currently that mishandles loading of http-based content (start page). I have a pull request for this pending (Oct 27 2015).
#Johnny,
Welcome to the Cordova/Phonegap world. The answer you are looking for is to use the "hooks". This was design so you can add stuff to your workflow.
You can add or control, I quote:
before_build
before_clean
before_compile
before_docs
before_emulate
before_platform_add
before_platform_rm/
before_platform_ls
:::
before_prepare
(and more)
You should also read: Top Mistakes by Developers new to Cordova/Phonegap
I am updating it next weekend. This weekend I am working on a blog on whitelist, which has become a thorn in development.
FWIW: I am also working on a web components blog, but it is weeks away.
My main blog is: http://codesnippets.altervista.org/blog/
On live reload there are several developments right now. Phonegap has one named "hydration". Iconic has one, and so does MobileFirst (IBM). Right now a decent working "live reload" is badly needed. I have not had time to check any of the newer ones (whos names don't come to mind)
Best of Luck
Related
I used webdev to build my Dart Angular web application with the following command:
webdev build -r
Everything works besides bootstrap, the browser gives error 404 not found for all.css file.
I checked on the build result and all.css does not exists, just the all.scss file.
Should web dev convert this sass file to regular css when it's releasing the application.
I have components that use scss files and I have no issue with them (I know they are compiled to my main.js file)
Any help I'd be thankful.
For now I logged into my local test and manually copied the resulting all.css with my chrome source into my build but I don't think I should do this every time I do a new build.
After upgrade and dismissing Bower as recommended: Is there a way to include JQueryUI into an Ember project without using Bower? My project depends heavily of JQueryUI dialogs.
$ ember -v
ember-cli: 3.3.0
node: 8.11.3
os: linux x64
Do I have to reintroduce Bower into my project? Like in this old Using jquery in Ember-cli advice?
does this solve your use case?:
ember install ember-auto-import
npm install jquery-ui
and then wherever you need to use it:
import { stuff } from 'jquery-ui';
Including external js through npm package is always suggested. Above answer shows how to do it.
Sometime the developer won't maintain the package. In that case, you have to include it manually to get the latest js for your app.
If you want to include it manually (not depending on the npm package), here is the way to add external js in your application
1) Download the latest stable jquery-ui from their official site.
2) Extract it. Include jquery-ui.js file in your app/vendor/jquery-ui.js
(Where vendor is the home for external js)
3) Once added import the js in ember-cli-build.js file
app.import('vendor/jquery-ui.js');
4) Restart the ember app.
I was able to get it to work by adding "jquery-ui": "^1.13.2", to my package.json file.
Inside ember-cli-build.js I added the following
// jQuery UI
app.import({
development: 'node_modules/jquery-ui/dist/jquery-ui.js',
production: 'node_modules/jquery-ui/dist/jquery-ui.min.js',
});
// jQuery UI CSS
app.import({
development: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.css',
production: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.min.css',
});
I am slightly confused about the difference between UglifyjsWebpackPlugin and UglifyJsPlugin.
Webpack 2 documentation talks about both of them in separate pages -
1. https://webpack.js.org/guides/production-build/#minification
2. https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
Second link also talks about dependency on git://github.com/mishoo/UglifyJS2#harmony for ES6 minification target.
Which one should I use in production (react app).
UglifyJsPlugin is baked into webpack2 and uses that version of uglify-js that comes with webpack you use. So you can't change it's version without changing the webpack you use (in the current master branch of webpack2 uglify-js is ^2.x.x).
UglifyjsWebpackPlugin uses that version of uglify-js that comes with your project (so you may install any version, stable or unstable, harmony or not).
Sources of 1 and 2 are very close.
From webpack2 documentation:
Note that webpack contains the same plugin under webpack.optimize.UglifyJsPlugin. This is a standalone version for those that want to control the version of UglifyJS.
Which one should I use in production (react app)?
In production you may try using baked in UglifyJsPlugin as long as you transpile ES6 to something this plugin accepts.
Or there is also Babili — a babel based minifier ready for ES6+ (beta).
can anyone run phonegap-app-developer with cordova-plugin-wkwebview-engine?
this is my environment:
phonegap: 6.3.0
cordova-plugin-wkwebview-engine: 1.0.3
cordova-labs-local-webserver: from https://git-wip-us.apache.org/repos/asf/cordova-plugins.git#master:local-webserver
I use webpack dev server to download assets, and I think I configure it to return CORS header already (Access-Control-Allow-Origin: *).
under such a circumstance, I try to run phonegap-app-developer with cordova-plugin-wkwebview-engine. for the first time with this instruction. but got following error, which seems to described in here.
2016-08-16 16:50:01.026 PhoneGap[456:87484] Copying Cordova Assets
2016-08-16 16:50:01.026 PhoneGap[456:87484] Found /www folder. Will copy Cordova assets to it.
Received an unexpected URL from the web process: 'file:///var/mobile/Containers/Data/Application/...snip.../Library/NoCloud/phonegapdevapp/www/index.html'
Received an invalid message "WebPageProxy.DecidePolicyForNavigationAction" from the web process.
then I find this article, do the same with phonegap command (instead of ionic). as a result, above error is gone. but still phonegap-app-developer shows white screen.
official repository still does not use wkwebview plugin, so I doubt it does not work with developer app.
I'm using the AngularJS Yeoman generator (https://github.com/yeoman/generator-angular) and Express for the server. When running grunt server, it starts up my app fine and compiles .scss files into the .tmp folder in the root directory, but my pages don't automatically load that css. I have set up a link to the style/style.css stylesheet in my layout jade file.
I've also tried grunt compass, which works fine, but again, does not make it so my views actually load the css file in .tmp. I have the default compass setup in grunt.
This was an issue with live-reloading that has been addressed in newer releases. Update your generators through yo or by running npm update -g generator-angular. If you want to upgrade an existing project, you can run yo angular in the same directory and choose the diff option to see the changes you have to make.
As for May 22, 2015 ... the yeoman generator-angular does not work correctly unless you select Yes when asked if you'd like to include the Twitter Bootstrap. Perhaps subsequent releases will fix this.
On a good note, there are much less problems with the generator-angular than with generator-angular-ui-router (which is a disaster)