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.

   

Add a controller

1. Press Ctrl twice and start typing controller. Select rails generate controller and press Enter.

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

3. Open config/routes.rb and add the following line inside the Rails.application.routes.draw do ... end block:

   root "welcome#index"

Update a view

Add a button to the generated view.

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

2. Replace the contents of the file with the following code:

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

   The button has an identifier that will be used by the JavaScript handler.

Add a JavaScript handler

Create a JavaScript file that handles the button click.

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

2. Press Alt+Insert and select JavaScript File.

3. Enter hello as the file name and press Enter.

4. Add the following code to hello.js:

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

   This script finds the button and attaches a click handler to it.

5. Open app/javascript/application.js and add the following import:

   import "./hello"

   Keep the imports generated by Rails in this file.

6. Open app/views/layouts/application.html.erb and verify that it loads the generated application bundle:

   <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

Build the JavaScript bundle

1. In the Project view, open package.json.

2. Verify that the scripts section contains the following build command:

   { "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" } }

   The --sourcemap option generates source maps for debugging the original JavaScript files.

3. Click the Run icon in the gutter next to the build script and select Run 'build'.

   RubyMine runs yarn build and displays the result in the Run tool window.