Skip to content

Example Ionic v2 project

Lorenzo Pichilli edited this page Mar 11, 2018 · 6 revisions

Choose Ionic v2 from the list showed here (for this type of project, I advice you to install the TypeScript plugin in order to work with typescript files, because Flow wont work on this kind of files). After choosing the project path and your ionic CLI custom path (ionic is the default value used), you will have something like this view:

Note for Windows: When you will create these kind of projects, you will see the Windows Command Line showing up. Don't close it until it finishes the creation process for your project.

I'm choosing the blank template and the integration with Cordova, so I will get something like this:

At the end of the process, Sublime Text will open your new project.

As you can see, in the .je-project-settings there is another setting file: ionicv2_settings.json, that contains:

{
  "cli_custom_path": "ionic", 
  "working_directory": "/Users/lorenzo/Desktop/project_test", 
  "platform_prepare_options": {}, 
  "platform_emulate_options": {
    "debug": {}, 
    "release": {}
  }, 
  "platform_compile_options": {
    "debug": {}, 
    "release": {}
  }, 
  "platform_build_options": {
    "debug": {}, 
    "release": {}
  }, 
  "platform_run_options": {
    "debug": {}, 
    "release": {}
  }, 
  "serve_options": []
}

"platform_prepare_options" and the "debug" "release" keys of "platform_emulate_options", "platform_compile_options", "platform_build_options", "platform_run_options" could contain custom option relative a specific platform (ios, android, firefoxos, blackberry10, osx, etc.), for example:

{
  "cli_custom_path": "ionic", 
  "working_directory": "/Users/lorenzo/Desktop/project_test", 
  "platform_prepare_options": {
    "ios": ["--no-build"],
    "android": ["--minifyjs", "--minifycss"]
  }, 
  "platform_emulate_options": {
    "debug": {}, 
    "release": {}
  }, 
  "platform_compile_options": {
    "debug": {}, 
    "release": {}
  }, 
  "platform_build_options": {
    "debug": {
      "ios": ["--buildConfig"],
      "android": ["--device", "--optimizejs"]
    }, 
    "release": {
      "ios": ["--prod", "--", "--developmentTeam=\"ABCD\"", "--codeSignIdentity=\"iPhone Developer\"", "--packageType=\"app-store\""],
      "android": ["--prod", "--", "--", "--minSdkVersion=21", "--keystore=filename.keystore", "--alias=myalias"]
    }
  }, 
  "platform_run_options": {
    "debug": {
      "ios": ["--livereload", "--consolelogs", "--target=\"iPhone-6, 11.2\""],
      "android": ["--livereload", "--consolelogs"]
    }, 
    "release": {
      "ios": ["--livereload", "--consolelogs", "--target=\"iPhone-6, 11.2\""],
      "android": ["--livereload", "--consolelogs"]
    }
  }, 
  "serve_options": ["-c", "--browser", "firefox"]
}
  • "cli_custom_path": is the custom path for ionic cli used by the plugin when calling its commands
  • "working_directory": is the working directory of the ionic cli
  • "platform_prepare_options": contains custom parameters that must be appended every time when calling the prepare command.
  • "platform_emulate_options": contains custom parameters that must be appended every time when calling the emulate command.
  • "platform_compile_options": contains custom parameters that must be appended every time when calling the compile command.
  • "platform_build_options": contains custom parameters that must be appended every time when calling the build command.
  • "platform_run_options": contains custom parameters that must be appended every time when calling the run command.
  • "serve_options": contains custom parameters that must be appended every time when calling the serve command.

These options will be used when you click the menu options that offers Ionic v2 menu, under the Tools menu:

For example, by clicking the "Run" > "Debug" menu option and using the "platform_run_options" setted before, before execute the command, we will prompt to insert the platform requested:

then it will execute the command ionic cordova run ios --debug --livereload --consolelogs --target="iPhone-6, 11.2", so we will get something like this:

Note for Windows: the plugin will open the Windows Command Line with the command (and its arguments) that need to be executed.

In this way you will be able to code and monitor in real-time and in the same view your ionic application:

This example is similar for Ionic v1 and Cordova projects.