Add a JavaScript asset to a Rails application

Add a controller

1. Press Ctrl twice and start typing controller. In the invoked list, select rails generate controller and press Enter.

   

2. In the invoked Add New Controller dialog, set the controller name to Welcome and add one action called index. Click OK.

   

3. RubyMine will create a controller, view, and several other files. This process will be displayed in the Run tool window. In this window, click the index.html.erb file.

   

4. To set the home page of your application to index, open the config/routes.rb file and add the following line within the Rails.application.routes.draw do ... end block:

   root 'welcome#index'

   Learn more at Setting the Application Home Page.

Update a view

Add a button to the created view.

1. In the Project view (Alt+1), open the app/views/welcome/index.html.erb file.

2. Replace the current content of the file with the following code:

   <h1>Hello, Rails!</h1> <button id="greet-user-button">Hello!</button>

   Apart from the existing static text within the h1 tag, the view file now contains a button element with a specific identifier that will be used in JavaScript.

Add a JavaScript handler

Now, create a JavaScript file that will handle the button click.

1. In the Project view, select the app/javascript directory.

2. Press Alt+Insert and select JavaScript File.

   

3. Specify the file name (hello) and press Enter.

   

4. In the created hello.js file, add the following code:

   const button = document.getElementById("greet-user-button") if (button) { button.addEventListener("click", () => { alert("Hello!, JavaScript!") }) }

   In this script we:

   • Find the button by its identifier.

   • Attach a click handler that displays an alert and logs a message to the console.

5. To make this file available in the application, open app/javascript/application.js and add:

   import "hello"

6. Ensure that the application layout includes JavaScript assets. Open app/views/layouts/application.html.erb and verify that it contains:

   < %= javascript_importmap_tags %>

7. Open the config/importmap.rb file and add the following line:

   pin "hello"

Start a web server

To see our application in action, you need to start a web server.

1. Press Ctrl twice and start typing development.

2. Click the Run icon in the upper right corner.

3. RubyMine will show the process of preparing the application to run.

   

4. Open http://127.0.0.1:3000 in your browser. Then click the Hello! button to see the alert.