Um trying to load a javascript file as follows to my html.erb file
<script src="/public/javascripts/test.js" type="text/javascript" />
its available on the public folder and its in the root directory
root/public/javascript
but it giving me an error saying
"NetworkError: 404 Not Found - http://0.0.0.0:3000/public/javascripts/test.js"
what could possibly wrong ? is there a different way to include a javascipt file in rails ?
If the javascript file is in any of the asset folders (assets, vendor, bundle) for Rails 3.x) you can add the script to your html.erb file by adding the following:
<%= javascript_include_tag('test.js') %>
You don't use public. Public is the implied root of the server.
The server will look for a file in public, then try to route it through your router if it doesn't find a match.
You also may want to consider using the javascript_include_tag helper if you are using the asset pipeline.
Rails defaults to using the asset pipeline, so custom js files need to go into the app/assets/javascript directory. Than you wouldn't even need to load the file in your view.
but as to your question.
To serve the files from the public directory, you will need to enable a config setting
config.serve_static_assets = true
You'd commonly put this in one of you environment config files.
To server files from public directory do above setting and hit
config.serve_static_assets = true
<script src="/javascripts/test.js" type="text/javascript" />
Related
I'm currently trying Rails 6.0.0.rc1 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs. Now, I want to add a couple of js files, but for some reason they don't get imported and I can't find any documentation on how this can be done in Rails 6. I tried a couple of things:
Create a new folder custom_js under app/javascript/packs, putting all my js files there and then add a require "custom_js" to application.js.
Copy all my js files under app/javascript/channels (which should be included by default, since application.js has require("channels")).
Adding require_tree . to application.js, which was the previous approach.
How can I load my own js files inside a Rails 6 application?
Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:
Add your custom example.js javascript file to app/javascript/packs.
Add require("packs/example") to your application.js file.
I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.
It isn't necessary to include the ".js" extension inside of the require.
You need to do the following steps to add custom javascript file to rails 6 (webpacker)
1.Create your custom file named custom.js in app/javascript/packs directory.
For testing purpose, write any console.log in it.
// app/javascript/packs/custom.js
console.log("custom js file loaded")
2. Go to your application.html.erb and add the following line at the end of your <head></head>
<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>
3. Now execute rake assets:precompile
This will pack your javascript code (including our custom file we just added)
Now reload your page and you should see the message
custom js file loaded
In your browser console.
My custom js has functions which will be called by embedded javascript of serveral html pages. Following snippet works in Rails6, compiled by webpacker:
put custom js file in folder app/javascript/packs e.g. app/javascript/packs/my_functions.js
say_hello = function(a_text){
console.log("HELLO "+ a_text);
}
add javascript_pack_tag in html file, e.g. index.html.erb .
<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->
<script>
$(document).ready(function(){
say_hello('ABer')
});
</script>
Note : This line is inside html body, not in head
<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>
I have a working edit view to which I'm trying to add CKEditor. I've downloaded the CKEditor folder/files and placed them in my_app/vendor/assets/ckeditor/. I'm using Rails 4 and this folder is included in the asset pipeline. To application.js I've added //= require ckeditor.js and to application.css #import "contents";.
In my edit view I have (I'd like to use the inline option):
<%= f.text_area :page, contenteditable: 'true' %>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'image_page' );
</script>
Problem: Now when loading the edit view, the text field is not displayed as an editable field but just as plain text. There's no way to edit this text and no sign of CKEditor. Any idea what I'm doing wrong?
The page's source code that is being generated, includes:
<textarea contenteditable="true" name="image[page]" id="image_page">
Arbor cubo vel.
</textarea>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'image_page' );
</script>
Update: I got it working by moving the CKEditor files from the vendor folder to the public folder. Could someone perhaps confirm whether or not CKEditor is compatible with the asset pipeline?
I would prefer to place it in the vendor folder if anyway possible. This old post as well as this one refer to something similar (if I place <% var CKEDITOR_BASEPATH = '/ckeditor/'; %> as a header line in application.html.erb my app crashes with the error dynamic constant assignment '.freeze). Could someone with more experience with CKEditor provide a more definitive answer than these old posts?
Try adding the ckeditor assets under either vendor/assets/javascripts for the JavaScript files and vendor/assets/stylesheets for the CSS files (separate the ckeditor assets among those folders)
The whenever an asset is referring to another asset use the asset-url helper instead of url so that this asset is served through the asset pipeline
You also need to include all the assets that you'll put in vendor.... folders in the asset pipeline by //require or import
On a side not you can use the ckeditor gem https://github.com/galetahub/ckeditor it will save you a lot of time also it handles some features out of the box like images upload and gallery of ckeditor
May be the script is executing before the textarea is fully loaded on the DOM. Try to use a post load wrapper to your script like the jquery's:
$(function(){
// ... your code
})
I'm using Rails 4.2.3 and am trying to customize the 404 error page in public/404.html. How can I include images from the asset pipeline?
There's an excellent post how to build dynamic custom error pages. However, as described there, it requires a whole lot of changes to settings that I, as a beginner, am not ready to take. All I want to do is in my 404 page to include 2 images that are in the asset pipeline. Is there an easy way to do this?
If you want your error page to use images from the asset pipeline, then you have two options:
Use dynamic error pages (I've written a tutorial here).
Monkey patch the asset pipeline to allow non-fingerprinted assets.
Since you are ruling out option #1 for now, I think the monkey patch is the way to go. Install the non-stupid-digest-assets gem in your app. This will patch the asset pipeline so that it produces non-fingerprinted assets (in addition to the fingerprinted ones).
# Gemfile
gem "non-stupid-digest-assets"
And of course, don't forget:
$ bundle install
Then in your 404.html, just refer to the asset as if it were a static file, like this:
<img src="/assets/my-image.png">
This assumes the actual image is stored here in your project:
app/assets/images/my-image.png
Keep in mind, that content of public folder is visible to anyone.
There for, following the convention, I would create assets folder (if you don't have it already), then images and stylesheets.
And create regular html page
- app
...
- public
- 404.html
- images
- image1.jpg
- image2.jpg
- stylesheets
- style.css
Then in your 404.html you will reference it like so:
<img src="./assets/images/image1.jpg" alt=""/>
Add the images to the public folder.
Use root relative path to the images on the public 404/500 html pages.
<img src="/my-logo.png"/>
In a new application, routes that are not found are directed to the static html page found in public/404.html. As you have found this is a .html not .html.erb file which means you have to do fancy stuff to access your asset pipeline.
If you don't want to go through the trouble of creating a dynamic page, the easiest way is to copy* the two images from your asset pipeline into public/assets (or a sub-directory) and then include them with:
<img src="assets/image.jpg">
*You may also be able to use a symbolic link but it may cause problems depending on how your production server is set up.
in your 404.html add...
<head>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
</head>
<body>
<img src="simple.gif">
</body>
I want to bypass the assets pipeline since a very, very silly processing error is completely preventing my app from working.
For example, I want to replace this:
<%= javascript_include_tag 'jquery' %>
with something like
<script type="text/javascript" src="public/javascripts/jquery.js"></script>
How would I go about doing this? whenever I try to use this, the link just ends up pointing to a nonexistent .js file even if I actually put the file in public/javascripts
Remove public, correct path is /javascripts/jquery.js.
How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of...views, controller, template, and nothing seems to work.
What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.
Put the CSS files in public/stylesheets and then use:
<%= stylesheet_link_tag "filename" %>
to link to the stylesheet in your layouts or erb files in your views.
Similarly you put images in public/images and javascript files in public/javascripts.
If you are using rails > 3 version, then there is a concept called asset pipeline. You could add your CSS to
app/assets/stylesheets
then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)
read more here about the asset pipeline
Use the rails style sheet tag to link your main.css like this
<%= stylesheet_link_tag "main" %>
Go to
config/initializers/assets.rb
Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( main.css )
Restart your server.
I did the following...
place your css file in the app/assets/stylesheets folder.
Add the stylesheet link <%= stylesheet_link_tag "filename" %> in your default layouts file (most likely application.html.erb)
I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.
The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.
Place any new sheet .css (or other) in app/assets/stylesheets
Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.
You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1
To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.
With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.
Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.