How to serve Ionic app with https?

[moroshko]

Running ionic serve allows to run the app on http://0.0.0.0:8100.

Trying to access https://0.0.0.0:8100 results in:

SSL connection error

Is there a way to run the app on https?

The reason I need https is because I use Firebase and it requires requests to be made over https. See:
http://stackoverflow.com/q/24431924/247243
http://stackoverflow.com/q/24442013/247243

Any ideas?

[c0bra]

You could use http-proxy and connect to create a couple https proxy servers, one of which rewrites the livereload port. Just point your browser to https://localhost:8101 instead of 8100.

var fs = require('fs');
var util = require('util');
var httpProxy = require('http-proxy');
var https = require('https');
var connect = require('connect');

// Create a connect app that can transform the response
var app = connect();
app.use(function (req, res, next) {
    if (req.url === '/') {
      util.puts("Transforming response");

      var _write = res.write;

      // Rewrite the livereload port with our secure one
      res.write = function (data) {
        _write.call(res, data.toString().replace('35729', '35700'), 'utf8');
      }
    }

    proxy.web(req, res);
  }
);

// Proxy fpr connect server to use
var proxy = httpProxy.createServer({
  target: {
    host: 'localhost',
    port: 8100
  }
});

// Live reload proxy server
httpProxy.createServer({
  target: {
    host: 'localhost',
    port: 35729
  },
  ws: true,
  ssl: {
    key: fs.readFileSync('server.key', 'utf8'),
    cert: fs.readFileSync('server.crt', 'utf8')
  }
}).listen(35700);

// Create the https server
https.createServer({
  key: fs.readFileSync('server.key', 'utf8'),
  cert: fs.readFileSync('server.crt', 'utf8')
}, app).listen(8101);

util.puts('http proxy server started on port 8101');

[perrygovier]

Hey @moroshko, what platform are you on? Your situation requires creating an SSL certificate, a self signed cert should be fine. Once you have one of those set up the solution @c0bra mentioned looks like it will work. If you're on mac, MAMP Pro makes setting up a virtual host with SSL pretty easy as well. On linux, there's no shortage of tutorials for getting Apache or Nginx set up.

Closing since it's not really an issue with Ionic, but lets keep the discussion going.

[justindmyers]

Sorry to jump back on this, but I spent a while trying to get this to work as well. Seeing as this thread comes up quite high on search results, the above solution didn't quite work for me as getting the SSL certificate working was a problem.

The only article that I found that successfully walked me through the solution was https://matoski.com/article/node-express-generate-ssl/

I combined both to finally get it working with this as the final setup: https://gist.github.com/justindmyers/266d169e97de20068f78

[nicopace]

Hi guys,
This is important because when you are developing a mobile app that uses any html5 feature (geolocation, rotation,..) chrome now requires it to be used from a secured location.

[Quirksmode]

Agreed, any simple solution for this, I am using Ionics built in server (ionic serve), where do I need to go to make the changes needed for https?

[scrivy]

to create a self signed cert and run it with a go proxy script
https://gist.github.com/scrivy/0909468fde8f117a3d66507c8bb3fe12

[rainmak33r]

Any idea how to make this working on an actual app ?

[niczak]

Any movement on this item in the last 6 months? I am working w/ the Twilio API and again everything must be under HTTPS as opposed to HTTP.

[perrygovier]

heyo, sorry I don't have a silky smooth ionic solution, but I find that you can use ionic serve and then an ngrok proxy to get things behind https. it's not ideal, but it should work.

[niczak]

@perrygovier Hey buddy, long time no talk! :)

Do you happen to have a guide for using ngrok locally for this purpose? Would be a huge help right now...

[niczak]

@perrygovier I think I am all set, thanks for the suggestion! I will be doing a ton of testing on Monday but the setup I have no looks very promising.

[perrygovier]

Awesome. You might have trouble with the proxy and a corporate firewall, but just ngrok http 8100 should give you an https URL you can hit.