Heroku not loading app.css or app.js

currently im loading the following two assets like so

 <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">

but when push to a heroku production environment it doesn't load the css or js sadly and chrome console gives me a warning Mixed Content: The page at 'https://fast-earth-73631.herokuapp.com/' was loaded over HTTPS, but requested an insecure script 'http://fast-earth-73631.herokuapp.com/js/app.js'. This request has been blocked; the content must be served over HTTPS.

There are a few of these for each asset i have in my layout, after logging in my css works. I tried to use secure_asset() but then that doesnt work locally and does the same thing my production environement does and thats not load the css. Anyone have any ideas. link to production https://fast-earth-73631.herokuapp.com/ user: [email protected] pw:tester

susanb

7 years ago

Best Answer

Level 1

Option 1

Instead of using the asset helper method, use a path that looks like this:

<link href="/css/app.css" rel="stylesheet">

This path will be neutral to whatever domain you're using (local or Herokou) as well as whether you're using http or https because it will simply look for the path in relation to the current url and protocol.

Option 2

Abandon using the asset helper - because you're loading your site with https, all assets need to be loaded with https to avoid the Chrome errors.

Instead, stick with the secure_asset helper. Now you mentioned the latter did not work locally, but that should be a solvable problem. Can you tell us more about how it's not working? What path is it generating?

3 likes

Please or to participate in this conversation.