DEV Community

Steve Mak
Steve Mak

Posted on

Ionic

Quick Start

For full documentation, please visit to the official website:

CLI

https://ionicframework.com/docs/cli/

Capacitor

https://capacitor.ionicframework.com/docs/

Native

https://ionicframework.com/docs/native

CLI

Install/Update Ionic as global CLI

npm install -g ionic
Enter fullscreen mode Exit fullscreen mode

New project

ionic start myApp
Enter fullscreen mode Exit fullscreen mode

Link project to Ionic AppFlow

ionic link
Enter fullscreen mode Exit fullscreen mode

Preview in web browser

ionic serve
Enter fullscreen mode Exit fullscreen mode

Build web assets and prepare your app for any platform targets

ionic build
Enter fullscreen mode Exit fullscreen mode

Add a native platform to your Ionic project

ionic capacitor add android
ionic capacitor add ios
Enter fullscreen mode Exit fullscreen mode

Open the project in Xcode

ionic capacitor open ios
Enter fullscreen mode Exit fullscreen mode

Sync web assets folder to ios/android folder

ionic capacitor copy ios
ionic capacitor copy android
Enter fullscreen mode Exit fullscreen mode

Live reload with capacitor

ionic capacitor run ios -l --external
ionic capacitor run android -l
Enter fullscreen mode Exit fullscreen mode

Install native plugin

// Install Core library (once per project)
npm install @ionic-native/core --save

// Install Ionic Native TypeScript wrapper
npm install @ionic-native/barcode-scanner --save

// Install Cordova plugin
npm install phonegap-plugin-barcodescanner --save

// Update native platform project(s) to include newly added plugin
ionic cap sync
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay