HTML video background with Ruby on Rails - ruby-on-rails

I am a beginner on Ruby on rails and I am building an application in which have a Video Header Background. The application works fine locally, but once I tried to upload it to Heroku the video-background does not play.
The app is still in development.
I get in my Web-browser console the following messages:
HTTP load failed with status 404. Load of media resource https://serene-fortress-58125.herokuapp.com/assets/Islands.mp4 failed.
All candidate resources failed to load. Media load paused.
I am thinking that I should host the video in some sort of hosting service to make it available to the Heroku app, but I need to figure out how that could work with my current html code and which hosting service to use. I tried with tinypic to host the video, but the video was played as x-shockwave-flash and not compatible with my current web design.
I was thinking of using the tubular jquery plug in as adviced in the following post and using Youtube as host:
Fullscreen video background - <video> vs YouTube/Vimeo-<iframe>?
I would maybe need a couple of advices on how to use jquery with Ruby on Rails 5.0.1 and what would be the best practice to make this work out. Any advice would be really helpful.
Thanks a lot
Fabrizio
This is my app on Heroku:
https://serene-fortress-58125.herokuapp.com/
This is my git:
https://github.com/fabriziobertoglio1987/portfolio
This are links to similar unanswered questions on Stackoverflow:
adding an animated background to a ruby on rails app
https://stackoverflow.com/questions/35319525/ruby-on-rails-html5-video-as-background-for-landing-page-not-loading-on-heroku

The 404 error message is because i needed to use the rails video_tags and not the html tags. I was helped from a friend in finding the solution, the following document helped.
https://devcenter.heroku.com/articles/rails-4-asset-pipeline

Related

Ruby on Rails link generated with link_to helper no longer works in Chrome

Chrome has been making a lot of changes recently, and one of them has broken a code statement I use to retrieve a document stored in a database, related to a parent record. The action to upload the file and create the attachment relationship is working, so my users can still add documents. They can no longer download and view stored document attachments. The code is using the link_to helper method, and appears to be building the link correctly, verified by the fact that it still works using Edge, so my users have an ugly workaround, but I need to understand what is happening. I have confirmed that it is indeed Chrome that is the problem, because at first I couldn't recreate the defect in development (until I updated my Chrome browser to current version.) Now I can recreate the defect in my development environment.
When the link in my form is clicked, Chrome displays an error screen with this text:
This page isn't working
(*localhost*) sent an invalid response
net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION
If I extract the link using developer tools and try and execute it in an empty browser window, I get the same error.
The link is constructed like this:
(*name of the file attachment*)
Before you ask, yes, I have confirmed there are no commas or quotes in my file names! lol
I am hoping someone somewhere can point me to a solution, hopefully simple, maybe obvious, that I can use to get my web form to play nicely with Chrome again - application code change, web server configuration (I am running on RHEL7 Apache in production and Puma in development, my database is Oracle, and I am building with Ruby 2.3.6 and Rails 5.1.5, along with many many gems).
I hope I have covered all the relevant points. Thank you for taking the time to read this post!
Issue has been resolved by upgrading gem attach to version >= 1.0.5. Many thanks to the gem author for excellent responsiveness.

Rails newbie trying to understand why deployed Rails site has messed up formatting

As a way of learning how to develop with Rails, I have cloned a rails app here
https://github.com/boxerab/redis-io
and have deployed to Heroku:
https://gigacrunch.herokuapp.com/
The original site is hosted here: http://redis.io/
When comparing the two sites, the page formatting seems messed up
for my Heroku hosted site.
Being a beginner, I am not sure how to start investigating why the formatting would be so different if the Rails code is the same.
Any guidance here would be very much appreciated.
Thanks!
So it is clearly a problem with your assets, your css/js. If you use your devtools (chrome inspect element) on the page and look at the sources tab, it will show that the css file (http://polar-wave-5104.herokuapp.com/styles.css?1449091320 ) isn't loading. I don't know why, without more information, but that should be a place to start exploring.

How to update a Rails app and avoid old caching by browsers?

During development of my chess rails app I have encountered a few times where after updating my Rails app on the next visit the Chrome browser was displaying the chessboard mangled and hitting refresh in the browser didn't fix the problem. I had to manually disable cache in Chrome and refresh to fix things. Maybe something about the css for the chessboard div's was screwed up I don't know. Sorry but I don't have a more detailed report of the problem.
If this can happen to me during development, then surely the users of my website will encounter this old caching problem and see a broken site. Does anyone have an idea of what was going on and how to prevent this?
In Rails 3.2, asset pipeline takes care of caching for your CSS and JS.
http://guides.rubyonrails.org/asset_pipeline.html
Take a look at the above link to check it out. If you are not using Rails 3.2 use some kind of fingerprinting technique undo the caching.

Rails 3 / PhoneGap: Converting a Rails app into an Phonegap iOS app?

I have a site built on top of Rails. In essence, I want to release a lightweight version of it for the appstore, and I think Phonegap is a good solution w/o writing a full iOS application.
What would be the easiest way to get something like this out of the door? I'm new to PhoneGap and would love if an experience dev could shed some light on how with is done. I feel it would also be a valuable resource for many other Rails devs.
My rails 3 app uses devise for authenication, carrierwave for file processing, amazon S3 for storage, and Heroku for hosting. Can someone give me some basic insight into how all these components are wrapped up and ablwe to be used with PhoneGap?
I'm new to Phonegap too, but I'm exploring the same idea than you and I've found this useful screencast: "PhoneGap + Rails 3 API"
http://vimeo.com/18763953
The idea is that you make an HTML5 client side app that makes calls to a Rails API on the server side.
Here is the code of the screencast demo:
https://github.com/quickleft/kbomb_phonegap_server (Rails API)
https://github.com/quickleft/kbomb_phonegap_client (HTML5 client with
Phonegap).
Hope it helps!
I think it could be relevant to check my phonegap-rails gem gem and my example rails / ember.js App that is exported with Phonegap. It also implements token authentication based on ember-auth and several OAuth strategies on top of Devise.
Currently in de the devel branch: https://github.com/joscas/base_app/tree/devel
Heroku deploy: https://starter-app-staging.herokuapp.com (the desktop version)
The gem exports assets, fixes paths etc. to allow seamless export of single page apps based on a rails backend.
At 37 Signals they rendered their html SERVER SIDE and just created an app wrapper. Here's the article: https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content
This is an important difference in most approaches as most will re-develop their front end using a client side framework and it has the potential to save users a bunch of time. The downside is that I've heard rumors you can't get into the iOS app store, but it doesn't seem like they had a problem with it. There's also services like GoNative.io that will wrap your app for you.
A video and code that does something similar to Javi's answer can be found at
Using Phonegap as a native container for a Rails 3 App

Heroku App with a Wordpress Blog

I recently discovered that Heroku now allows PHP which means that a wordpress blog can be hosted on it. I also found this project template: https://github.com/mhoofman/wordpress-heroku
I have a ruby on rails app which is to be hosted on heroku with a domain www.mysite.com, and in that app, i need a way for www.mysite.com/blog to show the wordpress blog.
Can someone help me out, with details on how I can do this?
Whilst I've not used the new PHP platform I don't think what you're asking for is going to be possible.
When you deploy an application to Heroku it detects the type of application during the push process and sets up the application accordingly, Heroku use Apache to host PHP as you can see from the output in this post http://tjstein.com/2011/09/running-wordpress-on-heroku-and-amazon-rds/ - there's not been any mention of mixing platforms in a single application yet so would imagine that it's not supported.
The nearest you'd get is hosting your site and your blog in two seperate applications with the blog on blog.mysite.com and then put a redirect on www.mysite.com/blog to the blog.mysite.com url.
Im Still working on this
the closest to getting a solution is using the reverse proxy gem
see the answer here:
How can I use a subdirectory instead of a subdomain?

Resources