Merge pull request #423 from cosentino/ionic-react-typeorm-example

Ionic react typeorm example

Author: jepiqueau

README.md

@@ -16,7 +16,7 @@
   <a href="https://www.npmjs.com/package/@capacitor-community/sqlite"><img src="https://img.shields.io/npm/dw/@capacitor-community/sqlite?style=flat-square" /></a>
   <a href="https://www.npmjs.com/package/@capacitor-community/sqlite"><img src="https://img.shields.io/npm/v/@capacitor-community/sqlite?style=flat-square" /></a>
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-<a href="#contributors-"><img src="https://img.shields.io/badge/all%20contributors-35-orange?style=flat-square" /></a>
+<a href="#contributors-"><img src="https://img.shields.io/badge/all%20contributors-36-orange?style=flat-square" /></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 </p>
 
@@ -279,6 +279,10 @@ npm install --save [email protected]
 
 - [react-vite-sqlite-app](https://github.com/jepiqueau/react-vite-sqlite-app)
 
+### Ionic/React Capacitor SQLite + TypeORM Example App
+
+- [capacitor-sqlite-react-typeorm-app](https://github.com/cosentino/capacitor-sqlite-react-typeorm-app)
+
 ### Ionic/Vue
 
 - [Ionic/Vue Usage Documentation](https://github.com/capacitor-community/sqlite/blob/master/docs/Ionic-Vue-Usage.md)
@@ -352,6 +356,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <a href="https://github.com/folsze" title="folsze"><img src="https://github.com/folsze.png?size=100" width="50" height="50" /></a>
   <a href="https://github.com/pranav-singhal" title="pranav-singhal"><img src="https://github.com/pranav-singhal.png?size=100" width="50" height="50" /></a>
   <a href="https://github.com/beligatclement" title="beligatclement"><img src="https://github.com/beligatclement.png?size=100" width="50" height="50" /></a>
+  <a href="https://github.com/cosentino" title="cosentino"><img src="https://avatars.githubusercontent.com/u/376903?s=48&v=4" width="50" height="50" /></a>
 </p>
 
 

docs/TypeORM-Usage.md

@@ -72,7 +72,7 @@ module.exports = {
 
 ## Ionic/Angular app
 
-An example of a Ionic/Vue app has been developed https://github.com/jepiqueau/ionic-sqlite-typeorm-app demonstrating the use of TypeORM with migrations. The migration files have been created manually, not using the TypeORM cli ( generate, create ). If one find the way of using the TypeORM cli he or she will be welcome to make a PR to this documentation and make a PR to the application.
+An example of a Ionic/Angular app has been developed https://github.com/jepiqueau/ionic-sqlite-typeorm-app demonstrating the use of TypeORM with migrations. The migration files have been created manually, not using the TypeORM cli ( generate, create ). If one find the way of using the TypeORM cli he or she will be welcome to make a PR to this documentation and make a PR to the application.
 
 ### Requirements
 
@@ -153,4 +153,118 @@ An example of a Ionic/Vue app has been developed https://github.com/jepiqueau/io
         },
     ```
 
+## Ionic/React app
+
+An example of a Ionic/React app has been developed https://github.com/cosentino/capacitor-sqlite-react-typeorm-app demonstrating the use of TypeORM with migrations. The migration files have been created manually, not using the TypeORM cli ( generate, create ). If one find the way of using the TypeORM cli he or she will be welcome to make a PR to this documentation and make a PR to the application.
+
+### Requirements
+
+Since Create React App does not allow to tweek the react project compilation as required by TypeORM.
+We thus need to replace react-script with a tool such as [CRACO](https://craco.js.org/) and then override the default configurations (note: ejecting CRA is a viable solution).
+CRACO will allow us to customize the default CRA Webpack configuration.
+
+#### 1. Install the latest version of the package from npm as a dev dependency
+
+```bash
+npm i -D @craco/craco craco-swc
+```
+
+#### 2. Create a CRACO configuration file in your project's root directory and configure
+
+Create the files craco.config.js and .swcrc the files in the project root.
+The following will tell CRACO to:
+
+- force the minimizer (Terser) settings "keep_classnames" and "keep_fnames" to true
+- use SWC instead of Babel as transpiler
+- configure SWC parser and tranformer so that uses "legacyDecorator" and "decoratorMetadata"
+
+craco.config.js:
+
+```js
+const CracoSwcPlugin = require('craco-swc');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoSwcPlugin, // see .swcrc for SWC configuration (that will replace Babel)
+    }, 
+    {
+      plugin: {
+        overrideWebpackConfig: ({ webpackConfig }) => {          
+          const terser = webpackConfig?.optimization?.minimizer?.find(x => x.options.minimizer);
+          if (terser) {
+            terser.options.minimizer.options = {
+              ...terser.options.minimizer.options,
+              keep_classnames: true,
+              keep_fnames: true,
+            }
+          }
+          return webpackConfig;
+        }
+      }
+    }
+  ],
+};
+```
+
+.swcrc:
+
+```json
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "externalHelpers": true,
+    "target": "es5",
+    "preserveAllComments": true,
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dynamicImport": true,
+      "decorators": true
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    }
+  }
+}
+```
+
+#### 3. Update build commands to use craco CLI
+
+In particular in the :
+
+- Update existing calls to react-scripts in the scripts section of your package.json to use the craco CLI.
+- Override the ionic build​ command to use craco cli (see [https://ionicframework.com/docs/cli/configuration#overriding-the-build]).
+
+```json
+"scripts": {
+  "start": "npm run copysqlwasm && craco start",
+  "build": "npm run copysqlwasm && craco build",  
+  "copysqlwasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm public/assets",
+  "ionic:build": "npm run build",
+  "ionic:serve": "npm run start"
+},
+```
+
+#### 4. Add the following to tsconfig.json
+
+```json
+  "strictPropertyInitialization": false,
+  "experimentalDecorators": true,
+  "emitDecoratorMetadata": true,
+```
+
+#### 5. Install reflect-metadata package
+
+```bash
+npm i reflect-metadata
+```
+
+#### 6. import 'reflect-metadata' once, before any typeorm entity import, for example add the following to the ./src/index.tsx
+
+```ts
+import "reflect-metadata";
+import React from 'react';  
+```