Ionic – CORS with Live Reload Part 2

Hello again, reader.

I wanted to follow up (better late than never, right?!) on my previous post regarding CORS issues encountered while working with the Ionic Framework’s –livereload feature.

If you’re reading this, then you likely already know that some interesting things can happen when using the Live Reload (–livereload / -l) features of Ionic… Namely:

[code]
XMLHttpRequest cannot load http://someresource.com/api/?id=1.
No ‘Access-Control-Allow-Origin’ header is present
on the requested resource. Origin ‘http://192.168.1.123:8100’
is therefore not allowed access.
[/code]

As you may very well be aware, generally speaking, resources external to a Ionic/Corodova project are whitelisted in the project’s config.xml via an ‘access’ element possessing an origin property having a value of ‘*’. This is so that you can consume external resources, such as an API.

As a result of how Live Reload currently works, this origin policy has to be updated while using –livereload – where it’s changed to the URL of your live reload server (generally an http://local_ip:port variety) when you kick off the “ionic run -lcs android’ (or whatever) command.

Due to the changes of the project and perhaps due to the way the livereload does the magic that it does (I admittedly have a high level understanding of this system, as I’ve not had time to dig in too deeply), many users have ran up against CORS issues when developing/debugging using –livereload.

While I’d previously read on proxy configuration in Ionic, it hadn’t quite clicked in relation to this issue until a helpful github user spelled it out using crayon fonts for me. Here is the response that I am referring to: https://github.com/driftyco/ionic-cli/issues/89#issuecomment-86034156

Essentially, as Yonn-Trimoreau has spelled out, you can configure a proxy in your ionic.project file that will proxy your external resource requests ‘locally’, effectively eliminating CORS issues while working with –livereload…

Here is an example of this configuration (ionic.project file) for 2 proxies:

[javascript]
{
"name": "MyProject",
"app_id": "",
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
],
"proxies": [
{
"path" : "/remoteAPI",
"proxyUrl": "http://reddit.com/api"
},
{
"path" : "/localAPI",
"proxyUrl": "http://192.168.1.123/redditishResponseLocalAPI"
}
]
}
[/javascript]

As you’ve likely inferred, after adding the proxy configuration to your project, you will be enabled to call external resources as if they are local – “/remoteAPI” and “/localAPI” in the case of this example.

Quite useful when developing against multiple APIs or when using Live Reload in general.

-Matt

Ionic – CORS with Live Reload

File this one under ‘lessons learned from hours spent chasing my tail’.

Recently, I’ve been working quite a bit with the Ionic Framework… While I can’t say that I was initially on board for the whole ‘hybrid app’ approach for mobile development, I’ve really grown to love the stack and find it fun to work in. Fun development aside, this isn’t to say that the stack (like any stack) is without its issues – for me currently, it’s the undocumented (or the only-documented-in-a-github-issue) gotchas that can create the largest headaches, as they can often result in an hour or two of tail-chasing.

As you’ve likely gathered from this post’s title, the most recent fun on this front was trying to chase down a CORS issue when testing a tablet application that I am currently writing. In this application, we’ve opted for custom auth headers – adding which caused the CORS issues to rear their ugly head…  In my case, it was specifically issues with Access-Control-Allow-Headers.

“No big deal – Cordova/Phonegap whitelists all domains, so you’re good to go”, right?  As is often the case, “no big deal” can be filed under the category of “famous last words” here…

Not previously known to me, apparently using -l(/livereload) causes a modification to the config.xml at runtime for that build – a modification that removes the ‘*’ whitelisting, which can result in banging your head against CORS issues when interfacing with a REST service during development using livereload…

For the skinny, check out the github issue discussing this – https://github.com/driftyco/ionic-cli/issues/89

Unfortunately, Googling for “Ionic CORS” will provide you with a lot of noise that can result in some tail chasing as you start following suggestions to delete client side default headers or researching server-side solutions to mask the problem… Googling for “livereload CORS” however will take you to some relevant information via Grunt livereload Server discussions.

In the end, it was just easiest to configure my development web server to allow the CORS operations, as I wanted to keep Live Reload capabilities with the least amount of fuss. There are some client side things that you can do (discussed in the linked thread), but as you will find, those are temporary and will need to be done over and over as you develop… I’ve also read some mention of configuring a Grunt proxy server to proxy these requests ‘locally’, but I’ve not been able to investigate that approach, so I can’t really speak to it, though I’d love to get some input on this approach if any readers have any…

Anywhos… I just wanted to put this out there in case “Ionic CORS” led anyone else on a wild goose chase.

Happy Developing!

-Matt

Tab Dump – September 5th 2014 Ed.

Well, it’s that time again – too many tabs to be able to look myself in the face (in the mirror, of course)… If you’re a ‘regular’ reader of this ‘blog’, you know by now that these are pretty much the only posts that I do with any real regularity… Fluff of little value, I know – but here you have it… what I’ve been holding in my tabs for the past couple of weeks…

A visual proof that neural nets can compute any function
This apple ID has not purchased OS X Mavericks
Spider’Woman’s Big Ass is a Big Deal
Dockerizing a Node.js web application
Puppet Labs
10 of the Creepiest Unmarked Locations & Encounters in Fallout 3
A Javascript Quality Guide
Sandstorm
Hacker News – Turn Node Applications in Executables
Mailvelope
Microsoft Research – Drawbridge
Wiki – Artificial Neural Network
Productivity and the Workweek
A failed Experiment: How LG Screwed Up Its WebOS Acquisition
About Ruffner Mountain
Red Mountain Park
YMCA Memberships
RabbitMQ
Das Haus Birmingham! – Oktoberfest Schedule
It’s time to discover the “Neglected Master” of Science Fiction
Haskell Wiki – Functional Programming
F# – Getting Started
Hacker News

NTFS File System Tunneling (…is stupid …and wrong)

I will keep this short… I’ve already spent far too much time on this easy to work around peculiarity of NTFS and how it associates file meta information under the hood…

Consider this console app: http://pastebin.com/66QABWS3

If you were to actually read this (don’t feel too bad if you didn’t – the last link will explain it all) and didn’t have knowledge of the magic going on behind the scenes, you may be fooled into thinking that this application would write out “42” at some point in it’s lifetime…

Unfortunately, reasoning such as that would be based in reality – where up is up, down is down and true doesn’t equal false.  I say ‘unfortunately, due to the fact that this is not the reality that your NTFS file system (if you have one) is operating in…

It is actually operating in a place where when one thing dies, another assumes its identity and carries on its life as if it is the original thing – clearly it isn’t, but your NTFS file system assures you that it is…

NTFS is telling you: “This file that you create and then delete every 10 seconds, as you have for the last month and a half… Well, it wasn’t just created 9.9 seconds ago.. No.. It was created a month and half ago… Really it was… I don’t care that you just deleted it and then recreated a COMPLETELY NEW file in it’s place – THIS IS THE FILE CREATED ONE AND A HALF MONTHS AGO. FER-REAL-ZIES!”

Welcome to the nonsensical world of NT File System Tunneling …

-Matt

ASP DropDownList DataBind Woes – Invalid SelectedValue Error

Yesterday, as I was plugging away on an ASP WebForms application to add some new features, I encountered an error I had not yet seen.

“SelectedValue which is invalid because it does not exist in the list of items”

Although Googling turned up a lot of results, I could not really find anything that fit the bill as a solution.  I did find a few threads on StackOverflow, though usually these discussions were followed up with additional people asking how the original asker resolved the issue.

For me, it turns out that I was calling the block of code that performed the list population and databind multiple times.  Populating and calling DataBind on this DropDownList multiple times, resulted in the above error.  In the end (after much forehead beating), the solution was an easy one – checking items before attempting to populate and bind to ensure the list was not already initialized.

if (yourDropDownList.Items.Count() == 0) //only populate and bind if not already done…
{
//populate and bind
}

That is it – just checking to ensure the items for the drop down list have not already been populated.  Of course, you really should have your application structured so that this logic is only hit once…. This said, if a complete refactor/rewrite is not in the cards for your application at this time, you can just perform this simple check to work around the exception.

Hope this helps someone!

-Matt

Critical error on Couchapp push with Ubuntu

I am hoping that in posting this, someone is able to save a little time and frustration.

On my Ubuntu 10.10 machine with CouchDB 1.0.1 installed, I began experiencing the following error every time I attempted to ‘couchapp push’ my couchapp changes:

[CRITICAL] Expecting object: line 2 column 3 (char 4)

After a bit of noggin scratching (and perhaps a little mumbled cussing), I started thinking about the fact I had not upgraded my couchapp install since long before I last upgraded CouchDb.

Running the following cleared up all error and put me back in the happy land of  ‘couchapp push’:

“easy_install -U couchapp”

Yup… Just a version issue…  Hope this saves someone a few gray hairs…

 

-Matt

Wow. I never use this thing. [Inception]

So, I came to post a quick quip about how much I liked Inception today and realized how little I use my blog anymore.  Not that I have ever been a competitive blogger or anything of the sort, but it would seem that I have withered and dried up – at least so far as these posts are concerned (and likely reflect).

None the less, that is not the case (me withering and drying) as I have just been really, really (really) busy reading and trying to get myself up to speed as a professional programmer… Something that I am enjoying emensely (even though it sometimes feels as if I will never ever (ever) know enough to take a breath again – GOOD THING IT’S SUPA FUN!).

Speaking of something I have recently enjoyed (and my reason for sitting down 15 mins ago to begin writing this) – watching Inception (I’ll wait while you see what it is if you don’t know)… Oddly, there is more related between the first part of this post (developing as a developer) and the fun provided by Inception – conceptually at least… I have to say, I was genuinely entertained at the layering and constant thought provoking representations of recursion and Big-O concepts… I won’t go into it much more than that, but if you find this stuff interesting, you will likely enjoy aspects of the movie that may perhaps will be overlooked by “other watchers” of Inception.  Funny thing is, I get back home, head over to browse hacker news and quickly come to the realization that I was not alone in my CS-centric thoughts about the film – http://news.ycombinator.com/item?id=1526104

Aside from the mentally stimulating representation of CS-Theory-related concepts, there is PLENTY of eye-candy by way of perty explosions and mind-bending (and physically defying) scenery to keep you entertained – even if the exotic applications of recursion aren’t your cup of tea.

I’d give Inception an ‘A’.

Practical Django Projects 2nd Ed. (Apress) – CH3 TinyMCE Problem

Updated: April 6, 2010 9:50pm CST – Correction (Below)

When reading/working through the 2nd edition of Apress’ ‘Practical Django Projects’, I hit a hang.  A big hang.  And like most big hangs, it was actually a very small (technically speaking) bump in the road.   The problem is that when looking to “how to” books such as ‘Practical Django Projects’, it is easy to fall back to the book’s printed text as the absolute code bible of what is and what is not correct in this world of code.  Unfortunatly, as was the case with me, this can lead to wasted hours and (after-the-fact) embarrassing frustration.

As I have seen this mentioned on forums around the interwebs while researching this myself, I figured I would document the solution here.  I am happy to say that I do not have to cite reference here as I figured this out myself and have submitted an errata report to the publisher.  What I am not as happy to admit is the fact that when you see what the problem here is, you will not be impressed (and will likely kick yourself as clearly you are reading this for help – and don’t really need it)…  So on to the meat…

PG.24-25 – the tiny_mce.js referral to load TinyMCE in your Flatpages… You set it up, just as the book instructs and BAM – nothing… No TinyMCE and a Firebug inspection of the page shows that the tiny_mce.js cannot be found (404).. Again, the error is actually quite simple, of course making it all the more simple to overlook when error correcting…

On page 24, the reader is instructed to set ‘document_root’:’/path/to/tiny_mce’.  In the explanatory following paragraph, the example directory “/Users/jbennett/javascript/TinyMCE/jscripts/tiny_mce” is given.

On page 25, the reader is told to set the TinyMCE script up on the template as follows: <script type=”text/javascript” src=”/tiny_mce/tiny_mce.js”></script>.  Since we already set the document_root (pg25) to ‘../jscripts/tiny_mce/’, the ‘tiny_mce” portion is not needed here and of course is not a valid src referral as the tiny_mce.js is located in ‘../tiny_mce/’ and not in ‘../tiny_mce/tiny_mce/.

Hope this helps someone…

UPDATE:  Ok, so stepping back to it today, I don’t know quite what I was thinking last night and am sorry to Apress for incorrectly identifying this supposed error.  In reworking through this, the text it 100% correct.  I am blaming the lack of sleep for my confusion (because that is less of an ego blow than blaming stupidity).  My misunderstanding came about from a ASSumption made by me on the meaning of document_root and the Javascript referral.  Reading this helped me better understand where the two meet (aka not a literal direct path relationship): How To Serve Static Files… The “How to do it” section pretty much sums it up 🙂  Sorry for my confusion!!!

Google Code University

Google Code UniversityI saw a posting about the Google Code University on Hacker News this morning.  A quick inspection of the site shows a nice set of tutorials on Python, C++, Java and Go.

I personally worked through  Google’s Python Class last night and found it to be easy to follow and relatively comprehensive on the basics – this one alone is enough for me to at least recommend a visit.

I really hope that there is more to come to the Code University in the near future!