Ionic - Nextjs - Tailwind - Capacitor

Description

This is an Ionic - Nextjs - Tailwind - Capacitor App.

Reading List

• Project VSC Management (Mega Important!)
• Capacitor Workflow
• Using Cordova Plugins and Ionic Native

Stack Framework Layers

Requirements

• nodejs & npm
• Android on Mac & Windows requires Android Studio
• IOS on Mac requires Xcode 11 or above.
• IOS on Windows requires Ionic Appflow or other alternative IOS emulator.

Setup Part 1

There are 6 steps to follow to initialise this project.

OR Simply use command npm run build:all to run all the init steps. Once finished you can proceed to Setup Part 2

Open /capacitor-android/manifests/AndroidManifest.xml and make sure your XML config contains the following:

1. First we need the Ionic Client.

• npm install -g @ionic/cli
• npm install -g @ionic/cli native-run

2. Now lets install all the dependencies.

• npm i

3. We will then need to run the build which will create the .next build folder in or project.

• npm run build

4. This next step is crucial! We to export our build as static which can be run standalone without the need of a Node.js server. But also it creates the out directory that we need before we can include our native device builds.

• npm run export

5. Ok so now we can let Capacitor which platforms we want to build on.

• npx cap add ios
• npx cap add android

6. Time to rebuild nextjs, export it, and copy it to the native projects.

• npm run build
• npm run export
• npx cap copy

Setup Part 2

Now all is built we need to add some code manually.

Open file ./android/app/build.gradle, you will see something similiar to:

android {
   ...
   defaultConfig {
      ...
   }
}

Add the code below inside defaultConfig, If its not already there.

aaptOptions {
   // Without this Android apps just wont work... Read more:
   // https://github.com/ionic-team/capacitor/commit/c23d99315acea2f0894e5ff8a08dd42a867b2982
   ignoreAssetsPattern '!.svn:!.git:!.ds_store:!_.scc:._:!CVS:!thumbs.db:!picasa.ini:!*~'
}

Environments Commands

Development

• Web: npm run dev:web
• IOS (Mac): npm run dev:ios
• IOS (Windows): Ionic Appflow or alternative
• Android: npm run dev:android
• Web on LAN Network: npm run dev:network

Production

• Web: npm run start
• IOS: This will need to be handled via Xcode or Ionic Appflow.
• Android: This is handled in Android Studio apk release.

Important Notes

• When adding a new Capacitor plugin it is essential that you perform the following command: npx cap sync
• To use the Google Fit for Android, you need an OAuth 2.0 client ID for Android applications. Link1.
• Cordova Capacitor plugin variables. Link1
• Cordova Capacitor Deep Dive. Link1

Production

You MUST remove this from capacitor.config.json file

  "server": {
    "url": "http://192.168.0.44:3000"
  }

Production Reading:

• Next Web App:

• Capacitor IOS App:

• Capacitor Android App:

  // "server": { // "url": "http://localhost:2222", // "cleartext": true // }