CODEWITHSUNDEEP
firebasefirebase-hosting
Kyle Pennell
Kyle Pennell

Reputation: 6097

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

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 [email protected]
----------------------------------------------------
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>

Upvotes: 4

Views: 1250

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599091

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.

Upvotes: 2

Related Questions