Our project template to build awesome Ionic apps using Webpack and Typescript
We've been working on a custom build workflow using Webpack to compile our Ionic apps written in Typescript. After one year using and tweaking it, we decided to release it as a Yeoman generator: https://github.com/geeklearningio/generator-gl-ionic-webpack-typescript-seed
To install it, just get it using npm:
npm install -g generator-gl-ionic-webpack-typescript-seed
And run it using Yeoman:
yo gl-ionic-webpack-typescript-seed
Why another generator? And why Ionic 1?
One year ago, Ionic 2 and Angular 2 were really promising, but still in Beta; Webpack was starting to have some nice features and Typescript was in the "Hipster" phase. In this context, we had to make robust, reusable, production-ready hybrid apps. So, to avoid all the "it's still in Beta" problems, we decided to go with Ionic 1 and Angular 1, but went for Webpack and Typescript to have a cleaner and more reusable code.
We encountered many hiccups along the way and it took some time to have a workflow clean enough to make us all happy. So instead of keeping it to ourselves, we decided to share it to the community and make a Yeoman out of it.
We hope this workflow will help you or give you ideas to make yours better :)
Why this generator?
Because it does exactly what we wanted: fast development AND production-ready apps. And it took a while to get to this point with these new technologies.
Fast development
-
A fastcss Webpack configuration: At the time we made this configuration, the Webpack css and sass processors were really slow. So a simple change in the scss would make a full recompilation of the sass code (several seconds, as the Ionic sass code was in it) and a full reload of the page. That's why in dev mode, we use Gulp to handle the generated css. Result: the compilation is done in an instant and only the css file is reloaded => BLAZING FAST.
-
Linting on the fly: Every time you make changes to your code, TSLint will run and warn you about errors in your code. If these errors are still there at build time, the build will fail. Classic you will say, but still useful :)
-
Sass and Typescript sourcemaps: In dev mode ("npm run serve"), Gulp will generate the sourcemaps of the sass and Typescript files to help you debug your application.
-
App already in Typescript: It's kinda hard to get good articles explaining how to write Angular1 apps in Typescript. With this seed, you already have a good example of how to do so.
Production ready
-
Minification safe: No need to do annotations on Angular to avoid problems at minification. ng-annotate does it all for you.
-
Autoprefix new css rules: No need to prefix new css rules like "-webkit-", autoprefixer does it all for you.
-
Configure environments easily: Between the dev app and the production app, or even the preproduction app, some variables will change (Google Analytics id, API endpoints etc...). We use https://github.com/geeklearningio/gl-angular-configuration to do that. There is only one JS file at the root of www containing all these variables which are loaded before your angular app. So you can get them even at the Angular config stage. Visit the Github page of this project for more information.
Useful NPM scripts
In this project, you'll find 3 important NPM scripts:
-
serve: Creates a local instance of your app running on your default browser. Every time you change your code, the page is automatically reloaded. This task use the "fast-css" conf, so that modifying a sass file will instantly be visible on your webpage.
-
build:development: Build your development app to test it on a real device or an emulator. The sourcemaps are included and your code is not minified. Everything you need to debug your app like a champ.
-
build:production: Everything is minified and ready to go to production.
Conclusion
We hope that this template will help you start awesome Ionic projects in Typescript. One thing, though: we are not build configurations masters. So if you have any comments on this project, we would be more than pleased to discuss it with you. We kind of made this generator for that; getting interesting feedbacks from the community.
