Running Ionic app (angular) in Glitch.com

Hi,

I have a boosted projected which I want to use to teach my godson coding. It is an Ionic app with angular.

I manage to compile it and start the server however nothing is shown on the browser panel.

My package.json looks like this:

{
 ...
  "engines": {
    "node": "14"
  },
  "scripts": {
    "ng": "ng",
    "start": "ionic serve --disable-host-check --port=3000 --host=0.0.0.0 --ssl --external --public-host=valorantapp.glitch.me",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Based on other threads I’ve seen here I have switched the default port to 3000 and made sure to point to the same URL that my glitch app loads.

In the Logs I see:

** Angular Live Development Server is listening on localhost:3000, open your browser on http://localhost:3000/ **

Boosted status says: OK (in green).

But I see: “Invalid Host header” in the browser window on the right side panel.

If I try to start the server myself directly from the Terminal by calling the command line of ionic (same one specified in the package.json, start), I see the following:

[INFO] Development server running!
       
       Local: https://valorantapp.glitch.me:3000
       External: https://172.17.0.62:3000
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to https://valorantapp.glitch.me:3000!

[ng] ✔ Browser application bundle generation complete.
[ng] 61 unchanged chunks
[ng] Build at: 2021-06-07T03:37:05.555Z - Hash: e6bb8b394c518e8a7013 - Time: 3216ms
[ng] ✔ Compiled successfully.

However the browser panel shows:

Site didn’t respond

Something in the code caused it to close the connection before providing a response.

If this is your project please visit us at support.glitch.com for assistance.

I think I’ve hit a dead end here. Any ideas on how to fix this?

Thanks in advance!

I haven’t used Ionic specifically, but you’ll have to look up how to configure it to allow valorantapp.glitch.me in the Host header. If I were to search online, someone describes how to set that here https://github.com/ionic-team/ionic-cli/issues/3440#issuecomment-408994621


This approach won’t work because requests come in to your project as HTTP, not HTTPS.

2 Likes

Thanks a lot wh0.

Reading the thread you linked helped me solving the problem.
This is command line I’m using to start my Ionic app:

ionic serve --disable-host-check --port=3000 --host=0.0.0.0 --public-host=valorantapp.glitch.me

Hope it helps other people in the future!

3 Likes