assets not working on Heroku (js/jQuery/image)
I am new to ruby and I have a little problem, I created a landing page that works perfectly on local (images are showing up, animation on js are also working).
But on Heroku, images are still here but animations are not working.
There is something weird, even if it's working when I check the console I have plenty of errors :
Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6 Uncaught TypeError: Cannot read property 'breakpoints' of undefined
at application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6
at application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pages.scss:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.scrollex.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
banner.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic02.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic01.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.scrolly.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
skel.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
util.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic03.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pages.scss:1 Failed to load resource: the server responded with a status of 404 (Not Found)
I have an index.html.erb page that call the scripts :
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
My scripts are in a folder app/assets/javascripts/js.
Thanks very much!
It's not right to use it like this:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
Check this out: The Asset Pipeline.
You should put the all js files into app/assets/javascripts without jquery.min.js, because this library includes rails by default.
I believe the javascripts/application.js should be like this (by default):
//= require jquery
//= require jquery_ujs
//... example
//= require_tree .
this //= require_tree . automatically maps the javascripts folder for all js files.
Remove this line //= require rails-ujs after edited like above.
And the app/views/layouts/application.html.erb should be like this:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Update
You should place the pages.scss into assets/stylesheets/ and create a file inside assets/stylesheets/ like custom.scss then the custom.scss like this
#import "pages";
You don't need to include scripts in index.html.erb.
In your app/views/layouts/application.erb, there should be the following line exists.
<%= javascript_include_tag "application.js", "data-turbolinks-track" => 'reload' %>
In your app/assets/javascripts/application.js you shouls see a line
//= require_tree .
In your app/assets/javascripts create any .js file and write your code. It will work in all views without including anywhere.
If your animations are not working, try moving the following line from <head>
<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>
to above closing body tag. i.e., </body>
Related
When I run rake assets:precompile RAILS_ENV=production, the assets used from gems is not being included, my website shows a lot of 404 not found for these assets.
pnotify.core-4a29894be02cb147dd67c1f609148e95.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pnotify.buttons-19d9aeb87c03cfef956313439afad682.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pnotify.history-d339b3266d96cddfa55c4f0478f9d0ea.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
The Rails.application.config.assets.paths on production shows:
=> ["/vagrant/local/app/assets/fonts",
"/vagrant/local/app/assets/images",
"/vagrant/local/app/assets/javascripts",
"/vagrant/local/app/assets/stylesheets",
"/vagrant/local/vendor/assets/javascripts",
"/vagrant/local/vendor/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/material_icons-2.2.1/app/assets/fonts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/material_icons-2.2.1/app/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/chosen-rails-1.5.2/vendor/assets/images",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/chosen-rails-1.5.2/vendor/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/chosen-rails-1.5.2/vendor/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/cocoon-1.2.6/app/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-minicolors-rails-2.1.4.0/vendor/assets/images",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-minicolors-rails-2.1.4.0/vendor/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-minicolors-rails-2.1.4.0/vendor/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/pnotify-rails-2.0.1.1/vendor/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/pnotify-rails-2.0.1.1/vendor/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/tinymce-rails-4.1.0/app/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/tinymce-rails-4.1.0/app/assets/source",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/tinymce-rails-4.1.0/vendor/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-ui-rails-4.1.2/app/assets/images",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-ui-rails-4.1.2/app/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-ui-rails-4.1.2/app/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/activeadmin-0.6.0/app/assets/images",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/activeadmin-0.6.0/app/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/activeadmin-0.6.0/app/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/formtastic-2.2.1/app/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/bourbon-4.0.2/app/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/jquery-rails-3.1.1/vendor/assets/javascripts",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/font-awesome-sass-5.3.1/assets/stylesheets",
"/home/vagrant/.rvm/gems/ruby-1.9.3-p385/gems/font-awesome-sass-5.3.1/assets/fonts"]
Any help is going to be welcome!
The problem was the config.assets.debug options, it was true on production server, and theres is no files in CDN.
Simple like that.
Orbeon 2017.2.2. After loading this version I get the following errors from all my xhtml pages:
[Error] Failed to load resource: the server responded with a status of 404 () (Textarea.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (orbeon-form-runner-opt.js.map, line 0)
Should I be worried?
The .map files are only loaded when you have your web browser's dev tools open, as they are used for debugging JavaScript. The browser will not attempt to load them otherwise. So no, you should not be worried.
From this link, it says :
Once an application is cached, it remains cached until one of the
following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated
Following the instruction from the internet, for the manifest file I use a version number. When I change the content of the index.html with 01.jpg to 02.jpg - I also changed the version number of the manifest file.
With the steps above, it works within my Win7 Wamp Server Local Host. But once I do the same steps in my web server (after uploading the file to the web server) - it doesn't work.
Can somebody please help me what did I do wrong ?
Document was loaded from Application Cache with manifest http://www.example.com/test/offline.appcache
Application Cache Checking event
Navigated to http://www.example.com/test/
Application Cache NoUpdate event
Above is from the Chrome browser console after I modified the version number of the manifest file (from #01 to #02) and the jpg file (from 01.jpg to 02.jpg) in the index.html file.
The offline.appcache CACHE file list no change, except the version number :
CACHE MANIFEST
# 2017-03-25 version#01
uploads/event.jpg
uploads/baby.jpg
/favicon.ico
NETWORK:
indexPHP.php
The index.html file :
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
<img src="uploads/01.jpg">
</body>
</html>
<script type="text/javascript">
function onUpdateReady() {
alert("offline files will be updated");
window.location.reload();
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();}
</script>
the .htaccess file :
AddType text/cache-manifest .appcache
the "tree" :
example.com/.htaccess
example.com/favicon.ico
example.com/test/index.html
example.com/test/offline.appcache
example.com/test/uploads/01.jpg
example.com/test/uploads/02.jpg
Thank you in advanced.
I want to use the core-scaffold element from the core-elements package. I imported
<link rel="import" href="packages/core_elements/core-scaffold.html">
<link rel="import" href="packages/core_elements/core-header-panel.html">
<link rel="import" href="packages/core_elements/core-menu.html">
<link rel="import" href="packages/core_elements/core-item.html">
into my html file. If i want to run the website i get
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-scaffold.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-header-panel.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-menu.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-item.html
I also use some elements from the page-elements package without any problems...
This is my pubspec.yaml file
name: Test
description: A sample web application
dependencies:
browser: any
polymer: ">=0.15.0 <0.16.0"
core_elements: ">=0.3.0 <0.4.0"
paper_elements: ">=0.4.0 <0.5.0"
transformers:
- polymer
I tried to delete and reload the core-elements package with pub get. But it doesnt help.
ok solved the problem. In the Polymere guide they used "-" in the links. The packages which the dart editor downloads use "_" in the links.
So its not core-header-panel. Its core_header_panel.
I'm 3 months new into dart and I've been fairly lucky not to have encountered any issues that couldn't be fixed from answers found on the net, but this one has stumped me.
I downloaded this sample app (https://github.com/vsavkin/angulardart-sample-app) installed it into dart-editor (on my mac mini) using Open Existing Folder and then running get Pub Get (or even Pub Update) on the pubspec.yaml file.
I was getting dartium loading with a running app until I upgraded the SDK from 1.4.2 to 1.5.8 and the pubspec.yaml file from
environment:
sdk: '>=1.4.2 <2.0.0' to
environment:
sdk: '>=1.5.8 <2.0.0'
where everything just broke and i am now getting these types of errors in dartium which I'd like to know how to fix (reverting hasn't helped, 404's are still present - is there some old cache that's being read that I can't find?):
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/packages/shadow_dom/shadow_dom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/routing/static_keys.dart
An error occurred loading file: package:angular/routing/static_keys.dart package:angular/routing/static_keys.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/cache/module.dart
An error occurred loading file: package:angular/cache/module.dart package:angular/cache/module.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/core_dom/directive_injector.dart
An error occurred loading file: package:angular/core_dom/directive_injector.dart package:angular/core_dom/directive_injector.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/cache/js_cache_register.dart
An error occurred loading file: package:angular/cache/js_cache_register.dart package:angular/cache/js_cache_register.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/directive/static_keys.dart
An error occurred loading file: package:angular/directive/static_keys.dart package:angular/directive/static_keys.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/core/static_keys.dart
An error occurred loading file: package:angular/core/static_keys.dart package:angular/core/static_keys.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/di/src/reflector.dart
An error occurred loading file: package:di/src/reflector.dart package:di/src/reflector.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/change_detection/ast_parser.dart
An error occurred loading file: package:angular/change_detection/ast_parser.dart package:angular/change_detection/ast_parser.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/angular/core_dom/compiler_config.dart
An error occurred loading file: package:angular/core_dom/compiler_config.dart package:angular/core_dom/compiler_config.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/di/check_bind_args.dart
An error occurred loading file: package:di/check_bind_args.dart package:di/check_bind_args.dart:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/aa-app/web/packages/di/src/reflector_dynamic.dart
An error occurred loading file: package:di/src/reflector_dynamic.dart package:di/src/reflector_dynamic.dart:1
Have tried starting from scratch
Have tried different versions of the angular package ie version 11.0, 12.0, 13.0
Have tried different versions of SDK from 1.4.2 to 1.5.3 to 1.5.8 still the same output
What on earth have i done to ruin something that was working so slickly?
The error "Module.DEFAULT_REFLECTOR not initialized" is thrown because the di transformer is not executed.
You need to add the anfular transformer to your pubspec.yaml (which includes the di transformer)