I have a coffee script user.js.coffee, that is only used in certain views. I achieved this by using the following answer:
https://stackoverflow.com/a/6795533/784318
Now I have excluded the script from the application.js. I also removed the //= require_tree . entry.
So my file is available here: http://localhost:3000/assets/user.js however, when I deploy this to the server the assets will be combined in one application.js so how can I make sure that the user.js will be available on production like so: http://myserver.com/assets/user.js?
In environments/production.rb (or the environment you need precompile to occur) uncomment or add this file to the precompile array:
# environments/production.rb
config.assets.precompile += %w( user.js )
Other entries might be already present, just add any other file that you need to access separately.
This file will not get compiled in one big application.js file and will be accessible separately as user.js
You can try putting your user.js file to the public folder of your application directly and configure your asset pipeline to exclude it from the "zipping" process.
Related
In a Ruby on Rails application, how can we require or import a package which was not installed via npm or yarn, but via bundle?
I tried:
//= require package-name
But that doesn't seem to work with webpacker.
require("package-name") doesn't work either (because it is not found in node_modules).
For normal Rails environment, you can use normal directory path if you want to require some files.
Suppose your assets folder looks like this
├── application.js
└── something.js
and you want to require something.js then you just need to write
//= require ./something.js
to your application.js
For a package that you manually place somewhere, then you have to add the place of packages to Rails.application.config.assets.paths
If you are using Rails v5, you can check the config/initializers/assets.rb to see the magic of loading node_modules happened
I have no webpack experience and no solution for your problem.
what about this
https://webpack.js.org/loaders/bundle-loader/
as I read in the documentation paths chapter
Paths
By default, Webpacker ships with simple conventions for where the JavaScript app files and compiled webpack bundles will go in your Rails app, but all these options are configurable from config/webpacker.yml file.
The configuration for what webpack is supposed to compile by default rests on the convention that every file in app/javascript/packs/*(default) or whatever path you set for source_entry_path in the webpacker.yml configuration is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside packs directory that you do not want to be an entry file. As a rule of thumb, put all files you want to link in your views inside "packs" directory and keep everything else under app/javascript.
Suppose you want to change the source directory from app/javascript to frontend and output to assets/packs. This is how you would do it:
# config/webpacker.yml
source_path: frontend
source_entry_path: packs
public_output_path: assets/packs # outputs to => public/assets/packs
Similarly you can also control and configure webpack-dev-server settings from config/webpacker.yml file:
# config/webpacker.yml
development:
dev_server:
host: localhost
port: 3035
If you have hmr turned to true, then the stylesheet_pack_tag generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the stylesheet_pack_tag will create the appropriate HTML tags.
The asset-pipeline loads the files from the path defined with Rails.application.config.assets.paths
This is the output from my rails console
["/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/config",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/images",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/javascripts",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actioncable-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionview-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts",
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/node_modules>,
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/vendor>,
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/images"]
When you do a require in your application.js or application.scss, sprockets will use the ruby require statement to search that file in the predefined paths.
In case of a GEM, it will find it in the .rbenv/version/yourversion folder.
My approach to solve this problem would be to include those files from the gem that you need for you front end app in the correct folder, so just visit the repository from the GEM and copy paste those file in the correct location.
I know this is not a solution to your problem, but I just wanted to help you out.
Bye
Fabrizio
I want to include a custom JavaScript in the app.js file which as the following code:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
The require only works for published packages and using node install but I want to know if there is a way to include a custom js in this file in order to have just one built script in my app (in this case the app.js script).
Add your scripts under this path \resources\assets\js\,
(ex : \resources\assets\js\scripts\my_script.js & \resources\assets\js\another_script.js)
And, add them to \resources\assets\js\app.js
require ('./scripts/my_script.js');
require ('./another_script.js');
Just add your script in resources/assets/js and then run gulp to compile all your scripts into app.js
Check this for more info
I presume you have other files that are not exactly VueJs files and you want to build into a single script. In that case it is not good to put the script in that file. You can however place the files in your resources/assets/js folder and add some code to your gulpfile.js to build all your scripts into one file. Here is the code you might need to add.
mix.scripts([
'filename.js',
]);
By default, the build file will be placed in public/js/all.js.
You can customise that driectory by modifying the example above to something like this
mix.scripts([
'filename.js
], 'path/to/file.js');
I want to stay DRY in my code so I want to auto-load my javascripts file when it matches a controller or/and a method and the .js exists. I added this to my layout
= javascript_include_tag params[:controller] if ::Rails.application.assets.find_asset("#{params[:controller]}.js")
= javascript_include_tag "#{params[:controller]}/#{params[:action]}" if ::Rails.application.assets.find_asset("#{params[:controller]}/#{params[:action]}.js")
So now when I add javascripts/my_controller/my_method.js it automatically loads it, which's nice.
Sadly I must add another line to precompile the asset otherwise an error is thrown (which says I must precompile my .js file) and I didn't find any way around this.
Rails.application.config.assets.precompile += %w( orders/checkout.js )
Does anyone has a solution to avoid tu add manually elements in this configuration ?
NOTE : I already tried to use require_tree . which was just loading all the files on every page and was not working in my case.
You can use a wildcard to allow all JS files included in your views to be precompiled:
config.assets.precompile << '*.js'
I'm struggling to understand how to incorporate vendor js assets into my Rails 4 application.
My app uses bootstrap. The vendor files include a js file, called npm.js. That file has the following in it:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
In my app/assets/javascript folder, I have a file called application.js. In that file, I have:
//= require npm
In my console inspector, I can see an error with the incorporation of the npm file. The error message is:
npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined
I think it might be something to do with the ../.. references that are set out in the npm.js file.
Does anyone know how to adapt this for use in rails 4 (hosted on heroku)?
Thanks very much.
Those require(...) statements in your JS are in the CommonJS format (hence the comment at top) and are commonly used in Node.js but aren't supported in browser environments which is why you're getting that error in the inspector.
One option is to use Browserify with Grunt to link and compile each of those JS files into a single npm.js (though I'd recommend a different name) file. Are you already using browserify_rails, Grunt, or a similar tool to manage your JS files?
If you haven't worked with Grunt/Browserify, or if the above statement is unclear, it's probably best and simplest to just stick to the Rails asset pipeline:
So application.js would become:
//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...
Instead of:
//= require npm
And this should generate equivalent JS to your sample above.
Finally, make sure <path> is included in your config.assets.paths config variable.
I'm having an issue when it comes to requiring individual Javascripts for Jasmine file. My application.js.coffee file doesn't include require_tree as I am loading page specific javascript in a tag in each view.
I added this:
src_files:
- assets/application.js
- assets/*.js
which does not seen to load any JS files that are located in assets/. However, the files are clearly there because if I use
src_files:
- assets/application.js
- assets/feedback.js
The feedback.js file is loaded correctly and the test passes. Why does the wildcard not load the files in directory? Also assets/*/.js doesn't work either for folders.
When the jasmine gem looks up your files on disk it uses Dir.glob to expand out the wildcards (*) in the path. In the case that Dir.glob doesn't find any files, and the path specified doesn't have any wildcards in it, then jasmine will just add that file anyways. This basically assumes you're using sprockets and this will work.
This means, if all of you top-level includes are coffescript files they won't actually match *.js.
You can either:
Add an additional top-level .js file that includes all of your javascript and use that in jasmine.yml
Add each of your top-level files to jasmine.yml individually
Add a *.js.coffee rule to you jasmine.yml and then a negative matcher to remove things you don't want.
The last option would look something like this (the ! tells jasmine to remove files matching this glob from the list of files to include):
src_files:
- assets/application.js
- assets/*.js.coffee
- !assets/subfolder/*.js.coffee