Merge pull request #12 from nextlevelshit/master

Added development mode for running app in browser with sql.js
typeorm · Feb 27, 2018 · df450fc · df450fc
2 parents 0e18990 + 28447ce
commit df450fc
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -5,11 +5,15 @@ This project demonstrates how that would work.
 ## TypeORM >= 0.1.7
 To support webpack builds outside of Ionic we had to remove the automatic selection of the correct TypeORM version (the `typeorm` package comes with a Node and a browser version). In order to keep using TypeORM with Ionic you have to create a custom `webpack.config.js` file. This example contains one that is identical to the one Ionic uses when no config file is specified but adds the `NormalModuleReplacementPlugin` to select the correct version.
 If you already have a custom webpack config file you have to add these lines to your plugins (for both development and production):
+
 ```js
 plugins: [
   ...,
   new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
     result.request = result.request.replace(/typeorm/, "typeorm/browser");
+  }),
+  new webpack.ProvidePlugin({
+    'window.SQL': 'sql.js/js/sql.js'
   })
 ]
 ```
@@ -20,26 +24,71 @@ If you don't use a custom wepack config, copy the one from this example and add
 }
 ``` 
 
-### How to run this example
-1. Install the ionic and cordova cli: `npm install -g cordova ionic`
-2. Install all dependencies: `npm install`
-3. Add a platform: `ionic cordova platform add <ios | android>`
-4. Run the app: `ionic cordova run <ios | android>`. If you need help, you can read [ionic's guide](https://ionicframework.com/docs/intro/deploying/) for running an app on your device
+## Installation
+
+To run this example in production or development mode you have to make sure, `ionic` and `cordova` are installed globally on your machine. After that you can install all necessary dependencies for running this example.
+
+0. Check if `npm` is installed. Otherwise please [install `node.js` and `npm`](https://nodejs.org/en/download/package-manager/).
+```bash
+npm -v
+```
+
+1. Install ionic and cordova command line interface globally.
+```bash
+npm install -g cordova ionic
+```
+
+2. Install all dependencies listed in [`package.json`](/package.json#L15-L47).
+```bash
+npm install
+```
+
+### Run app in development mode
+3. Run the app in your browser:
+```bash
+ionic serve
+```
+
+### Run app in production mode
+3. Add an iOS or Android platform to your project: 
+```bash
+ionic cordova platform add ios 
+# or 
+ionic cordova platform add android
+```
+
+4. Run the app on your device:
+```bash
+ionic cordova run ios
+# or
+ionic cordova run android
+```
+
+*For further information please read [ionic's deployment guide](https://ionicframework.com/docs/intro/deploying/).*
+
 
 ![screenshot](./screenshot.png)
 
 ### Using TypeORM in your own app
 1. Install the plugin: `ionic cordova plugin add cordova-sqlite-storage --save`
+
 2. Install TypeORM: `npm install typeorm --save`
+
 3. Install node.js-Types: `npm install @types/node --save-dev`
+
 4. Add `"typeRoots": ["node_modules/@types"]` to your `tsconfig.json` under `compilerOptions`
+
 5. Create a custom webpack config file like the one [included in this project](config/webpack.config.js) to use the correct TypeORM version and add the config file to your [`package.json`](package.json#L12-14) (Required with TypeORM >= 0.1.7)
 
 ### Limitations to TypeORM when using production builds
-Since Ionic make a lot of optimizations when building for productions, the following limitations occur
+
+Since Ionic make a lot of optimizations while building for production, the following limitations will occur:
+
 1. Entities have to be marked with the table name (eg `@Entity('table_name')`)
-2. `getRepository()` has to be called with the name of the entity instead of the class (eg `getRepository('post') as Repository<Post>`)
-2. Date fields aren't supported
+
+2. `getRepository()` has to be called with the name of the entity instead of the class (*eg `getRepository('post') as Repository<Post>`*)
+
+3. Date fields are **not supported**:
 ```ts
 @Column()
 birthdate: Date;

diff --git a/config.xml b/config.xml
@@ -81,12 +81,12 @@
         <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
         <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
     </platform>
-    <engine name="android" spec="^6.3.0" />
+    <engine name="android" spec="^6.4.0" />
     <engine name="ios" spec="^4.5.0" />
-    <plugin name="cordova-plugin-device" spec="^1.1.4" />
-    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
-    <plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
-    <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
-    <plugin name="cordova-sqlite-storage" spec="^2.0.4" />
+    <plugin name="cordova-plugin-device" spec="^1.1.7" />
+    <plugin name="cordova-plugin-splashscreen" spec="^4.1.0" />
+    <plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
+    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
+    <plugin name="cordova-sqlite-storage" spec="^2.2.1" />
     <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
 </widget>
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -95,6 +95,9 @@ var devConfig = {
     ionicWebpackFactory.getCommonChunksPlugin(),
     new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
       result.request = result.request.replace(/typeorm/, "typeorm/browser");
+    }),
+    new webpack.ProvidePlugin({
+      'window.SQL': 'sql.js/js/sql.js'
     })
   ],
 
@@ -145,7 +148,6 @@ var prodConfig = {
   }
 };
 
-
 module.exports = {
   dev: devConfig,
   prod: prodConfig

diff --git a/package.json b/package.json
@@ -1,63 +1,64 @@
 {
-  "name": "ionic-example",
-  "version": "1.0.0",
-  "author": "Daniel Lang",
-  "scripts": {
-    "clean": "ionic-app-scripts clean",
-    "build": "ionic-app-scripts build",
-    "lint": "ionic-app-scripts lint",
-    "ionic:build": "ionic-app-scripts build",
-    "ionic:serve": "ionic-app-scripts serve"
-  },
-  "config": {
-    "ionic_webpack": "./config/webpack.config.js"
-  },
-  "dependencies": {
-    "@angular/common": "4.4.3",
-    "@angular/compiler": "4.4.3",
-    "@angular/compiler-cli": "4.4.3",
-    "@angular/core": "4.4.3",
-    "@angular/forms": "4.4.3",
-    "@angular/http": "4.4.3",
-    "@angular/platform-browser": "4.4.3",
-    "@angular/platform-browser-dynamic": "4.4.3",
-    "@ionic-native/core": "4.3.0",
-    "@ionic-native/splash-screen": "4.3.0",
-    "@ionic-native/status-bar": "4.3.0",
-    "@ionic/storage": "2.0.1",
-    "cordova-android": "^6.3.0",
-    "cordova-ios": "^4.5.0",
-    "cordova-plugin-device": "^1.1.4",
-    "cordova-plugin-splashscreen": "^4.0.3",
-    "cordova-plugin-statusbar": "^2.2.2",
-    "cordova-plugin-whitelist": "^1.3.1",
-    "cordova-sqlite-storage": "^2.0.4",
-    "ionic-angular": "3.7.0",
-    "ionic-plugin-keyboard": "^2.2.1",
-    "ionicons": "3.0.0",
-    "rxjs": "5.4.3",
-    "sw-toolbox": "3.6.0",
-    "typeorm": "0.1.6",
-    "zone.js": "0.8.17"
-  },
-  "devDependencies": {
-    "@ionic/app-scripts": "^3.0.0",
-    "@types/node": "^8.0.31",
-    "typescript": "2.3.4"
-  },
-  "description": "An Ionic project",
-  "cordova": {
-    "plugins": {
-      "cordova-plugin-device": {},
-      "cordova-plugin-splashscreen": {},
-      "cordova-plugin-statusbar": {},
-      "cordova-plugin-whitelist": {},
-      "ionic-plugin-keyboard": {},
-      "cordova-sqlite-storage": {}
+    "name": "ionic-example",
+    "version": "1.0.0",
+    "author": "Daniel Lang",
+    "scripts": {
+        "clean": "ionic-app-scripts clean",
+        "build": "ionic-app-scripts build",
+        "lint": "ionic-app-scripts lint",
+        "ionic:build": "ionic-app-scripts build",
+        "ionic:serve": "ionic-app-scripts serve"
     },
-    "platforms": [
-      "android",
-      "ios"
-    ]
-  }
+    "config": {
+        "ionic_webpack": "./config/webpack.config.js"
+    },
+    "dependencies": {
+        "@angular/common": "4.4.3",
+        "@angular/compiler": "4.4.3",
+        "@angular/compiler-cli": "4.4.3",
+        "@angular/core": "4.4.3",
+        "@angular/forms": "4.4.3",
+        "@angular/http": "4.4.3",
+        "@angular/platform-browser": "4.4.3",
+        "@angular/platform-browser-dynamic": "4.4.3",
+        "@ionic-native/core": "4.3.0",
+        "@ionic-native/splash-screen": "4.3.0",
+        "@ionic-native/status-bar": "4.3.0",
+        "@ionic/storage": "2.0.1",
+        "cordova-android": "^6.4.0",
+        "cordova-ios": "^4.5.0",
+        "cordova-plugin-device": "^1.1.7",
+        "cordova-plugin-splashscreen": "^4.1.0",
+        "cordova-plugin-statusbar": "^2.4.1",
+        "cordova-plugin-whitelist": "^1.3.3",
+        "cordova-sqlite-storage": "^2.2.1",
+        "ionic-angular": "3.7.0",
+        "ionic-plugin-keyboard": "^2.2.1",
+        "ionicons": "3.0.0",
+        "rxjs": "5.4.3",
+        "sw-toolbox": "3.6.0",
+        "typeorm": "0.1.6",
+        "zone.js": "0.8.17"
+    },
+    "devDependencies": {
+        "@ionic/app-scripts": "^3.0.0",
+        "@types/node": "^8.0.31",
+        "sql.js": "^0.5.0",
+        "typescript": "2.3.4"
+    },
+    "description": "An Ionic project",
+    "cordova": {
+        "plugins": {
+            "cordova-plugin-device": {},
+            "cordova-plugin-splashscreen": {},
+            "cordova-plugin-statusbar": {},
+            "cordova-plugin-whitelist": {},
+            "ionic-plugin-keyboard": {},
+            "cordova-sqlite-storage": {}
+        },
+        "platforms": [
+            "android",
+            "ios"
+        ]
+    }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -14,7 +14,7 @@ import { Post } from '../entities/post';
   templateUrl: 'app.html'
 })
 export class MyApp {
-  rootPage:any;
+  rootPage: any;
 
   constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
     platform.ready().then(async () => {
@@ -23,18 +23,37 @@ export class MyApp {
       statusBar.styleDefault();
       splashScreen.hide();
 
-      await createConnection({
-        type: 'cordova',
-        database: 'test',
-        location: 'default',
-        logging: ['error', 'query', 'schema'],
-        synchronize: true,
-        entities: [
-          Author,
-          Category,
-          Post
-        ]
-      });
+      // Depending on the machine the app is running on, configure
+      // different database connections
+      if(platform.is('cordova')) {
+        // Running on device or emulator
+        await createConnection({
+          type: 'cordova',
+          database: 'test',
+          location: 'default',
+          logging: ['error', 'query', 'schema'],
+          synchronize: true,
+          entities: [
+            Author,
+            Category,
+            Post
+          ]
+        });
+      } else {
+        // Running app in browser
+        await createConnection({
+          type: 'sqljs',
+          autoSave: true,
+          location: 'browser',
+          logging: ['error', 'query', 'schema'],
+          synchronize: true,
+          entities: [
+            Author,
+            Category,
+            Post
+          ]
+        });
+      }
 
       this.rootPage = HomePage;
     });