Hi I am new to Rails and web development in general. I want to implement a template that I have gotten from http://html5up.net/. The template is Big Picture.
Html5up.net uses a skel.js framework (first time using. Only knew about it when I downloaded the template) and I do not know how to incorporate it to my rails application (such as placing the scripts and stylesheets provided into which folder).
I have tried doing it via the default rails way, which is placing the stylesheets my /app/assets/stylesheets folder and also the javascripts in the javascript folder. But it did not turn out correctly. I suspect skel.min.js has its own way of finding the stylesheets.
As such, my web application looks unstyled currently.
When lacking a gem for the assets pipeline, you can always include the source file inside app/assets/javascripts and the include it in the manifest.
Say you moved your skel.min.js into said folder. Now go to application.js and append the following line
//= require skel.min
and that's it. You must now call that file in the application layout file, using the javascript_include_tag helper.
Related
I'm trying to update a legacy frontend web application to use webpack for the dependencies. Right now it's structured like so:
- login.html
- dashboard.html
... src/login.js
... src/dashboard.js
Each page has its own javascript file, plus it loads in a bunch of external dependencies via script tags on the page. My problem is that most of the pages use some variation of the same bunch of very large libraries and jquery plugins. If I bundle each page's js into a seperate js file, i'm going to end up with a huge bundle for every page that has to be downloaded every time the user changes page. I'd prefer to just have one bundle that every page loads and uses the neccessary part. Is webpack fir for purpose here, and if so how should I be going about it?
I "solved" this by keeping my library imports as they are, ie jquery, bootstrap etc downloaded from CDNs. I made one bundle for each of my bigger local libraries and included that on each page so that it gets cached by the browser, then I used webpack with multiple entry point for our bespoke js code.
Pretty basic question here:
I on rails 3.2.17, need to include some coffeescript to my application, would rather not add it to my views.
my views folder is named episodes and would like to connect partial _show_info.html.erb to assets/javascript/episodes.js.coffee
just need the proper javascript include tag.
Thanks in advance.
I would recommend adding this to your app/assets/javascripts/application.js file:
//= require episodes
That way, you'll have access to it everywhere, and when you push to production, it'll be minified and concatenated with all the rest of your JavaScripts. You can read up on the asset pipeline here. Especially check out the section on JavaScript Compression.
I've got a Javascript library for AJAX file uploading that I need to include on only one page. Where is the best folder for this for file? app/assets/javascripts? vendor/assets/javascripts? lib/assets/javascripts? And then I need to be able to include it on only one page. Or should I just add it to application.js and have it included on every page (even know I'm only using it on one page?)
I figured for performance my best bet would be to put the minified JS file somewhere, and just include it with a javascript_include_tag on the page I need it, by using yield(:head) and content_for(:head)? Thank you.
Third party JavaScripts should go inside vendor/assets/javascripts directory, because app/assets/javscripts is for your application specific JavaScripts and lib/assets/javascripts is for your libraries code which is separate to your application or libraries that you have shared across different applications.
Please reference Asset Organization for further details.
As far as inclusion of javascripts in your application/page if you're using it only on a specific page then including the file with javascript_include_tag is the approach I would take as well.
In the folder vendor/assets/javascripts because is a folder for third party script
We're trying to build an e-reader application that uses Epub.js for the basic loading/viewing functionality. However, we are trying to use Rails 4.0 to build this app, and when we try to integrate Epub.js into our application, we run into some problems.
We tried to follow the Getting Started section on the Github page. We have a Book class to handle the ePub loading. I put the epub.min.js, zip.min.js, and inflate.js files all in the app/assets/javascripts folder. Then, we add the requisite javascript:
<script>
var Book = ePub("url/to/book/");
Book.renderTo("area");
</script>
Here's where we run into major problems. The argument that ePub() takes is transformed into a url - if it's a local file, then the url would be http://localhost:3000/books/testbook.epub, for example. But because of Rail's asset pipeline, we can't have a direct URL link to an asset, meaning that we haven't figured out how to reference a local epub file with a url.
More complications arise from the fact that this doesn't work even if we put a route in routes.rb linking a url directly to the asset, since Epub.js doesn't just look at the epub file; it also uses unpackages it and uses the url to look at its local contents. Also, external urls (like a .epub file from Project Gutenberg) don't work either.
Is there any way around this? I am fairly new to Rails, so I am wondering if there are any key areas that I am overlooking. Would there be any modiifications to Epub.js that I would have to make? I've scoured Google and StackOverflow for answers, but there don't seem to be many projects integrating Rails and Epub.js. I've also tried other solutions, like Readium.js, and they also don't seem to be working.
Thank you so much for your help!
You could make the library available on the public folder. This folder is not affected by the assets pipeline. You do not have to secure its contents too since it is already available. So I see no problem in using it from the public folder.
Simply drop it on rails_root/public and load it in your application layout normally
<%= javascript_include_tag "/public/epub.js" %>
hope it helps
I recently started working with Rails 3.1. It's a very nice framework
and I like the 'asset pipeline' philosophy. Adding libraries that exist
of one file is quite easy and works out of the box. However, adding a library
which exists of a folder like EXTJS 4 is somewhat more difficult.
I'd like to just add the whole EXTJS4 folder to the '/app/assets' folder
And do a //= require_tree in my 'application.js' file but that does not
include the css files. Also images and scss files are not included this way.
All the images/css files are referenced 'relatively' from the js file so
I think the folder structure should be maintained as it is.
What is the best and easiest way to add this library to my rails projects?
I dont want to specify the whole list of EXTJS resources to my view each time
I create a new view.
Thanks
Simply leaving the Ext library (linked) inside of "public" works just fine.
One caveat here: keep in mind, that if you want sprockets to not interfere, then, while using Rails view helpers, you need the paths to your extjs JS and CSS files to be absolute, e.g. starting with "/". Let's say we have the Ext library in "public/extjs". Then these 2 calls will be needed in your Rails view/layout:
javascript_include_tag "/extjs/ext-all-debug"
stylesheet_link_tag "/extjs/resources/css/ext-all"