Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
Ionic, Stack Overflow

How to Launch an Ionic Web App – Where Should Ionic Server be Running?

In this StackOverflow question I answered how to launch an Ionic web app

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user bharat batra:

I am building an ionic app for prototyping purposes. For the first version I want it to simply be a web based app. I know how to run the app locally on my computer - I simply type ionic serve and the app runs. However, to actually have remote clients, I am not sure how to run this app. DO I need to have the ionic server running at a port on my main server, and then have the clients all make requests to that port on the server IP address? How do I actually do this?

My answer was simple:

You just take everything from your www folder and place it on your web server. That's all there is to it.

Say your web server address is bharat.com and say you placed the www folder in your web server root. In that case, your Ionic app will be visible at bharat.com/www

How to Launch an #Ionic Web App – Where Should Ionic Server be Running? https://t.co/A6iGuaOJ9w

— Nikola Brežnjak (@HitmanHR) May 3, 2016

Ionic, Stack Overflow

When is it appropriate to use ion-pane in Ionic Framework?

In this StackOverflow question I answered when it is appropriate to use ion-pane in Ionic Framework

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user qizzacious:

This is a simple enough question.

After taking a look at the documentation for ion-pane it states:

A simple container that fits content, with no side effects. Adds the ‘pane’ class to the element.

What does it mean when it states "no side effects"? What are the use cases for ion-pane?

My answer was:

Honestly, I never used ion-pane before, but this question intrigued me so I went searching. As it seems, and you can see on this Codepen: http://codepen.io/anon/pen/JGwJKv?editors=1010, if the content is too big (if you try to resize the browser window to very small) it will not show it. Opposed to the ion-content which will add scroll bars and allow you to use ion-refresher and some other options (tapping into scroll delegate, etc.).

So, to be honest, I never stumbled upon a need for such a use-case, so would probably never use ion-pane. The lacking documentation about it, kind of suggests the same...

When is it appropriate to use ion-pane in Ionic Framework? https://t.co/3o9LVRoJxc

— Nikola Brežnjak (@HitmanHR) April 26, 2016

Ionic, Stack Overflow

Showcasing Ionic Apps For a Portfolio Without Publishing Them to App Stores

In this StackOverflow question I answered how to showcase your Ionic apps for a portfolio without publishing them to App Stores

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user Jubl:

I have a few Ionic apps that I made that I want to add to my portfolio site for potential employers to check out. However, I would like to upload them somewhere so that when a visitor clicks on my link, it will take them to a website showcasing my app. I don't want to push my apps to the actual stores, but still make them publicly viewable. Is this possible to do with an Ionic application?

I understand that Ionic View exists, but I have to send out email permissions for people to try my app (from what I know). I'd rather my apps just be uploaded somewhere and be easily accessible through links.

My answer was:

Actually, with Ionic View you can just share its ID number (see the image below) and anyone with this number will be able to download your app (via Ionic View) without you having to send them the invitation.

Your second option, but maybe a bit harder to do is to host your application on your server. So, you would take all the content from the www folder and simply put it on your server in a certain folder and your app would then be accessible from the web as well. What I usually do is I create an iPhone image and create an iframe in which I then show the Ionic app. I won't go into details here, there are similar questions that cover this particular topic already.

Anyways, hope this helps, and clearly for the least effort, the Ionic View seems like the best option.

#Showcasing #Ionic Apps For a Portfolio Without Publishing Them to App Stores https://t.co/3npCjin5rG

— Nikola Brežnjak (@HitmanHR) April 23, 2016

Ionic, Stack Overflow

Cordova and Ionic SMS Receiver

In this StackOverflow question I answered why it isn't possible to read SMS in Ionic application which you want to deploy to Apple's App Store

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user aintno12u:

Good day, do you have any idea how to achieve this in ionic? I found tutorials for PhoneGap but that was 3 years ago and i dont know if it will work with my ionic app. The ng-cordova has only thishttp://ngcordova.com/docs/plugins/sms/ to send sms but not receive. I saw this also but i have no idea how to use it. https://github.com/floatinghotpot/cordova-plugin-sms/tree/master/docs. Please help. Ionic so new that it lacks tutorials.

My answer was:

In case you're trying to get this kind of application to the App Store, I have bad news for you.

As this answer states:

Simply two words from Apple: Not Possible

Cordova and Ionic #SMS Receiver https://t.co/jk58Gx4P0M

— Nikola Brežnjak (@HitmanHR) February 16, 2016

Ionic, Stack Overflow

Why doesn’t window.something throw an error?

In this StackOverflow question I asked why doesn't window.something throw an error

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I actually asked this question myself:

I'm using an AdMob plugin in my Ionic application, and one way, as you can see in the documentation, to test if the plugin is properly loaded is to do:

if(AdMob) {
    ///other config code...
}

Now, this works perfectly fine on a device. However, it doesn't work in the browser; it throws an error in the console log: AdMob is not defined.

I have found a solution to test the existence of plugin like this (without throwing an error in the console):

if (window.AdMob){...}

And I have seen this usage on multiple questions here on StackOverflow. However, I wasn't able to find an explanation to as why this doesn't throw an error.

I have a vague reasoning to as why this would be so, but I would really appreciate it if someone experienced could explain it in more detail.

edit: I made additional tests like this:

var a = "hi";
console.log(a); //shows "hi"
console.log(b); //throws an error that b is not defined

var c = {};
c.b = "hi again";
console.log(c.b); //shows "hi again" as expected

//and now for the grand finale
console.log(c.something);//doesn't throw an error, please explain to me in more detail why?

The answer by T.J. Crowder was:

I wasn't able to find an explanation to as why this doesn't throw an error.

In the first example, you're trying to read the value of a completely undefined identifier. In the second example, you're trying to read a property from an object that the object may not have.

Trying to read the value of an undefined identifier is a ReferenceError; the JavaScript engine has no idea what that identifer is. In contrast, trying to read the value of a property that the object doesn't have yields the value undefined.

It's just how the language is designed, where Brendan Eich drew the line: It's okay to read the value of a non-existant property from an object, but not okay to read the value of an undeclared identifier.

I should point out a third option: typeof. You're allowed to provide an undefined identifier as the operand to typeof:

if (typeof AdMob === "undefined")

That won't throw a ReferenceError even if AdMob is undeclared; instead, typeof will yield "undefined". (It will also yield "undefined' if AdMob is a declared identifier with the value undefined in it.)

In a comment on another answer, you said:

...it would just indeed help to see the exact official specification which confirms this.

That would be the ECMAScript specification, specifically §6.2.3.1 for throwing a ReferenceError on an unresolvable symbol, and §9.1.8 for returning undefined for a property that doesn't exist. But I should warnin you that the spec, especially this 6th edition spec, is very heavy going. 🙂

Why doesn’t #window.something throw an #error in @ionicframework? #javascript https://t.co/e0vMYiHJAU pic.twitter.com/lPHcStpDA5

— Nikola Brežnjak (@HitmanHR) February 11, 2016

NodeJS, Stack Overflow

Why am I getting Unexpected token ‘\u0000’ when using npm install -g package

In this StackOverflow question I answered what to do when you get an unexpected token '\u0000' error when using npm install -g to install some package.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user Bruce Whealton:

This is probably a Windows specific issue but I haven't found any information when googling this issue. I had been using ionic framework which relies on Cordova (or Phonegap). However, the problem is not specific to any of these packages. I see this error quite often. So, the error is when I run a command such as the following:

npm install -g cordova

However, I could substitute various other packages and get the same error. I'll paste the snippet (very brief) below of the error message. What is strange is that I had an ionic project working in that directory earlier. Then today it told me that ionic could not be found. My hunch is that this is a different issue than the main issue I am describing here.

I installed git bash so I do have a linux-like environment that I could try. I would just select Git Bash for a bash window with various bash commands. If there is an easier way to fix this for Windows users, please let me know. I have seen courses on Pluralsight where the instructors seem to be happily using npm with no problems. Also, when I use yeoman, I also at some point, in many cases, get the same error.
The error is

npm ERR! Failed to parse json
npm Unexpected token '\u0000' at 1:1
npm ERR!
npm ERR! ^
npm ERR! File: c:\Users\Bruce\AppData\Roaming\npm-cache\amdefine\1.0.0\package\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm
npm ERR! Tell the package author to fix their package.json file. JSON.parse.

Thanks in advance for any help/advice, Bruce

My answer was:

Via this question on SO it could be that you just have to do:

npm cache clean

But, also try the other methods suggested there like adding the registry option:

npm install <packagename> --registry http://registry.npmjs.org/.

Or, if you've been mingling with the package.json file by yourself, check if it's valid.

Why am I getting Unexpected token ‘u0000’ when using #npm install -g package #node https://t.co/mjvmpMKuAT pic.twitter.com/HlqJ5S7PZ5

— Nikola Brežnjak (@HitmanHR) February 9, 2016

Ionic, Stack Overflow

What do Yeoman Generators “really” add to Ionic Projects?

In this StackOverflow question I answered what do actually Yeoman Generators add to the Ionic projects.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user qizzacious:

I don't understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.

I don't see what the advantages are in using a yeomen generator in this case, this is.

I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn't already have or that cannot be easily added with a bower install.

It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.

My answer was:

True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don't you think?

That's why some people tend to create these generators - to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).

All in all, you don't have to use them, or stress about them. For instance, I personally don't use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they've evolved.

Don't hate, donate 😉 (Sure sure, I know you're not hating, the statement just seemed appropriate).

What do #Yeoman #Generators "really" add to #Ionic Projects? @ionicframework https://t.co/GIbcndBiIQ

— Nikola Brežnjak (@HitmanHR) February 2, 2016

Ionic, Stack Overflow

Ionic – how to handle when external api server is offline?

In this StackOverflow question I answered how to handle when external API server is offline.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #3 in the top All time answerers list.

I answered this question by user Rflujowa:

I'm writing a app in ionic. The app relies on external api's. I've made multiple functions to test the connection, to my own server, and my own server handles the api calls. My own server is needed for this because of ip-whitelistening.

All works well, but now i want to disable the application if the result from my own server is false. I make a call to test the connection everytime the app starts.

What is the best way to handle this with angular/ionic?

1 thought i had myself is to redirect to a landingpage, if no connection is available.

Any tips are welcome.

My answer was:

Yes, basically what you planned to do is OK.

So, just after your app loads up, check if the connection is available (you can read more about how to do that in my detailed post How to check network information change with Ionic framework), and if not then you can change the state to some page where it would clearly let the user know that "Currently the link to the server is not working" (or some better notification).

Also, probably you would want to put a refresh button on that page, so that one could click it and the whole availability process would be checked again (basically same as if someone restarted your app).

Hope this helps.

How to handle when external #API server is offline in @ionicframework? https://t.co/FSGt6AoXCQ

— Nikola Brežnjak (@HitmanHR) January 19, 2016

Ionic, Stack Overflow

I made it to the top of StackOverflow’s all time answerers list for Ionic tag

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow, and I tend to contribute regularly (am currently in the top 0.X%).

As you may know, I'm really into Ionic framework and am helping out on StackOverflow with the knowledge I gained so far with the framework.

Finally, I reached my goal and made it to the #1 position in the top All time answerers list, and finally, obtained my first "ionic" tag badge:

soIonicTag

See you at the golden badge 😉

I made it to the #top of #StackOverflow's all time answerers list for @ionicframework tag https://t.co/X8iR2gi7DD pic.twitter.com/awmvGnHljQ

— Nikola Brežnjak (@HitmanHR) January 14, 2016

Ionic, NodeJS, Stack Overflow

How to run Node.js server in Ionic mobile app?

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I'm a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I'm really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I'm currently #1 in the top All time answerers list.

I answered this question by user Shubham:

I am making an app using MEAN and ionic framework where nodejs is a middleware to connect to the database(mongoDb). I need to run the nodejs server using node server.js and the app using ionic serve. This is my server.js.

var express          = require('express'),
app              = express(),
bodyParser       = require('body-parser'),
mongoose         = require('mongoose'),
CohortController =require('./www/server/controller/CohortController');

mongoose.connect('mongodb://localhost:27017/persistent');

app.use(bodyParser());

app.get('/api/cohorts',CohortController.list);
app.post('/api/cohorts',CohortController.create);

app.listen(3000,function(){
console.log('Listening...');
})

Now this is my app.js. I use http://localhost:3000 to get the JSON.

app.controller('CohortController',['$scope','$resource',
  function($scope,$resource){
    var Cohort=$resource('http://localhost:3000/api/cohorts');
    Cohort.query(function(results){
      $scope.cohorts=results;
    });
    $scope.cohorts=[];

    $scope.createCohort= function () {
      var cohort=new Cohort();
      cohort.name=$scope.CohortName;
      cohort.id=$scope.CohortId;
      cohort.$save(function(result){
        $scope.cohorts.push(result);
        $scope.CohortName='';
        $scope.CohortId='';
      });
    }
  }]);

How can I run the node server when I convert it into a mobile application? How the application will use the API?

My answer was:

You will have to have your Node.js app running on a server which you would then access (from your Ionic app) via it's public IP. So, you wouldn't use http://localhost:3000 to get the JSON, instead you would use something like http://123.456.789.123:3000.

But, usually, this is not the way you would do it (with the port 3000). What you would additionally do is put (for example) Nginx in front of your Node.js app (see an example here) in order to serve your api from the standard HTTP port (80).

So, basically, you can't actually "run Node.js server in Ionic app" - the way you do it is run the Node.js app separate from Ionic and expose its functionality via a standardized API (usually these days RESTis what you would want to achieve) which you then "consume" via Ionic's (well, to be exact, it's actually Angular's) $resource module.

Hope this helps clear things up a bit.

How to run #Node.js server in #Ionic mobile app? https://t.co/8SOUYGM3Vf

— Nikola Brežnjak (@HitmanHR) January 12, 2016

Page 1 of 91234»...Last »

Recent posts

  • Using Puppeteer to automate ASC Analytics screenshots
  • Do it when you don’t feel like it
  • Self-mastery
  • Writing well
  • const life = change();

Categories

  • Android (3)
  • Books (111)
    • Programming (22)
  • CodeProject (35)
  • Daily Thoughts (71)
  • Go (3)
  • iOS (5)
  • JavaScript (123)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • Three.js (1)
    • Vue.js (1)
  • Meetups (8)
  • Miscellaneou$ (76)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (36)
  • Servers (7)
    • Heroku (1)
    • Linux (2)
  • Stack Overflow (81)
  • Unity3D (9)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak