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.

 

Tags

top