Requirements
- Xcode
- Android studio
- node > v12
- npm
- react
IONIC CLI
-
npm install -g @ionic/cli
-
ionic start ionic-cli-app blank --type=react --capacitor
-
ionic serve (To start the development server of the Web Project)
-
Then update the
capacitor.config.json
andpackage.json
with app details and dependencies -
Remove package-lock.json and
npm install
-
npm install @ionic/cli --save-dev --save-exact
Fix Splash screen load time
To make sure that we do not display the splash screen more than we have to !!!
import {Plugins} from '@capacitor/core';` to `index.tsx`
const {SplashScreen} = Plugins;
ReactDOM.render(<App />, document.getElementById('root'));
SplashScreen.hide();
Build web project
- ionic build
IOS support
- ionic capacitor add ios
- ionic capacitor open ios
Android support
- ionic capacitor add android
- ionic capacitor open android
Capacitor
- ionic capacitor --help
$ ionic capacitor run
$ ionic capacitor run android
$ ionic capacitor run android -l --external (Choose this)
$ ionic capacitor run ios --livereload --external (Choose this)
$ ionic capacitor run ios --livereload-url=http://localhost:8100
TS
- Set
"strict": false
intsconfig.json
to disable the typescripts checks
More Project Templates
ionic start --list --type=react
Starters for @ionic/react (--type=react)
name | description
--------------------------------------------------------------------------------------
blank | A blank starter project
list | A starting project with a list
my-first-app | An example application that builds a camera with gallery
sidemenu | A starting project with a side menu with navigation in the content area
tabs | A starting project with a simple tabbed interface
conference | A kitchen-sink application that shows off all Ionic has to offer
To create the ionic app based off a template:
ionic start tabs-app tabs --type=react
ionic start conference-app conference --type=react