Using Ionic / Capaciter framework with Vanilla Javascript
The Ionic Framework documentation assumes you want to build your app with Angular, React or Vue and provides excellent tutorials to help you get started with those options. However, despite their docs providing code snippets with plain JS there is no ‘getting started’ guide for that. This blog post seeks to fill that gap!
Initial directory structure:
project-name/
www/
index.html
libs/
Before you begin, make project-name your current directory in a terminal/shell.
Install ionic
npm init npm i @ionic/core
Install capacitor, the tool that converts your web app to mobile apps.
npm i @capacitor/core npm i -D @capacitor/cli npx cap init npm i @capacitor/android @capacitor/ios
Copy the ionic framework code into www/libs so it can be distributed with your mobile app. If you ever use ‘npm up’ to get a new version of Ionic then you’ll need to repeat this step.
mkdir www/libs/ionic-core cp -r node_modules/@ionic/core/dist/* www/libs/ionic-core
In index.html include ionic by doing this:
<script type="module" src="libs/ionic-core/dist/ionic/ionic.esm.js"></script> <script nomodule src="libs/ionic-core/dist/ionic/ionic.js"></script> <link rel="stylesheet" href="libs/ionic-core/css/ionic.bundle.css"/>
Here’s a tiny testing ‘app’ you can use as an example:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="libs/ionic-core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="libs/ionic-core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="libs/ionic-core/css/ionic.bundle.css"/>
</head>
<body>
<ion-app>
<ion-content>
<ion-list>
<ion-item>
<ion-label>
Item
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>
No Lines Item
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>
Use capacitor to create your android and ios apps
npx cap open android
When you change your code in www, update the mobile apps using capacitor
npx cap sync
Run your app on the device using Android Studio or Xcode.
Deployment
When it comes time to publish what you’ve made to the app stores, you’re going to need another guide. Here are the two best that I’ve found:
Building and releasing to Google Play (Android)
Building and releasing to Apple App Store (iOS)
When releasing a new version of an Android app, update the version number (and versionCode, which must be an integer) in android/app/build.gradle.
