How to make changes stick in fireapp that will be hosted using firebase hosting?

Question

I'm using firebase hosting to host an angularfire app.

The app deployed fine using the Quickstart instructions in the docs.

There were some small problems in my app, things I needed to change. I made these changes, ran through the steps again, but the live app (via my firebase url) doesn't reflect this.

I've tried deleting the app, deleting the firebase.json file, redoing the process several times. But it continues to reflect the older changes. If this were a git push deployment, it seems almost like I haven't committed the new changes. I read through the docs, --help, commands, etc. but can't figure this out.

What might I be missing here?

edit: Exact commands:

localhost:angfire Test$ firebase init
----------------------------------------------------
Your Firebase Apps kpennell@gmail.com
----------------------------------------------------
torid-fire-4332
----------------------------------------------------
Enter the name of the Firebase app you would like to use for hosting
Firebase app: torid-fire-4332
----------------------------------------------------
Site URL: https://torid-fire-4332.firebaseapp.com
----------------------------------------------------
Enter the name of your app's public directory.
(usually where you store your index.html file)
Public Directory: (current directory) app
Initializing app into current directory...
Writing firebase.json settings file...
Successfully initialized app
To deploy: firebase deploy
localhost:angfire Test$ firebase deploy
Preparing to deploy Public Directory...
progress: 100%

Successfully deployed
Site URL: https://torid-fire-4332.firebaseapp.com, or use firebase open
Hosting Dashboard: https://firebase.com/account then view the hosting section of your app
localhost:angfire Test$ firebase open
localhost:angfire Test$ `

Then I open that page and it's still pulling in the updated files. It doesn't like that I used http files the first time. I've changed them to https but this isn't reflected in the app.

edit2

Still getting the http problem despite changes being made in the app.

Failed to load resource: net::ERR_INSECURE_RESPONSE https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
Failed to load resource: net::ERR_INSECURE_RESPONSE https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

My scripts in the app:

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/firebase/firebase.js"></script>
  <script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
  <script src="bower_components/angularfire/dist/angularfire.js"></script>
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="//tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
  <link rel="stylesheet" href="bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
  <script src="bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>

Can you update the question to include the exact commands that you ran? — Frank van Puffelen, Aug 21 '14 at 13:30
As @FrankvanPuffelen mentions, please share the exact commands. But in the mean time, here's a shot in the dark: Try adding a cache-busting get parameter to your URL like ?foo=bar If the issue is your browser aggressively caching the document, this might fix it :) — mimming, Aug 21 '14 at 16:41
Your second update is actually showing good progress. Now your changes made it through to your app/my browser. The remaining problem is that cdn.leadletjs.com doesn't seem to have a good certificate. It's probably easiest to solve this by putting the leaflet.js files in your own app. — Frank van Puffelen, Aug 21 '14 at 17:49
You can also use an alternative CDN, that **does** implement HTTPS correctly. E.g. http://cdnjs.com/libraries/leaflet — Frank van Puffelen, Aug 21 '14 at 17:52
@FrankvanPuffelen That's a good idea. I'll use bower to get those in there like my other dependencies (rather than messing with cdns). Thanks for the tips. — Kyle Pennell, Aug 21 '14 at 17:53
I see that your latest pushed worked. There are more HTTP URLs in there, but the basics now seem to work. Nice looking app btw. :-) — Frank van Puffelen, Aug 21 '14 at 18:08

Frank van Puffelen · Accepted Answer · 2014-08-21T17:56:10.180

It looks like your application is loading some script files over HTTP, while the application itself is served over HTTPS. This is causing some browsers to rejects the non-secure scripts.

For example Chrome writes this on its console when I load your app:

[blocked] The page at 'https://torid-fire-4332.firebaseapp.com/' was loaded over HTTPS, but ran insecure content from 'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css': this content should also be loaded over HTTPS.".

In Internet Explorer 9, the page loads fine (after I confirm that I want to "Show all content"). My guess is that your mobile browsers behaves like IE9 and also still accept the combination of HTTP and HTTPS.

The solution is to load everything over HTTPS.

To prevent this type of problem, it is now in general common to specify script sources without a protocol:

<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

When this script tag is loaded, it "inherits" the protocol from its parent. So when the page is loaded over HTTPS, the script will be loaded over HTTPS. And when the page is loaded over HTTP, the script is also loaded over HTTP.

Update

Your second edit shows that after making that last change I suggested above, the update was successfully pushed to Firebase hosting. I doubt the actual change had anything to do with that success, but at least now we have progress.

The :ERR_INSECURE_RESPONSE you're getting is because cds.leafletjs.com doesn't see to use a valid HTTPS certificate.

It's probably easiest to solve this by putting the leaflet.js files in your own app.

You can also use an alternative CDN, that does implement HTTPS correctly. E.g. http://cdnjs.com/libraries/leaflet.

Hmmm... I see that your question is actually about pushing out the update that fixes this problem. I'll delete my answer in a minute and investigate further. It does rule out Jenny's suggestion about cache busting though, since this is the first time I loaded your app. — Frank van Puffelen, Aug 21 '14 at 17:20
I see that my tip allowed you to make progress, so I'll leave the "answer" here for context. — Frank van Puffelen, Aug 21 '14 at 17:51

How to make changes stick in fireapp that will be hosted using firebase hosting?

1 Answers1

Update

Linked