Why is ionic serve necessary?


#1

I’m an Angularjs and Ionic beginner. I’m confused on why I need to use ‘ionic serve’ to view apps on my desktop browser. My understanding is that ionic extends Angularjs and I don’t need to run a serve to view Angularjs sites. Perhaps my Angularjs sites have been too small to see the need.

Thanks,
Brian


#2

Serve does more than just that

It wraps your app in an actual web service so it emulates how it will run on the device with cordova. Making http requests and such require this.

Also when you update any files serve will update your view in the browser so it’s really nice for rapid development. It also auto compiles the SASS files for you and updates the css changes without reloading the whole view which is really neat I think.


#3

Thanks, NorthMcCormick! So, that leads me to another question. When I run ionic serve, I can see my app in IE and it looks exactly like it looks on my iPhone when I run ‘ionic upload’ and use the ionic app. Is there a way for me to run ionic serve and to then see my app in for how it would look on an android device?


#4

@bvacha you can use ionic serve --lab to get preview of ios and android.


#5

HOLY SMOKES!
How come this is not in the front page of http://ionicframework.com/docs/guide/testing.html ?

How does --lab work? How is it ensuring true iOS and android representation? They are both running inside safari


#6

So it works by creating two iframes and adding the class platform-ios for ios and platform-android for android. This is really how alot of the style differences are done.


#7

I’m a little confused. I suspect that the key issues between platforms would be:
a) How is Safari handling rendering vs. Chrome
b) How are they handling events (on-tap/on-hold/etc)
c) What cordova plugins work and what don’t (which you anyway can’t test on a desktop)

I tried ionic --lab right now, and the experience on either window was 100% same for my app --> but in reality Android does feel different - its choppier as one example, on-hold does not seem to work for all devices etc.

What exactly is ionic serve --lab helping with? It is a little unclear to me what including those two classes are doing (sorry, I’m a newbie to all of this)


#8

a) there shouldn’t be too much of a difference since they’re webkit based
b) the difference between on-tab/hold are handled in our javascript.
c) cordova plugins won’t work in a browser, they need to be on a device.

Ionic lab is a way to test your platform specific changes. So if you want to have some UI differences on ios and android, you could test them out in the browser before deploying to a device. It’s not meant to be a replacement for real device testing.


#9

Ah, so it really is a means to test what happens with platform-android, platform-ios classes if you use them.

Good to know - I did not even know these classes exist and are active on a per platform basis. I just found How to use platform-ios and platform-cordova css classes?

That explains why it looked the same - I’m not using these classes

Thanks


#10

I love it. ionic serve --lab sounds perfect. Thanks all!