Feat/capacitor

README.md

@@ -1,46 +1,153 @@
-# Getting Started with Create React App
+# **Convert a web app into a mobile app and deploy to app stores!**
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+**Will it be a native app? **No
 
-## Available Scripts
+**Can it be any website? **Yes
 
-In the project directory, you can run:
+**Is it easy to set up? **Yes
 
-### `npm start`
+**Does it work on IOS and Android? **Yes
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+**Do I have to upload to app stores to use it? **No, you can export as an .APK and share it
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+**Does it work with frontend frameworks like React, Nextjs etc?** Yes, anything that “builds” into a static folder.
 
-### `npm test`
+**What do I need to get started? **To preview the app in a native android/ios environment, you should have Android Studio and XCode simulators installed on your computer.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+**How does it work?** “Capacitor” is a wrapper around the web pages and displays it in a native ”web view”. The site is hosted locally from the device, so all the pages/files are inside the mobile app’s code, so no need to deploy it on a static hosting provider. You can have backend functionality too by making requests from the frontend.
 
-### `npm run build`
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## **How to get started?**
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+In your codebase, make sure you have a directory which contains the static files and an index.html in the root of the folder.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+If using React make sure to run “npm run build” to create a build directory. Same goes for Next.js
 
-### `npm run eject`
+The directory does not need to be called “build”, it can be anything e.g. “public” “dist” etc.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Also make sure your package.json (if you have one) the value for the “homepage” property is “./”
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+```
+"homepage": "./",
+```
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## Learn More
+Run the following commands in the root of your codebase.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+npm init @capacitor/app
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+npm i @capacitor/core
+
+npm i -D @capacitor/cli
+
+npx cap init
+
+npm i @capacitor/android @capacitor/ios
+
+**IMPORTANT:**
+
+**In the capacitor.config.ts file you need to specify the name of the folder where your static web files are. webDir should match the name, like “build” or “dist” whatever it’s called in your case. In the following example, the files are in a folder called “build”**
+
+
+```
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+appId: 'com.example.app',
+appName: 'hangman',
+webDir: 'build',
+server: {
+androidScheme: 'https',
+// url: "https://any-website-over-here.com"
+},
+};
+
+export default config;
+```
+
+
+**NOTE:**
+
+**The server object has a “url” property option which is really meant for running local servers, but it can theoretically be used to deploy any website instead of the files from the webDir. In this case, the app will load the website called “any-website-over-here”**
+
+**See [https://github.com/ionic-team/capacitor/discussions/4080](https://github.com/ionic-team/capacitor/discussions/4080) how some people do just use this option to wrap a pre-deployed website in a Capacitor app.**
+
+**But if you do it that way REMEMBER that it will require internet connection to use, whereas if it’s located within the app as a regular capacitor build then it’ll be able to load static pages offline too.**
+
+Then run these commands to add the android and ios projects
+
+npx cap add android
+
+npx cap add ios
+
+**NOTE:**
+
+**With ios you may encounter this error**
+
+**✖ Updating iOS native dependencies with pod install - failed!**
+
+**✖ update ios - failed!**
+
+**[error] [!] Unknown installation options: disable_input_output_paths.**
+
+**To fix this go into the ios/App/Podfile and remove the following from line 7**
+
+
+```
+, :disable_input_output_paths => true
+```
+
+
+**So it should look like this:**
+
+
+```
+require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
+
+platform :ios, '13.0'
+use_frameworks!
+
+# workaround to avoid Xcode caching of Pods that requires
+# Product -> Clean Build Folder after new Cordova plugins installed
+# Requires CocoaPods 1.6 or newer
+install! 'cocoapods'
+
+def capacitor_pods
+pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
+pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+
+end
+
+target 'App' do
+capacitor_pods
+# Add your Pods here
+end
+
+post_install do |installer|
+assertDeploymentTarget(installer)
+end
+```
+
+
+**Now when you run npx cap sync it should not throw any errors**
+
+** **
+
+Whenever you’ve made changes the the web project, make sure to run the following to update the android and ios projects too
+
+**npx cap sync**
+
+Now that you have the ios/android folders, let’s run them
+
+To run the android project, run 
+
+npx cap open android
+
+And for ios run \
+npx cap open ios
+
+You can then run the projects on a simulator from the UI, or you can run \
+npx cap run android
+
+To export the app as an APK, go to build -> Build APK. Then locate the test apk file, usually called “app-debug.apk”, which you can use to test. For production there is a bit of a longer process.

android/.gitignore

@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace "com.example.app"
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.example.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_17
+      targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile