Ionic 6 tutorial: Your First Application

Ionic enables you to develop cross-platform mobile apps for Android and iOS, as well as Progressive Web Apps, all from a single codebase. Using front-end web technologies and languages such as HTML, CSS, TypeScript, and JavaScript, you may target the most popular native platforms.

This article will teach you how to create your first Ionic 6 application, as well as the PWA and native versions. You'll be creating and working with your project using the most recent Ionic CLI.

The PWA version may be pushed to the web using your preferred server, as well as GitHub pages, GitLab, or Netlify.

Check out other tutorials:

Ionic 6 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server

Ionic 6 Tutorial: Building and Theming a Login & Register UI with Angular Forms

Ionic 6 React Tutorial: Build a Mobile App with Ionic 6, Axios and React

Prerequisites

To follow with this course, you need to have a few prerequisites:

• You need a development machine with Node.js and npm installed. You can download the latest versions from the official website,
• You need to have Git installed on your system because It will be used to deploy your source code to GitHub,
• A code editor or IDE for writing your code. We are using Visual Studio Code,

You also need to be familiar with:

• TypeScript (strongly recommended!),
• JavaScript,
• CSS and Sass,
• HTML.

Note: Please note that Node.js is only required to run the Ionic CLI but you don't need to be a Node.js developer to build Ionic 6 apps. For TypeScript, if you are already familiar with classical OOP languages such as Java or C++, you'll be able to quickly grasp the basics because many constructs are similar. Sass is a superset of CSS that provides programming language constructs like variables. You don't need to be a Sass guru to build Ionic 6 apps but some familiarity with Sass variables and how to use and set them is useful for theming your app.

That's all you need—let's get started!

Installing Ionic CLI 6 and Cordova

You'll begin your journey with Ionic 6 by installing the Ionic CLI from npm using the following command:

 $ npm install -g ionic cordova

Note: You might need to use sudo before your command in Linux (Debian-based systems) and macOS or a CMD with administrator access in Windows to be able to install npm packages globally. Alternatively, you can simply fix your npm permissions to allow to install packages globally without super user access.

Creating your Ionic 6 Project

After installing Ionic CLI 6, you can create a project using one simple command. In your terminal, run:

 $ ionic start ionic-first-app blank --type=angular

We are creating a project based on Angular (--type=angular), named myapp using the blank template.

Starting with Ionic 6, you can generate projects based on Angular, React or Vue so you need to specify the type of your project.

Note: Angular is the default, so even if you don't add --type=angular, an Angular-based project will be generated.

You can generate a project, based on various templates such as:

• blank,
• tabs,
• sidemenu, etc.

You can also just type:

$ ionic start

And interactively specify all those options when demanded by the CLI.

After generating the project's files and install the required dependencies, the Ionic CLI will prompt you if you want to “Install the free Ionic Appflow SDK and connect your app?”

Type y and press Enter.

So what's the Ionic Appflow SDK?

Ionic Appflow is a set of services built on top of Ionic which you can use to update your app instantly without going through the app store review process, package your apps in the cloud and monitor error etc.

We'll see later how we can use it to package your application in the cloud without actually needing to install Java, Android SDK for targeting Android apps or macOS and Xcode for iOS apps.

Note: Ionic allows you to do most development on the browser and even let mock Cordova plugins that need actual device features (like the Camera) but once you develop your application you will need to create native packages for your target platform. In the case of Android, you need to install Java and Android SDK. For iOS, you need a macOS with Xcode installed but thanks to Ionic Appflow services, you can skip these requirements by packaging your application in the cloud.

Serving your Ionic 6 Application

Thanks to Ionic and Ionic CLI, you can develop your application just like your develop front-end web apps (Like Angular apps for example) using a local development server and the browser. In your terminal run the following commands to serve your Ionic 6 application:

$ ionic start ionic-first-app blank
$ ionic serve

This will start a dev server that will be running at the localhost:8000 address and will automatically open your default browser and navigate to that address.

Note: Most development will be done on the browser and thanks to hot code reloading you can change your source code and all the changes will be pushed to the browser without the need to reload your app or re-start your server each time you change your code.

The Application we'll Be Building

In this course, we'll be building a simple task management application that you can use to manage your tasks. You'll learn to implement CRUD operations in your Ionic 6 application using the local storage and the browser's IndexedDB database.

In the next section we'll see detailed steps on how to create the task management application with Ionic/Angular v6.

• Date: 06 May 2022