How to embed JavaScript/CSS in HTML page using Rails' asset pipeline?

Question

I'm developing a webpage, which content is fully generated with client-side JavaScript. The only purpose of index.html is to refer to JavaScript and CSS documents, which are generated with Rails' asset pipeline. To avoid extra requests, I'd like to inline those JavaScript and CSS in production.

How to inline JavaScript and CSS content which is generated with asset pipeline?

Answer 1

You can use Rails.application.assets to get the content of the assets after precompilation. Add this in your index.html.erb:

<style type="text/css">
  <%= raw Rails.application.assets['application.css'].to_s %>
</style>
<script type="text/javascript">
  <%= raw Rails.application.assets['application.js'].to_s %>
</script>

Don't forget the raw, otherwise " will be changed into " etc.

Note this isn't compressed; for production, you will probably want to inline compressed code. To do so, add gem 'uglifier' to your Gemfile, run bundle, and use this:

<%= raw Uglifier.new(:copyright => false).compile Rails.application.assets['application.js'].to_s %>

Answer 2

You can also use: Rails.application.assets.find_asset('api.css').to_s