Skip to content

guide ionic getting started

travis edited this page May 27, 2019 · 20 revisions

Ionic: Getting started

Ionic is a front-end focused framework which offers different tools for developing hybrid mobile applications. The web technologies used for this purpose are CSS, Sass, HTML5 and Typescript.

Why Ionic?

Ionic is used for developing hybrid applications, which means not having to rely on a specifyc IDE such as Android Studio or Xcode. Furthermore, development of native apps require learning different languages (Java/Kotlin for Android and Objective-C/Swift for Apple), with Ionic, a developer does not have to code the same functionality for multiple platforms, just use the adecuate libraries and components.

Basic environment set up

Install Ionic CLI

Although the devonfw distribution comes with and already installed Ionic CLI, here are the steps to install it. The instalation of Ionic is easy, just one command has to be written:

npm install -g ionic

Update Ionic CLI

To update the installed version of the CLI run:

npm install -g ionic@latest

If the devonfw’s ionic CLI has to be updated, the steps are a little bit different:

  • open the devonfw bundled console.

  • cd [devonfw_dist_folder]

  • cd software/nodejs

  • npm uninstall ionic --no-save

  • npm install ionic@latest --no-save

devonfw’s Ionic CLI uptaded

Basic proyect set up

The set up of an ionic application is pretty inmediate and can be done in one line:

ionic start <name> <template> --type=angular

  • ionic start: Command to create an app.

  • <name>: Name of the application.

  • <template>: Model of the application.

  • --type=angular: With this flag, the app produced will be based on angular.

To create an empty project, the following command can be used:

ionic start MyApp blank --type=angular

Ionic blank project

The image above shows the directory structure generated.

There are more templates available that can be seen with the command ionic start --list

List of ionic templates

The templates surrounded by red line are based on angular and comes with Ionic v4, while the others belong to earlier versions (before v4).

Clone this wiki locally