How to generate assets that match the html file of a rails application?

Tags: html,css,ruby-on-rails,ruby,erb

Problem :

I have created an html file by using render_to_string in a controller and send_data to send the html file to the user. That works great and the file I get back matches the html I see when I right click and view page source in my browser. However, in my html file there are links to css files and .js files that don't exist in my app/assets folder.

For example, there is a link to application.css in the html file but there is only application.css.scss in the app/assets folder. Or another example; lightbox.css.erb instead of lightbox.css.

Also, some of the paths in the html are wrong, for example images are located in app/assets/images, but the html is looking in app/assets. The pathing is not an issue since I can just edit the generated html with nokogiri, but I am curious as to why they are different.

This is pretty much exactly what I want to do rails: emulate "Save page as" behaviour

Except that I'm getting my html a different way and for whatever reason I can't find the assets I'm looking for. The html appears valid as I indicated earlier, and opening the file will display text from the html but won't display any images or assets until I change the link paths.

From what I've read, rails will transform scss to css and render erb files to js or html. I can't find these files anywhere in my directories, though. How can I generate the files that I need in order to display my static html file independently from the rails app?

I'm using Rails 3.2.2 with jruby 1.6.7 (ruby 1.9.2)

Solution :

Before a rails app is deployed to production mode, all of your assets (css, javascripts and images) are usually precompiled and placed in the public directory, which is where your rails-rendered html pages look for assets.

In development mode, this precompilation is not usually done, but it can be done if desired. To generate the compiled assets, you can run rake assets:precompile. This will compile your assets, "fingerprint" them and place them in the public folder. "Fingerprint" means that it will generate a hash based on the file content of an asset and place the hash in the asset's filename, which helps to determine if/when the content of the asset has changed just by reading the filename.

After you run this command, you can copy or move the assets to a new directory (outside your rails app) where you can serve the html pages and these assets independently from the rails app. You might also delete the compiled assets from the public directory, since these aren't generally very useful in development mode.

For some background, I would read about the Asset Pipeline.

    CSS Howto..

    How to display random parts of a page on refresh?

    How to use pure CSS to control other elements under same parent?

    Only show one hidden table row at a time

    How to make a border which wraps around text

    How to format currency as you type using jQuery

    How i can put the video showing image in front of image using jQuery css in html?

    How can the css dottled border be implemented?

    How to let the chrome forget the page scroll position?

    How to give css when span tag within double quotes

    How to display a side panel on the left and Google maps api canvas on the right, filling remainder of page?

    How can I have % of width of an img wrapped in a specific div width?

    How to open a CSS-only popup automatically on page load/using Javascript?

    How to queue CSS3 animations when shown after page scroll (JSFiddle provided)

    How to modify multiple CSS attributes of an element?

    How to align div objects in rows

    how to cope with text to element alignment issues

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How do I span columns with a div based table?

    ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

    How to create new line with css or javascript?

    When I hover left/right side of a div how do I display previous/next button (using CSS/jQuery)

    How can I change CSS style definition to make border on specific div

    How to fix text running off screen and breaking layout without using CSS word-break property?

    How can I create this complicated layout using only CSS?

    CSS: how do I force contents in a table cell to stay on one line when browser size reduced

    How do you wrap long words on newline, and avoid horizontal scroll using CSS?

    How can I make responsive JQuery left margin?

    Sencha Touch 2: How to handle custom css files while production build?

    How to align content of a div to the bottom?