I’m starting a test project using Ionic v2, using it for a webApp (no mobile nor for any specific device).
To do so I created the app with the following command: ionic start -a "appName" --v2 --no-cordova --sass --ts sidemenu appName
Everything well, ionic serve compiles the app and launch the browser.
Now the question: what command can I use to build and compile (pretty much like what ionic serve do) to target a browser?
I don’t want to add cordova “Browser” device since I don’t need cordova at all (thus the --no-cordova option), but I don’t find any generic “build” command.
It seems he thinks that serve isn’t the end of the workflow, like if there should be a build command for browser, the way it works is that ionic serve does build your source files to www/build, all what build does is just add an extra step to compile the apk.
You could look it like this, build calls serve to transpile your source and then compile the apk, run will call build and then install it on any device available.
Yeah I think that explains pretty well what my tought was…
Looking at it like this it makes perfectly sense.
My issue was on having a livereload server starting up everytime I need to “just compile” the code, but I presume that’s just as complicated as calling ionic serve -b -d to stop the server and the browser to open up
From my knowledge, difference doesn’t exist. I successfully hosting 7 Ionic2 examples on my Apache server. And all of them were created with ionic serve only.
Reading further about the cordova version of browser platform it says that provides the cordova plugins for browser and set some flags in the browser, so basically sets the browser to be able to test the cordova plugins without an emulator nor device, so i think isn’t really useful aside of testing the cordova plugins, but that post was rather old, maybe it has changed since then.
If you are preparing a cross platform app and you also want to be able to host in a native browser you are able to still use plugins that are available for the browser if you do a build for it. For example if you were to use a social media plugin, the behavior on a device should be to redirect the user to the provider app, but if the user is not on a device they clearly won’t have the android/ios provider app installed.
Using the build browser commands you are able to have the correct behavior on a device as well as some behavior on a browser while only needing to maintain the plugin (so long as a browser version of the plugin was written).
You are still launching a dev server listening on port 8100 with ionic serve. I am trying to do something similar. I dont want the dev server to be started. I want to use nginx or apache to just serve up the www/index.html after the transpile and normal build steps are completed.
I’ve been reading announcements about Ionic 2 and PWAs on the ionic blog since April 2016. There should really be a note somewhere in the docs. Something that would mention what you have to do in order to create a proper build targeting browsers. Even though ionic platform add browser might not be 100% necessary, it would add extra value if it was at least mentioned next the the other ionic platform add commands (for example here).
It’s not looking like this is viable to me. I built an empty app for the browser platform and the js file had over 4MB in it, and a 500Kb CSS file. For an empty app! For an app that’s fine, but I’m not sure what happened to minification and tree shaking… this certainly doesn’t work for a prod web app.
I asked about this here:
…but no one seems to have an answer - I’m starting to think there is no answer
Well, I haven’t figured out how to add tree shaking yet, but you can always modify your webpack.config.js file to enable minification.by adding the webpack.optimize.UglifyJsPlugin plugin to the list.
I’m currently trying to figure out how I can hijack the whole process and do my own webpack, like I have with my other project.
I still can’t figure out tree shaking with webpack 2 though.
They are pushing for progressive web apps development so I believe this will be a priority on their next tasks. Right now their current tasks is to go to a finished product.
I believe the only thing you need is the built version using ionic serve (the www folder) and using your favorite web server just call index.html and it should work. That’s how I did it using nodejs.
Mostly everything work except everything cordova that is using the system (Android or iOS api).
You don’t need to add browser as a platform. That’s a confusing topic… it’s something you only need to do if you plan to use Cordova’s browser plugins. Here’s a quick rule of thumb:
If you successfully built you app without already adding the browser platform, you don’t need to include it at all. That’s because you add platforms at the beginning, as you start coding.
Also, by adding the --prod switch, even if you did add browser by accident, all of the unused libraries (Cordova included) will be removed from your production code.
After you run the build command, go to your www directory, and deploy the contents to your server.
I was told not to revive this topic, but I think it is important to say that running something like…
ionic build --minifyjs --minifycss --aot
… will reduce immensily the size of the final application. Also --prod should be used, but in my case some third party libraries were causing problems, so for some particular projects I don’t use it, but it is advisible.
