How To Run Ionic Project On Heroku

You first have to install express server in your ionic project.

npm install express --save

Then create a server.js file:

var express = require('express'),

app = express();
app.use(express.static('www'));
app.set('port', process.env.PORT || 5000);

app.listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});

Add an app.json file with some data

{
    "name": "app name",
    "description": "A simple Ionic app for Heroku",
    "logo": "http://pathToYourLogo.png",
    "keywords": ["ionic", "devdactic", "whatever"]
}

Then when you deploy your app to Heroku (preferably with dropbox) it will start as an express server.

Origin is not allowed by Access-Control-Allow-Origin Error in Ionic

If you got this issue in Ionic:

Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.

It is because you are running node.js and ionic serve project on localhost and trying to access two different ports which causes a cross origin access error.

To fix this simply edit your ionic.project file to map out the linking like this:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/signUp",
      "proxyUrl": "http://localhost:3000/signUp"
    },
     {
      "path": "/checkSession",
      "proxyUrl": "http://localhost:3000/checkSession"
    },
     {
      "path": "/login",
      "proxyUrl": "http://localhost:3000/login"
    },
     {
      "path": "/logout",
      "proxyUrl": "http://localhost:3000/logout"
    }
  ]
}

Now in your Ionic project you can call localhost:8100/login for example and it will call localhost:3000/login which the port node.js server is running on.

Web App Only Solution

If you are only making a web app for the browser and not running as a native app, then you can just move the angular portion of the code into the server part.

Copy the /www folder from your frontend into the server /public folder. You can then access your UI from http://localhost:3000.

I hope this makes sense to you.

Style Ion-Radio checkbox in Ionic with CSS

Recently I had the trouble of changing the default radio checkbox in ionic. Here is the CSS of how to do this:

.list .item-radio .item-content {
  background-color: black;
  color: white;
}
.list .item-radio .radio-icon {
  background-color: black;
  color: white;
}
.item-radio input:checked + .radio-content .item-content {
    /* style the item content when its checked */
    background: black; 
}