So application.html.erb is basically a template that is responsible for generating the HTML content.
So how does application.js include the code from other JS files?
Below is a snapshot of a typical application.js file:
All you can see a few comments, but these comments carry a lot of information.
//= require jquery
//= require your_custom_file
You may or may not use .js at the end of your file name, as it is optional, and that’s how you can control which files with which order application.js will be compiled.
CSS is no different in this regard and follows a very same principle in delivering the final CSS file named application.css.
What follows is a snapshot of application.css in its early stage of development:
application.css adopts a different approach, and you are supposed to write those manifests in the following way:
*= require name_of_css_file
You can also write your code directly in application.js and application.css file, and those codes will be included.
Same is the case for SASS: if you would like to use SASS, end your CSS file names with .css.sass, or use .css for using the plain CSS code in your project.
So this is it for getting a front-end developer familiarized with Ruby on Rails. Now, no doubt – there is way more to learn even for a front-end developer who just wants to modify the front- end of a Rails web application and doesn’t have the required backend knowledge, but this article will serve as a first step to the giant world of Ruby on Rails. You can head over to Official Rails Guides for getting more information about How does Rails work, and how to work with it effectively. All the best!