I have recently updated my Grails app to 2.4.4 and am now using the asset-pipeline plugin. I am also using the CKEditor text editor plugin.
CKEditor loads its configuration from a Javascript file, ckconfig.js, which I have stored in /assets/javascripts/ckconfig.js. Loading of this file is declared in Config.groovy:
// CKeditor basic configuration
ckeditor {
config = "ckconfig.js"
skipAllowedItemsCheck = false
defaultFileBrowser = "ofm"
}
Unfortunately, my configuration is not being loaded and I get a Javascript console error "TypeError: d is undefined".
How do I refer to a Javascript file in the asset pipeline from within Config.groovy?
config = "assets/javascripts/ckconfig.js"
does not work. Is there a fixed path or URL? Or something cleverer?
For reference, I'm using ckeditor 4.4.1.0 plugin and application.js contains:
//= require jquery
//= require js/jquery-ui-1.10.3.custom
//= require cinnabar.js
//= require ckeditor/ckeditor
//= require ckconfig.js
//= require_tree .
//= require_self
This works for me in same environment:
ckeditor {
config = "/assets/ckconfig.js"
...
I placed the file in grails-app\assets\javascripts\ckconfig.js
Related
I know there are 100's of resources on this but I have spent over 3 hours and just can't seem to figure this out. Everything is working locally but when I push to Heroku all hell breaks loose.
Here is my folder structure:
vendor
-assets
--custom
---impression
----css
-----file1.css
-----file2.css
-----file3.css
I have it called in my application.scss like this
#import "impression/css/animate.css";
#import "impression/css/bootstrap.min.css";
#import "impression/css/main.css";
#import "impression/css/responsive.css";
#import "impression/fonts/font-awesome.min.css";
#import "impression/fonts/simple-line-icons.css";
#import "impression/css/slicknav.css";
#import "impression/css/nivo-lightbox.css";
#import "impression/css/animate.css";
#import "impression/css/owl.carousel.css";
#import "impression/css/colors/default.css";
I have tried every combination of moving things in and out of the different subdirectories of vendor locally but each time when I push to production it shows 404's for the files.
The weird part is all the js assets are compiling find and showing up. They are in the file structure like this
vendor
-assets
--custom
---impression
----js
-----file1.js
-----file2.js
-----file3.js
And are called in application.js like so
//= require impression/js/bootstrap.min.js
//= require impression/js/jquery.countdown.min.js
//= require impression/js/smooth-scroll.js
//= require impression/js/wow.js
//= require impression/js/owl.carousel.min.js
//= require impression/js/jquery.slicknav.js
//= require impression/js/nivo-lightbox.js
//= require impression/js/form-validator.min.js
//= require impression/js/contact-form-script.js
//= require impression/js/main.js
I tried having it precompile assets during the build on heroku and it seemed to work but it would get so far and fail because it was precompiling some gem files assets too and they were breaking.
I think your application asset files folder structure are not correct. I modified your folder structure and you can try and check.
Here is the modified folder structure:
vendor
-assets
--stylesheets
---custom
----impression
-----file1.css
-----file2.css
-----file3.css
Here's your application.scss file
#import "custom/impression/animate";
#import "custom/impression/bootstrap.min";
#import "custom/impression/main";
#import "custom/impression/responsive";
#import "custom/impression/font-awesome.min";
#import "custom/impression/simple-line-icons";
#import "custom/impression/slicknav";
#import "custom/impression/nivo-lightbox";
#import "custom/impression/animate";
#import "custom/impression/owl.carousel";
#import "custom/impression/colors/default";
Here's JS modified folder structure
vendor
-assets
--javascripts
---custom
----impression
-----file1.js
-----file2.js
-----file3.js
And are called in application.js like so
//= require custom/impression/bootstrap.min
//= require custom/impression/jquery.countdown.min
//= require custom/impression/smooth-scroll
//= require custom/impression/wow
//= require custom/impression/owl.carousel.min
//= require custom/impression/jquery.slicknav
//= require custom/impression/nivo-lightbox
//= require custom/impression/form-validator.min
//= require custom/impression/contact-form-script
//= require custom/impression/main
I hope it should work.
I just upgraded my app from Rails 4.2.7 to Rails 5.0.0.1. I used RailsDiff to make sure I had everything covered and I believe I did. So far everything has worked well up until the loading of my app.
Now I am seeing this error:
Sprockets::ArgumentError at /
require_tree argument must be a directory
This is my application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope. *
*= require_tree .
*= require_self
*/
This is my application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
This is what the server log looks like:
Started GET "/" for ::1 at 2016-09-02 09:08:19 -0500
ActiveRecord::SchemaMigration Load (1.5ms) SELECT "schema_migrations".* FROM "schema_migrations"
User Load (1.7ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 2], ["LIMIT", 1]]
Processing by ProfilesController#index as HTML
Rendering profiles/index.html.erb within layouts/application
Profile Load (1.6ms) SELECT "profiles".* FROM "profiles"
Rendered profiles/index.html.erb within layouts/application (45.8ms)
Completed 500 Internal Server Error in 367ms (ActiveRecord: 6.3ms)
DEPRECATION WARNING: #original_exception is deprecated. Use #cause instead. (called from initialize at /.rvm/gems/ruby-2.3.1#myapp/gems/better_errors-2.1.1/lib/better_errors/raised_exception.rb:7)
DEPRECATION WARNING: #original_exception is deprecated. Use #cause instead. (called from initialize at /.rvm/gems/ruby-2.3.1myapp/gems/better_errors-2.1.1/lib/better_errors/raised_exception.rb:8)
Sprockets::ArgumentError - require_tree argument must be a directory:
sprockets (3.7.0) lib/sprockets/directive_processor.rb:182:in `rescue in block in process_directives'
sprockets (3.7.0) lib/sprockets/directive_processor.rb:179:in `block in process_directives'
sprockets (3.7.0) lib/sprockets/directive_processor.rb:178:in `process_directives'
I am using no plugins of any kind. It is a fairly simple/vanilla app. The only styling is from the default scaffold.scss.
What could be causing this?
I finally figured it out. So because I am doing the upgrade, RailsDiff didn't tell me that I was missing something.
So the error message wasn't incorrect, however, what I forgot to do was to create an empty directory.
In my app/assets/javascripts/cable.js, I had the following:
//= require_tree ./channels
However, I forgot to actually create that folder.
So to fix this, all I had to do was create an empty folder within app/assets/javascripts called channels. Also, because git ignores empty directories, within that newly created folder, I also had to create an empty file called .keep.
So once I did the following, everything worked like a charm:
Create folder: app/assets/javascripts/channels
Create empty file within that folder: app/assets/javascripts/channels/.keep
Everything works perfectly now.
Faced a similar, but not the same issue. During upgrade of Rails from 5.2.3 to 5.2.4.1
$ rails s returned:
Expected to find a manifest file in `app/assets/config/manifest.js` (Sprockets::Railtie::ManifestNeededError)
But did not, please create this file and use it to link any assets that need to be rendered by your app:
Example:
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
and restart your server
Ok, followed the instructions, created manifest.js with the above content, then
$ rails s returned:
Sprockets::ArgumentError at / link_tree argument must be a directory
Fix:
create empty .keep file in a new images folder (which was possibly deleted at some point in the past without any immediate consequences):
app/assets/images/.keep
The problem occurs when using rails new appname --skip-keeps flag - it still tries to require non-existing files and generally is a mistake on Rails team side.
This is just a different approach to the described problem, the main solution works perfectly;
Open app/assets/javascripts/cable.js
Remove autogenerated //= require_tree ./channels, from line 6
Keep your codebase as small as possible, someone skipped the .keeps for a reason.
If you are not using ActionCable
then removed all content inside app/assets/javascripts/cable.js
Rails 5.0.0.1
Ruby 2.3.1
I would of thought this would have been a presents issue but then again, it works for the person who created the tutorial Im following in conjunction with this. So, nothing fancy:
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= cable
//= require_self
//= require react_ujs
window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
require('./components');
Components.js
require( 'babel-polyfill' );
// Manually add components to window and global
// so that react_ujs and react-server can find them and render them.
window.Home = global.Home = require("./components/Home.js").default
// same issue if use *.es6.jsx
Home.js (or es6.jsx)
import React from 'react';
import ReactDOM from 'react-dom';
class Home extends React.Component {
render() {
return (
<div className="form-control">
Home baby
</div>
)
}
}
export default Home;
Gemfile
gem "browserify-rails"
gem 'react-rails
config/application.rb
# Configure Browserify to use babelify to compile ES6
config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 ] ]"
unless Rails.env.production?
# Work around sprockets+teaspoon mismatch:
Rails.application.config.assets.precompile += %w(spec_helper.js)
# Make sure Browserify is triggered when
# asked to serve javascript spec files
config.browserify_rails.paths << lambda { |p|
p.start_with?(Rails.root.join("spec/javascripts").to_s)
}
end
npm
npm install browserify browserify-incremental babelify babel-preset-es2015 --save
The Unexpected token refers to the first <div>, why?
The JSX syntax is not being compiled, probably because you need to add the react babel preset to your browserify config.
install package:
npm install --save-dev babel-preset-react
config/application.rb
config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]"
I installed textAngular with Bower. But I'm having a hard time getting it to work. Anyone tried to add it with Rails and Bower?
$ rake bower:install && find . -name "*textAngular*" -print
./lib/assets/bower_components/textAngular
./lib/assets/bower_components/textAngular/dist/textAngular-sanitize.min.js
./lib/assets/bower_components/textAngular/dist/textAngular.min.js
./lib/assets/bower_components/textAngular/src/textAngular-sanitize.js
./lib/assets/bower_components/textAngular/src/textAngular.js
./lib/assets/bower_components/textAngular/src/textAngularSetup.js
Adding textAngular to application.js works. But adding textAngular-sanitize failes. A bit weird as I can see the source file next to textAngular.
// [snipp...]
//= require textAngular => No complaining here.
//= require textAngular-sanitize => couldn't find file 'textAngular-sanitize'
//= require_tree .
And added to app.js
angular
.module('app', ['ngRoute', 'restangular', 'textAngular'])
.config(['$routeProvider', 'RestangularProvider', function($routeProvider, RestangularProvider) {
The important line is
./lib/assets/bower_components/textAngular/dist/textAngular-sanitize.min.js
Your require should look like:
//= require textAngular/dist/textAngular-sanitize
For some reason, after running rake assets:precompile, require statements in application.js are left untouched. Here is how compiled application.js looks like:
//
//= require jquery
//= require jquery_ujs
//= require_directory .
//= require twitter/bootstrap
//= require rails.validations
$(document).on("click", '.show', function(e) {
var value = $(this).attr('data-big-url');
$('.image_container img').attr('src', value);
return false;
});
That //= require statements should be substituted!
Any ideas?..
THanks!
EDIT: uncompiled application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_directory .
//= require twitter/bootstrap
//= require rails.validations
$(document).on("click", '.show', function(e) {
var value = $(this).attr('data-big-url');
$('.image_container img').attr('src', value);
return false;
});
// $(window).load(function() {
// $('#featured').orbit();
// // $('#featured-bg').orbit();
...
It looks exactly the same!
Here is my production.rb:
config.serve_static_assets = true
config.assets.compress = false
config.assets.compile = false
config.assets.digest = false
I may be wrong, but I don't believe you'd want require ____ in a precompiled JS file
The reason is the require lines are called directives which guide
the creation of a manifest.json file for your assets. The
manifest basically tells Rails which files make up your assets,
allowing it to compile them effectively
You can see the precompiling documenation from the Rails guide here - basically says that the files you get from precompilation are "standalone" files. They are meant to be loaded as static files, without any preprocessors or directives
I would try this:
$ rake assets:precompile RAILS_ENV=production
This will compile the files as if it were the production environment, and storing them in /public/assets as a naked JS / CSS file
Finally, I solve the issue:
I had to downgrade to Ruby 1.9.3.
Unfortunately, I still don't know what was the reason of the issue, but now I have my assets compiling correctly.