Ionic adds a new State feature

This post is more than 2 years old.

To be fair, this may not be very new, I've been working with an alpha version of the Ionic CLI while I test push (and other stuff ;) so my version has been a bit out of sync. Today I switched from the alpha to the release version and discovered a cool new feature - State.

The State feature lets you quickly save and restore plugins and platforms for an Ionic project. By default, when you add a platform or a plugin, Ionic will store this information in the package.json file. Here is an example of adding a platform:

ionic1

(And as an aside - did you notice it added icons and splashscreens? Freaking awesome.) And here is adding a new plugin:

ionic2

When done, here is how package.json is updated:

{
  "name": "apr20-2",
  "version": "1.0.0",
  "description": "apr20-2: An Ionic project",
  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^1.3.3",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "org.apache.cordova.device",
    "org.apache.cordova.console",
    "com.ionic.keyboard",
    "org.apache.cordova.device-motion"
  ],
  "cordovaPlatforms": [
    "ios"
  ]
}

To skip this, you can use --nosave for both platform and plugin modifications. Now comes the cool part. To quickly load in plugins and platforms, you can simply do:

ionic state restore

And Ionic will add in the appropriate plugins and platforms. This will be incredibly useful for folks checking out your Ionic project from a source control repository.

You can also do:

ionic state save

To store the current platforms and plugins to the package.json. I would imagine you would use this feature if you used the --nosave option to test a plugin you weren't sure you wanted to actually keep around.

You may want to remove everything. You can do this with:

ionic state clear

But be aware this really, really does remove everything, including the default plugins Ionic always install. Finally, you can do:

ionic state reset

This will remove everything then bring back what you have specified in the package.json file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Ajay Gupta posted on 12/10/2015 at 4:10 AM

@Raymond: As part of every mobile CI build within Hudson running on a Mac mini, "ionic state restore" takes a lot of time for us (about 8-10 minutes). Is there a way it can cache the plugins somewhere and restore stuff from the cache first and only add/remove plugins that don't exist in the plugins directory to speed up the build time?

Comment 2 (In reply to #1) by Raymond Camden posted on 12/10/2015 at 2:41 PM

Hmm - you got me on that. Sorry but I have to punt. I'd ask this on the Ionic forums, and if you get a response, please let me know.

Comment 3 by sflomenb posted on 7/26/2016 at 1:46 PM

Does 'ionic state clear' alter the package.json file?

Comment 4 (In reply to #3) by Raymond Camden posted on 7/26/2016 at 2:32 PM

What happens when you try? :)

Comment 5 by LeRoy Gumede posted on 1/16/2017 at 1:21 PM

one would think cordova plugins gets installed when you run "npm install" but from experience it looks like it does not.

Comment 6 (In reply to #5) by Raymond Camden posted on 1/16/2017 at 1:47 PM

Why would you think that? They aren't listed under dependencies.

Comment 7 (In reply to #6) by LeRoy Gumede posted on 1/16/2017 at 1:57 PM

Your right (thumbsup)

Comment 8 by Claudio Viola posted on 1/30/2017 at 2:02 PM

Hello Raymond Camden
Is it normal that in the package json in cordovaPlugins the version number of plugins is not stored?
I see stored the number version only in the config xml like this
<plugin name="cordova-plugin-google-analytics" spec="~1.7.4"/>

"~1.7.4" For my opinion in this way it's not good...
Because when I'll install the plugin in the future ionic'll install the latest version e not the specific. So I'm thinking to remove this "~" from config.xml
Or if exsist I could store the number version of plugins in package.json

Comment 9 (In reply to #8) by Raymond Camden posted on 1/30/2017 at 3:38 PM

I honestly don't know. I don't think I've played with this for a while. I'd suggest filing a bug report (well, it may not be a bug, but it would be worthwhile to see if the *intent* was to store the version) on the Apache Cordova side.

Comment 10 by Ganesh Rajan posted on 6/21/2017 at 10:31 AM

Seems like this commands are outdated. I'm getting the below error when i try to save the state. "Unable to find command: state save"

Comment 11 (In reply to #10) by Raymond Camden posted on 6/21/2017 at 12:33 PM

Always check the dates of posts - this is over two years old now. :)