add DEBUG_MODE env variable

Signed-off-by: Arnav Gupta <arnav@codingblocks.com>

Author: championswimmer

.gitignore

@@ -1,6 +1,9 @@
 # JetBrains project files
 .idea
 
+# VS Code
+.vscode
+
 # NPM
 node_modules
 

README.md

@@ -33,16 +33,33 @@ https://typescriptlang.org
 
 ## Usage
 
+### Installing and Running
+Here `<platform>` can be `android` or `ios`
+
 ``` bash
 # Install dependencies
 npm install
 
-# Build for production
-tns build <platform> --bundle
+# Build, watch for changes and run the application
+tns run <platform> --bundle
+```
+
+### Debugging vs Production
+
+During usual run, project runs with following settings -
+1. Code is **not** minified
+2. Vue.config.silent is false, so every component creation is logged
 
+```bash
 # Build, watch for changes and debug the application
 tns debug <platform> --bundle
+```
 
-# Build, watch for changes and run the application
-tns run <platform> --bundle
+To minify code, and prevent Vue logs -
+
+```bash
+# Build for production
+tns build <platform> --bundle --env.production
+
+tns run <platform> --bundle --env.production
 ```

app/App_Resources/Android/app.gradle

@@ -3,7 +3,7 @@
 android {
   defaultConfig {  
     generatedDensities = []
-    applicationId = "__PACKAGE__"
+    applicationId = "in.championswimmer.nsvuets"
   }
   aaptOptions {  
     additionalParameters "--no-version-vectors"  

app/main.js renamed to app/main.ts

@@ -1,13 +1,10 @@
 import Vue from 'nativescript-vue';
-
 import router from './router';
-
 import store from './store';
-
 import './styles.scss';
 
-// Uncomment the following to see NativeScript-Vue output logs
-//Vue.config.silent = false;
+// See NativeScript-Vue output logs in debug
+Vue.config.silent = !DEBUG_MODE
 
 new Vue({
 

app/store/index.ts

@@ -5,14 +5,11 @@ import counter from './modules/counter';
 
 Vue.use(Vuex);
 
-declare var process: {env: {[s: string]: string}};
-const debug = process.env.NODE_ENV !== 'production';
-
 const store = new Vuex.Store({
   modules: {
     counter,
   },
-  strict: debug,
+  strict: DEBUG_MODE,
 });
 
 Vue.prototype.$store = store;

package.json

@@ -45,4 +45,4 @@
     "webpack-bundle-analyzer": "~2.13.1",
     "webpack-cli": "^3.1.0"
   }
-}
+}

types/nativescript-vue.d.ts

@@ -0,0 +1 @@
+declare var DEBUG_MODE: boolean

webpack.config.js

@@ -38,23 +38,23 @@ module.exports = env => {
         // the nsconfig.json configuration file
         // when bundling with `tns run android|ios --bundle`.
         appPath = "app",
-            appResourcesPath = "app/App_Resources",
+        appResourcesPath = "app/App_Resources",
 
-            // You can provide the following flags when running 'tns run android|ios'
-            snapshot, // --env.snapshot
-            uglify, // --env.uglify
-            report, // --env.report
+        // You can provide the following flags when running 'tns run android|ios'
+        snapshot, // --env.snapshot
+        production, // --env.production
+        report, // --env.report
     } = env;
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
     const entryModule = nsWebpack.getEntryModule(appFullPath);
-    const entryPath = `.${sep}${entryModule}.js`;
+    const entryPath = `.${sep}${entryModule}.ts`;
     console.log(`Bundling application for entryPath ${entryPath}...`);
 
     const config = {
-        mode: uglify ? "production" : "development",
+        mode: production ? "production" : "development",
         context: appFullPath,
         watchOptions: {
             ignored: [
@@ -120,7 +120,7 @@ module.exports = env => {
                     },
                 },
             },
-            minimize: Boolean(uglify),
+            minimize: Boolean(production),
             minimizer: [
                 new UglifyJsPlugin({
                     uglifyOptions: {
@@ -200,6 +200,7 @@ module.exports = env => {
             // Define useful constants like TNS_WEBPACK
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
+                "DEBUG_MODE": !production
             }),
             // Remove all files from the out dir.
             new CleanWebpackPlugin([`${dist}/**/*`]),