Difference between "ionic serve" and "ionic build browser"

Question

I am working on a project to create a mobile application version of a website(website already deployed and serving), we are using Ionic v1.7.16.

It has been reviewed by my superiors whether if we can work on Ionic project and then deploy it to the web also(replacing the previous web version), to have nearly same interface and user experience in both mobile and browser(desktop).

I've read about "Ionic Browser Platform", experienced with it a bit and I haven't come across with a problem.

My questions is same as the title. Is there a difference between "ionic serve" and "ionic build browser"?

My observations:

• When adding "browser" as a platform to a project, browser versions of cordova plugins are added, which I believe prevents inconsistencies between platforms.
• I face with totally same interface and functionality between "ionic serve" and "ionic run browser". I also used "python -m SimpleHTTPServer" to view/emulate what will it be like if we ever deploy browser version, and it is also the same as previous two.

Ionic browser platform is still in beta, and I haven't encountered with too many sources like I do about Ionic platform android. FAQ/sources about Ionic browser platform of all kind is also appreciated.

Answer 1

I am working with my first Ionic2 RC1 App having 2 platforms added (Android and Browser) and I appreciate differences between this commands...

It generates (in my case) this outputs:

---

1. Serve builds a dev environment with live reload support and without minification

$ ionic serve browser

myproject_root
  |-- www (13 MB)
          |-- assets (1.40 MB)
          |-- build (11.5 MB)
                  |-- main.css (729.90 KB)
                  |-- main.js (3.50 MB)
                  |-- main.js.map (7.10 MB)
                  |-- polyfills.js (84.10 KB)
          |-- index.html (1.20 KB)
          |-- manifest.json (313 B)
          |-- service-worker.js (3.60 KB)

---

2. Build builds a prod environment

$ ionic build browser

myproject_root
  |-- www (5.60 MB)
          |-- assets (1.40 MB)
          |-- build (4.20 MB)
                  |-- main.css (636.70 KB)
                  |-- main.js (1.60 MB)
                  |-- main.js.map (1.90 MB)
                  |-- polyfills.js (84.10 KB)
          |-- index.html (1.20 KB)
          |-- manifest.json (313 B)
          |-- service-worker.js (3.60 KB)

Additionally, I find this other deployable output:

myproject_root
 |-- platforms
   |-- browser
     |-- www (5.70 MB)
       |-- assets (1.40 MB)
       |-- build (4.20 MB)
         |-- main.css (636.70 KB)
         |-- main.js (1.50 MB)
         |-- main.js.map (1.80 MB)
         |-- polyfills.js (84.10 KB)
       |-- cordova-js-src (9.40 KB)
         |-- confighelper.js (3.00 KB)
         |-- exec.js (4.70 KB)
         |-- platform.js (1.60 KB)
       |-- plugins (17.60 KB)
         |-- cordova-plugin-device (5.70 KB)
         |-- cordova-plugin-splashscreen (6.00 KB)
         |-- cordova-plugin-statusbar (5.10 KB)
         |-- ionic-plugin-keyboard (643 B)
       |-- config.xml (1.40 KB)
       |-- confighelper.js (3.00 KB)
       |-- cordova_plugins.js (2.00 KB)
       |-- cordova.js (59.00 KB)
       |-- exec.js (4.70 KB)
       |-- platform.js (1.60 KB)
       |-- index.html (1.30 KB)
       |-- manifest.json (313 B)
       |-- service-worker.js (3.60 KB)

---

Summary

I can deploy all this 3 folders in my web server with different load times.

Here is a resume of my tests with deactivated caches

1. ionic serve's ./www output

   • Safari Desktop 10.0.1
     • Downloads 10 resources of 4,26 MB in 12,02 seconds.
   • Chrome Desktop 54.0.1
     • Downloads 13 resources of 3,60 MB in 9,06 seconds.
     • Chrome's console says 'main.js:47628 Native: tried calling t.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator'

2. ionic build's ./www output

   • Safari Desktop 10.0.1
     • Downloads 20 resources of 2,39 MB in 7,08 seconds.
   • Chrome Desktop 54.0.1
     • Downloads 23 resources of 1,80 MB in 5,47 seconds.
     • Chrome's console says 'DEVICE READY FIRED AFTER 218 ms' & 'StatusBar is not supported'

3. ionic build's ./platforms/browser/www output

   • Safari Desktop 10.0.1
     • Downloads 10 resources of 2,31 MB in 6,66 seconds.
   • Chrome Desktop 54.0.1
     • Downloads 13 resources of 1,80 MB in 5,09 seconds.
     • Chrome's console says 'main.js:47628 Native: tried calling t.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator'

Only for reference: The Android .apk weights 3.70 MB

---

My conclusions

• 'ionic serve' generates a development environment not ready for production.
• 'ionic build' generates 2 slightly different production environments and only one of them seems to correctly load native Cordova device plugins. If someone of Ionic Team read this, perhaps can give us a reason...

DISCLAIMER: I have recently read that Ionic Team is thinking about change rollup for webpack so all this could change in future Ionic 2 versions.

Answer 2

One of the Ionic developers said their production for browser build is still a work in progress. You can see Harrington's comments here:

https://github.com/ionic-team/ionic/issues/10635

He recommends using npm run build --prod for now.

I would recommend also minifying, compressing, and adding version number to the .js files and other includes, to force the browser refresh.

I notice that Angular 2/4 is further along in their production build process. I wonder if ng build --prod is where the Ionic team is trying to go, and if you can use that to build the ionic project as well somehow.

Angular has a benefit of changing includes on index.html to have random numbers on the end, forcing user browsers to refresh files like main.js which is critical.