How to use the command 'ionic' (with examples)

The ‘ionic’ command is part of the Ionic framework, which is used to build hybrid mobile apps. This command is a CLI (command-line interface) tool that provides several useful functionalities for developing and testing apps. In this article, we will explore different use cases of the ‘ionic’ command and provide code examples, motivations, explanations, and example outputs for each use case.

Use case 1: Create a new project

Code:

ionic start

Motivation: Creating a new project is the first step in developing a mobile app using Ionic. This command sets up a new project with the necessary files and directory structure.

Explanation: The ‘start’ command is followed by the name of the project folder. If no name is provided, it will prompt the user to enter a name. Additionally, it provides options to choose from various starter templates.

Example output:

? What would you like to name your project? my-app
? What starter would you like to use: blank
...
✔ Downloading and extracting blank starter
...
Initializing git repository (Git CLI required)
...
[OK] Your app has been created successfully!
...
Next Steps:
- Go to your newly created project: cd my-app
- Build your app: ionic build
- Run your app in development mode: ionic serve
...

Use case 2: Start a local dev server for app dev/testing

Code:

ionic serve

Motivation: The ‘ionic serve’ command launches a local development server that serves the app in a web browser. This allows developers to instantly see the changes they make to the app in real-time during the development and testing process.

Explanation: This command is used to start a development server for the Ionic app. It can be run from the project directory and does not require any additional arguments. By default, it opens the app in the default web browser.

Example output:

> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser --no-livereload
[INFO] Development server running!
       Local: http://localhost:8100

Use case 3: Generate new app component, directive, page, pipe, provider or tabs

Code:

ionic g page

Motivation: Generating new app components, directives, pages, pipes, providers, or tabs helps developers quickly scaffold and create commonly used elements in the Ionic app. This saves time and effort in writing repetitive boilerplate code.

Explanation: The ‘g’ command is a shorthand for ‘generate’. It is followed by the specific object to be generated, such as ‘page’ in this example. The object name can be customized based on the requirements.

Example output:

[OK] Generated a page named 'my-page'!
...

Use case 4: Show versions of Ionic, Cordova, environment, etc.

Code:

ionic info

Motivation: Checking the versions of Ionic, Cordova, and other dependencies is crucial for troubleshooting and ensuring compatibility with the development environment. This command provides detailed information about the environment.

Explanation: The ‘info’ command provides an overview of various details, including Ionic, Cordova, Angular, Node.js, and platform-related information.

Example output:

Ionic CLI                     : 6.11.0
Ionic Framework               : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics    : 10.0.8
...

Use case 5: Run app on an Android/iOS device

Code:

ionic cordova run android|ios --device

Motivation: Running the app on actual Android or iOS devices allows developers to test the app’s performance and behavior in a real-world environment. This is essential for ensuring a smooth user experience.

Explanation: The ‘cordova’ command is used to interact with Cordova and run platform-specific commands. The ‘run’ command is followed by the target platform (‘android’ or ‘ios’) and the ‘–device’ flag indicates that the app should be run on a physical device instead of an emulator.

Example output:

...
BUILD SUCCESSFUL in 1m 32s
42 actionable tasks: 42 up-to-date
Built the following apk(s):
	/path/to/app/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Installing on device XXXXXXXX...
Launching 'org.ionic.exampleapp' on Device ID: XXXXXXXX
...

Use case 6: Check the health of an Ionic app

Code:

ionic doctor check

Motivation: Checking the health of an Ionic app ensures that it meets the necessary requirements and dependencies to function properly. This command can be used to identify and resolve any potential issues or conflicts.

Explanation: The ‘doctor’ command is used to run various checks on an existing Ionic app. The ‘check’ sub-command specifically checks for common issues and provides recommendations for fixing them.

Example output:

[INFO] Checking app-scripts version...
        √ Latest: 3.2.4
        √ Installed: 3.2.2
        √ A newer version of app-scripts is available (@ionic/app-scripts@3.2.4). To install it, run:
            npm install --save-dev @ionic/app-scripts@latest
...
[WARN] Check if the plugin uses the right versions for the entire project.
    - cordova-plugin-camera: 5.0.1 | 6.0.0-dev.20210930211122
...

Conclusion:

The ‘ionic’ command offers a wide range of functionalities to simplify and streamline the development and testing process of Ionic apps. By exploring the various use cases, developers can leverage the power of this command to create, run, and maintain high-quality hybrid mobile apps.