{"id":616,"date":"2018-11-04T06:05:49","date_gmt":"2018-11-04T06:05:49","guid":{"rendered":"http:\/\/fluentreports.com\/blog\/?p=616"},"modified":"2018-12-07T09:19:23","modified_gmt":"2018-12-07T09:19:23","slug":"the-tns-preview-feature","status":"publish","type":"post","link":"https:\/\/fluentreports.com\/blog\/?p=616","title":{"rendered":"The \"tns preview\" Feature"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The all new \"<strong>tns preview<\/strong>\" feature in NativeScript 5.0 is very useful for testing small local projects and\/or for new developers who want to try out NativeScript without installing all the build tools.&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, the preview app has some limitations, some of them can be worked around.&nbsp;&nbsp; The first is that you must have working internet as the link between the CLI to the preview app on the device is via cloud servers.&nbsp;&nbsp; Your app is transmitted via the internet to your device; and the device creates another channel that is transmitted back to the CLI the console so you can see any errors that occurred.&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your company has an issue with your app source code being transmitted out to the cloud; then make sure you don't use this feature.&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The second limitation is that only the plugins that come with the preview app can currently be used.&nbsp;&nbsp; These are the only compiled plugins you can use:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/@progress-nativechat\/nativescript-nativechat\">Progress-nativechat<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/kinvey-nativescript-sdk\">Kinvey<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-accelerometer\">ns-accelerometer<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-background-http\">ns-background-http<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-camera\">ns-camera<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-fresco\">ns-fresco<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-geolocation\">ns-geolocation<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-imagepicker\">ns-imagepicker<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-intl\">ns-intl<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-iqkeyboardmanager\">ns-iqkeyboardmanager<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-permissions\">ns-permissions<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-socialshare\">ns-socialshare<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-sqlite\">ns-sqlite<\/a><\/li><li><a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-ui-core\">ns-ui-core<\/a>, <a href=\"https:\/\/plugins.nativescript.rocks\/plugin\/nativescript-ui-listview\">ns-ui-listview<\/a>, etc (the rest of the ns-ui suite)<br><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, this is a decent list; but we currently have over 800 plugins available to NativeScript.&nbsp;&nbsp;&nbsp; A number of these additional plugins can be used in the preview app.&nbsp;&nbsp;&nbsp; There is two ways to work around the built in limitations of the Preview app.&nbsp; However, <strong>only if the plugin is 100% pure javascript source<\/strong> (*).&nbsp;&nbsp;&nbsp; If the plugin has no compiled code; then you can work around it easily by doing the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>npm i --save-dev nativescript-dev-webpack<\/li><li>tns plugin add &lt;plugin_name&gt;<\/li><li>tns preview --bundle<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">By using the --bundle command, it will use webpack to webpack your source code and then those 100% pure JS plugins will be transmitted to the app in one of the two bundles.&nbsp;&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The second way (if you don't want to use webpack, or webpack is breaking something) is to basically install the plugins into a different folder that will be synced via the preview function.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Change to your \"<strong>app\/<\/strong>\" directory (main directory that contains the app.js\/app.ts file)<br><\/li><li><strong>npm i &lt;plugin_name&gt; --save<\/strong><\/li><li>In your source code do '<strong>var X = require(\"~\/node_modules\/plugin_name\");<\/strong>' &nbsp;&nbsp;&nbsp; (or you can use the <strong>import<\/strong> statement, you still have to use \"<strong>~\/node_modules<\/strong>\/\" to allow the javascript engine to be able to figure out where the plugin actually resides, since it isn't in the normal location.<br><br><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Again this technique will <strong>ONLY<\/strong> allow any 100% JavaScript plugins(*) to be used in NativeScript, anything that has a cocoapod, gradle, or jar\/aar file won't work. &nbsp;&nbsp; Everything inside the \"app\" directory is synced to the device, so these 100% JavaScript plugins will also be synced and then be usable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(*) - It is possible that a 100% JS plugin won't work on Android.&nbsp; Any plugins that actually requires the SBG (Static Binding Generator) to generate compiled Java code from the JS code can't work; as the Preview app has no ability to use any additional compiled code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The all new \"tns preview\" feature in NativeScript 5.0 is very useful for testing small local projects and\/or for new developers who want to try out NativeScript without installing all the build tools.&nbsp;&nbsp;&nbsp;&nbsp; However, the preview app has some limitations, some of them can be worked around.&nbsp;&nbsp; The first is that you must have working&hellip; <a class=\"more-link\" href=\"https:\/\/fluentreports.com\/blog\/?p=616\">Continue reading <span class=\"screen-reader-text\">The \"tns preview\" Feature<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[15],"tags":[119,16,120],"class_list":["post-616","post","type-post","status-publish","format-standard","hentry","category-nativescript","tag-cli","tag-nativescript","tag-preview","entry"],"_links":{"self":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=616"}],"version-history":[{"count":3,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/616\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/616\/revisions\/621"}],"wp:attachment":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}