Git Product home page Git Product logo

ember-cli-rails-assets's Introduction

EmberCLI Rails - Assets

The ember-cli-rails-assets gem extends ember-cli-rails to enable rendering EmberCLI-generated JavaScript and CSS stylesheets into your Rails application's layout HTML.

This project and the behavior it supports is deprecated.

Rendering EmberCLI applications with render_ember_app is the recommended, actively supported method of serving EmberCLI applications.

However, for the sake of backwards compatibility, ember-cli-rails-assets supports injecting the EmberCLI-generated assets into an existing Rails layout.

Install

Add the following to your Gemfile:

gem "ember-cli-rails-assets"

Then run bundle install:

$ bundle install

Setup

To configure your project to use ember-cli-rails, follow the instructions listed in the ember-cli-rails README.

To configure your project to user ember-cli-rails-assets, ensure each Ember application's ember-cli-build.js includes the following values:

// frontend/ember-cli-build.js

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // http://ember-cli.com/user-guide/#application-configuration
    storeConfigInMeta: false,

    fingerprint: {
      // https://github.com/rickharrison/broccoli-asset-rev#options
      generateAssetMap: true,
    },
  });
};

Mount

Mount the Ember application (in this example, the frontend application) to the desired path:

# config/routes.rb

Rails.application.routes.draw do
  mount_ember_app :frontend, to: "/", controller: "ember#index"
end

Then, in the corresponding view, use the asset helpers:

<!-- app/views/ember/index.html.erb -->

<%= include_ember_script_tags :frontend %>
<%= include_ember_stylesheet_tags :frontend %>

Caveats

Mounting

If you're using the include_ember style helpers with a single-page Ember application that defers routing to the Rails application, insert a call to mount_ember_assets at the bottom of your routes file to serve the EmberCLI-generated assets:

# config/routes.rb
Rails.application.routes.draw do
  mount_ember_assets :frontend, to: "/"
end

Rendering

When injecting the EmberCLI-generated assets with the include_ember_script_tags and include_ember_stylesheet_tags helpers to a path other than "/", a <base> tag must also be injected with a corresponding href value:

<base href="/">
<%= include_ember_script_tags :frontend %>
<%= include_ember_stylesheet_tags :frontend %>

<base href="/admin_panel/">
<%= include_ember_script_tags :admin_panel %>
<%= include_ember_stylesheet_tags :admin_panel %>

Rendering without <base> element

To render the asset elements without using a <base> element, pass the URL or path to prepend:

<-- assuming Ember's assets are mounted to `"/"` -->
<%= include_ember_script_tags :frontend, prepend: "/" %>
<%= include_ember_stylesheet_tags :frontend, prepend: "/" %>

<%= include_ember_script_tags :admin_panel, prepend: "/" %>
<%= include_ember_stylesheet_tags :admin_panel, prepend: "/" %>

EmberCLI support

This project supports:

  • EmberCLI versions >= 1.13.13

Ruby and Rails support

This project supports:

  • Ruby versions >= 2.1.0
  • Rails versions >=4.1.x.

Contributing

See the CONTRIBUTING document. Thank you, contributors!

License

Open source templates are Copyright (c) 2015 Sean Doyle. It contains free software that may be redistributed under the terms specified in the LICENSE file.

About

ember-cli-rails was originally created by Pavel Pravosud and Jonathan Jackson.

ember-cli-rails-assets was extracted from ember-cli-rails is maintained by Sean Doyle.

ember-cli-rails-assets's People

Contributors

jboler avatar seanpdoyle avatar tricknotes avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

ember-cli-rails-assets's Issues

media option no longer works for include_ember_stylesheet_tags helper

In order to support certain print stylesheets, we previously added media: all to the helper call, namely "<%= include_ember_stylesheet_tags :client, media: 'all' %>". This no longer works in the >= 0.6.x releases, and fails with:

ActionView::Template::Error:
wrong number of arguments (2 for 1)

If I understand the problem, we need to be able to specify a media option similar to the prepend option that was added, so that print stylesheets continue to function.

Unable to use CSS files that are more than one level deep in the assets folder

We have a CSS file in the public directory at the following path:

assets/font-awesome/css/font-awesome.css

In the index file it's referenced as:

<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />

This was failing because of the new code here that eagerly grabs all the CSS files:

Nokogiri::HTML(index_html.read).css('link[rel="stylesheet"]').map {|s|
filename = File.basename(s['href'])
asset_matching(/#{Regexp.escape(filename)}\z/)
}

However, when it gets here, it fails, because the file isn't in the asset map. The DirectoryAssetMap right now only looks at children and not the full tree.

https://github.com/seanpdoyle/ember-cli-rails-assets/blob/master/lib/ember_cli/assets/asset_map.rb#L36

I submitted a PR here: #23

Please release a new version

Any released versions of ember-cli-rails-assets don't work with Rails 7.
To work with Rails7, #14 is required.

@seanpdoyle
Could you release a new version?
If you add me to GitHub / RubyGems collaborator, I'll do it.

Requiring <base> tag affects whole page

Adding a <base href="/"> tag to <head> affects relative URLs for the whole page. This includes breaking SVG <defs> fill URLs and <a href="#top"> style page anchors as well. This seems like an unacceptable side effect when the goal is only to have an absolute URL for the Ember asset paths.

Would it be possible to just add a secondary argument to include_ember_script_tags() to pass in the base path?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.