ATTENTION: Upcoming Ionic 2 Starter Changes

[tim]

Hello Ionites! Just want to give the community a heads up about changes that are going to be happening to Ionic 2 projects. None of these have happened yet, but we want to give everyone a word of warning before everything breaks and the world ends.

• This has been done The first one will be moving from the ionic-framework package name to ionic-angular. We will still publish ionic-framework for the next release, but the starters will move to ionic-angular once the CLI has been updated to support it. THIS WILL BREAK ALL THE THINGS, so if you’re having issues please update your CLI to the latest beta: npm install -g ionic@beta.

• This has been done We will be moving the build (transpiling, bundling, Sass compilation) out of the CLI into a gulpfile. Everything will Just Work by default, but it will now be much easier to extend your build.

• This has been done We will most likely be moving away from webpack as the default bundler in favor of Browserify. Webpack fans, don’t fret, with the build being Gulp based, using webpack is as easy as swapping out the bundle task (jspm/systemJS we got you too ) . Eventually, this will be configurable.

We love you and love your feedback, so let us know if you have any questions or concerns!

[luchillo17]

Hi, i’m really interested in knowing what drives the decision to change Webpack in favour of Browserify, for the ones like me that has customized the build process of webpack with a few plugins for minification and deduplication what would be the benefit of Browerify instead of Webpack?

[tim]

The move to Browserify is mostly for new users, as the learning curve of webpack is fairly high. If you have a highly customized webpack build and feel comfortable using the tool I would suggest sticking with it.

Both tools are great and are mainly a matter of personal preference. Browserify is good for people who prefer code over configuration (similar to Gulp vs Grunt) and has a very similar workflow to using Gulp. Webpack can do pretty much anything you’d ever need to do for an app, and is extremely powerful, but at the cost of having a fairly complicated configuration file, which can be daunting for new users.

Anecdotally, it took me about 15 minutes to get the conference app working with browserify, whereas working my way through wiring up webpack the first time took me over an hour. I have to say though, the more I use webpack, the more I appreciate everything it does, so I definitely don’t want to discourage people from using it.

I should add as well, that the startup time required for webpack is nonexistent for Ionic starters because they come with working webpack configs. In my case, I was writing one from scratch

We want Ionic to make app development as easy and straightforward as possible, and webpack, although quite powerful, doesn’t align as well with that goal at the moment.

For a nice discussion on both tools, I’d recommend listening to the React Podcast on the them: http://reactpodcast.com/2015/06/webpack-vs-browserify/.

[danielbertini]

Hello Houston i have a problem “Failed at the ionic@2.0.0-beta.18 postinstall script ‘node lib/tasks/postinstall’.” and i have node and npm updated.

[richardshergold]

Thanks for the heads up Tim.

[berchik]

Hi Tim, trying to update, getting this:
gyp ERR! configure error

Thanks.

[tim]

Uh oh, looks like a few people are having issues with postinstall scripts. If anyone is getting install errors, could you please open an issue at https://github.com/driftyco/ionic-cli/issues and we’ll see if we can get things sorted, thanks!

[danielbertini]

Hi @tim, open in https://github.com/driftyco/ionic-cli/issues/800.
Thnks!

[danbucholtz_brady]

Awesome - love that you guys gave advanced warning of this change. Can Ionitron tweet out a link to posts like this, too? I don’t visit the forums as often as I probably should.

Thanks,
Dan

[tim]

Yeah oversight on my part, I tweeted it but should have had the Ionic account do so as well, sorry about that!

[shawnwall]

If this means we can build without having to serve or generate, I’m very content

[ErikSchierboom]

I am very happy that you have chosen to replace Webpack with Browserify. Your reasoning is spot on, and exactly what I also encountered. Webpack is quite complex to get started with, whereas Browserify is much simpler.

[ksachdeva]

Hi Tim,

Looked at various starter projects and they still seems to use webpack.config. They do have your new gulpfile but it makes use of webpack.

Is there an example/starter that shows how to use browserify ?

Regards & thanks
Kapil

[boazc]

Hi Tim. Here’s some feedback

1. I just created a new project using ionic@2.0.0-beta.19 using: ionic start MyProject tabs --v2 --ts
2. I then tried ionic serve, and everything worked as expected.
3. At this point, I submitted and pushed my project skeleton, and pulled it from another git client, to make sure that everything will work for my team members.
4. In my new git client, I typed ionic serve, but this time I received a blank page, and a 404 for app.bundle.js in my console.
5. Looking at the project files, I’ve noticed that the www/build folder is missing (by design according to my .gitignore)

So the problem is that ionic serve doesn’t detect the missing build folder, and just opens the browser, instead of rebuilding my ts files etc.

Thanks,
Boaz

[ibasit]

I just wanted to double check with you.

I have manage to upgrade to beta.2 from older version. I’m still using webdev (I do know gulp), but I prefer to continue on using webdev.

Do I have to do any other changes regarding old webdev?

var path = require('path');


module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          'doTypeCheck': true
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  resolve: {
    root: [
      'app'
    ],
    alias: {
      'angular2': path.resolve('node_modules/angular2')
    },
    extensions: ["", ".js", ".ts"]
  }
};

[tim]

@ksachdeva

Hi Tim,

Looked at various starter projects and they still seems to use webpack.config. They do have your new gulpfile but it makes use of webpack.

Is there an example/starter that shows how to use browserify ?

Regards & thanksKapil

Browserify hasn’t been rolled out quite yet, we’re trying to change things incrementally so updating existing projects isn’t a total nightmare.

@boazc

Hi Tim. Here’s some feedback

I just created a new project using ionic@2.0.0-beta.19 using: ionic start MyProject tabs --v2 --ts

I then tried ionic serve, and everything worked as expected.
At this point, I submitted and pushed my project skeleton, and pulled it from another git client, to make sure that everything will work for my team members.
In my new git client, I typed ionic serve, but this time I received a blank page, and a 404 for app.bundle.js in my console.
Looking at the project files, I’ve noticed that the www/build folder is missing (by design according to my .gitignore)

So the problem is that ionic serve doesn’t detect the missing build folder, and just opens the browser, instead of rebuilding my ts files etc.

Thanks,Boaz

I would guess you need to run npm install, since the CLI checks for Ionic 2 in node_modules to know if it should build on serve or not (even if it did know, the build would fail because you hadn’t npm install’ed yet )

I feel like this is a pretty common problem (I do it all the time and then think I’ve broken the CLI) so if possible in the future the CLI should try and warn you if you need to run npm install.[quote=“ibasit, post:17, topic:45058”]
I just wanted to double check with you.

I have manage to upgrade to beta.2 from older version. I’m still using webdev (I do know gulp), but I prefer to continue on using webdev.

Do I have to do any other changes regarding old webdev?
[/quote]

Looks fine to me As a reference you can take a look at the current version of configuration files in the conference app.

[boazc]

npm install did fix the issue.

Thanks for the fast turnaround!

[jimitndiaye]

Would it be possible to override the build step via a configuration setting in ionic.config.js? That way if you’ve already got a set build script (e.g. webpack or npm scripts) you could provide the command in the config file that ionic-cli should use. ionic-cli could then ionic serve as normal. The defaults could be whatever you end up thinking should be default whether its gulp or browserify but It would nice to have fit into an existing build process.

[gwillson]

jimitndiaye - the gulp process specifies what is being done in the build from the way I
understand the current v2 build process steps. Gulp is really easy to configure and has its
own config file you should be able to update/ mod the build tool setup - ( browerify/webpack/ec2js…).