-3

I've found a few post on this topic but have not been able to find the best solution.

Attempted to integrate Ionic into IBM MobileFirst (Worklight).

At the moment - I have built a normal Ionic project and moved the WWW folder in the 'common' folder. Also added in the initOptions, main.js and messages.js.

MobileFirst has an awful build process - I hate having to deploy to a mobilefirst development server + preview app for any code changes. I am hoping to get some type of auto reload working within mobileFirst, or at least develop with ionic normally and hav ea job to bring my changes into my worklight project... something that is better than me current situation.

Does anyone have a sample project that actually auto-builds or picks up code changes automatically?

Any and all help is greatly appreciated.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
msponagle
  • 330
  • 1
  • 11
  • I think you may have been using an early version of 6.3 where auto-reload was not working. See my answer. – djna Feb 26 '15 at 16:59

4 Answers4

1

Not sure what do you mean by "auto-reloading"; if you make any changes to the web resources to your project inside the Studio plug-in (in Eclipse) and reload the preview in the browser, it will show the changes.

You are not required to Run As > Run on MobileFirst Development Server for each change. As long as you work on the resources in your workspace, the "auto-reloading" as you call it, should work (make sure you are using the latest available MobileFirst Studio version from the Eclipse Marketplace).

There is also a rudimentary Starter Application that is based on Ionic.
You can download it from here.

There are also several results on the subject matter when searching in Google.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Thanks for your answer - may be an issue with my MobileFirst Studio Plugin - as when I run the common->Preview no code changes are picked up until I redeploy the server. Also - sorry I meant to write live-reload. – msponagle Feb 09 '15 at 19:57
  • There is no need to do this action after the initial Run As > Run on MobileFirst Development Server; simply stay with the same browser window and refresh it. Again, make sure you update your installation to the latest (because there was a bug about that ;). – Idan Adar Feb 09 '15 at 19:58
  • Thanks for your attempts to help me - I just reinstalled a fresh eclipse w/ the Studio plugin and made a new demo project - changes do not showup automatically - thanks anyhow - I think i'll have to just shoot myself instead of work with IBM. – msponagle Feb 09 '15 at 20:46
  • That attitude won't get you anywhere even if you do not work with IBM tools. Better change it fast. ;) I am using the latest build from the marketplace myself. 1) Created a new project and application. 2) Run As > Run on MobileFirst Development Server 3) Open MobileFirst Console > preview web resources 4) Back in Studio add an alert in common\js\main.js 5) Back in the browser refresh the previewed web resources, an alert appears. Works. – Idan Adar Feb 09 '15 at 20:48
  • I agree with the attitude comment - just frustrated:) Thanks again for you're help. Going to continue working through this and will update if I figure anything out. Loving how the Ionic projects get setup and ran - so just afirad to loose some of that beauty when integration with MobileFirst. If I do get something working - i'll be sure to hithub it for other. – msponagle Feb 09 '15 at 20:59
  • Well - never could get code changes automatically update my preview. I'm now using the IBM MobileFirst CLI - and I have made a grunt job in my ionic project to push my changes into the common directory and build/deploy. Works for me - maybe only a 10 second job total whenever I need to test my app with MobileFirst features - Still got work to do on it though. – msponagle Feb 12 '15 at 15:24
1

The need to rebuild in order to see changes in your Web components (CSS, JavaScript, HTML) did used to be an annoyance in early versions of what was then Worklight and is now MobileFirst. I forget when the need for a rebuild was removed but certainly in Worklight 6.2 and beyond you now simply need to refresh in your browser.

UPDATE: If using MobileFirst 6.3 you need to ensure that you are on a suitable patch level. I find that simple refresh does not work in 6.3.0.00-20150106-1717, but if I update (Help->Check for Updates) to 6.3.0.00-20150214-1702 then edit/save/refresh works as expected.

My personal practice is always to have Mobile Web environment in my project and then choose that from the Console. This loads the application in the browser-based Mobile Simulator that you can tailor to fit your target form-factor. This has a "Go/Refresh" button that immediately reflects your edits.

Alternatively, some folks these days do not use Studio, instead they use the Command Line Interfacer. Possibly this may be more to your taste. You can download it here.

djna
  • 54,992
  • 14
  • 74
  • 117
0

there is a solution with using staff like ionic-cli serve command + symbolic links that will replace common folder.

check here an example https://www.dropbox.com/s/4pvaulo6yo47kb9/lab_7.2.mp4?dl=0

(you just can disable sound, cause i've recorded it in russian) 7-15 minutes of this video

Other option is to organize live-preview yourself using IDE features and/or nodejs

This will work as long as you are working on front-end (mostly non-worklight api) part.

Andrii Vasylchenko
  • 86
  • 2
0

You need to include this lines in the index.html

 <!-- ionic bundle & css -->
    <link href="www/ionic/css/ionic.css" rel="stylesheet">
    <script src="www/ionic/js/ionic.bundle.js"></script>
Francisco Díaz
  • 73
  • 11