This is an Ionic - Nextjs - Tailwind - Capacitor App.
Stack Framework Layers
- 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.
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:
- First we need the Ionic Client.
npm install -g @ionic/cli
npm install -g @ionic/cli native-run
- Now lets install all the dependencies.
npm i
- We will then need to run the build which will create the .next build folder in or project.
npm run build
- 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
- Ok so now we can let Capacitor which platforms we want to build on.
npx cap add ios
npx cap add android
- Time to rebuild nextjs, export it, and copy it to the native projects.
npm run build
npm run export
npx cap copy
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:!*~'
}
- 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
- 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.
- 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
"server": {
"url": "http://192.168.0.44:3000"
}
-
// "server": { // "url": "http://localhost:2222", // "cleartext": true // }