65.9K
CodeProject is changing. Read more.
Home

Getting Started With Ionic 4 Cross Platform Android and IOS App

starIconstarIconstarIconstarIconstarIcon

5.00/5 (5 votes)

Nov 15, 2018

CPOL

1 min read

viewsIcon

6301

Starting with Ionic Framework

Let's Start

Use Window cmd/mac terminal OR Visual Studio code terminal.

Node Installation

Step 1: First update npm:

  • npm install -g npm stable

Step 2: Then update node:

  • npm install -g node OR npm install -g n

Step 3: After this, check version of node:

  • node --version OR node -v

Create Your First Ionic Project

Step 1: With Node and NPM setup, let’s install the Ionic and Cordova CLI.

  • npm install -g cordova ionic

Step 2: Once that’s done, create your first Ionic app:

  • ionic start helloWorld blank

Step 3: To run your app, cd into the directory that was created and then run the ionic serve command to test your app right in the browser!

  • cd directory | For Example: >cd c:\User\Ionic\helloWorld

Step 4: Recompile:

  • npm install --rebuild
  • npm install node-sass --rebuild
  • npm install @ionic/app-scripts@latest --save

Step 5: Run your app:

  • ionic serve

Generate Pipes, Components, Pages, Directives, Providers, and Tabs Command

  • ionic generate
  • ionic generate component
  • ionic generate directive
  • ionic generate page
  • ionic generate pipe
  • ionic generate provider
  • ionic generate tabs
  • ionic generate component foo
  • ionic generate page Login
  • ionic generate page Detail --no-module
  • ionic generate page About --constants
  • ionic generate pipe MyFilterPipe

Add the Platform and Build

For Ionic Android

Step 1: Add Android Platform

  • ionic cordova platform add android

Step 2: Build android(.apk)

  • ionic cordova run android --prod --release

OR:

  • ionic cordova build android --prod --release

For Ionic iOS

Step 1: Add ios Platform

  • ionic cordova platform add ios

Step 2: Build ios(.ipa)(apple mac required)

  • ionic cordova run ios --prod --release

OR:

  • ionic cordova build ios --prod --release

That's it - you're done!