Add a JavaScript asset to a Rails application

Open the app/views/welcome/index.html.erb file.

Add the following code:

<h1>Hello, Rails!</h1>
<button id="greet-user-button">Hello!</button>
<%= javascript_pack_tag 'hello'%>

Apart from the existing static text within the h1 tag, the view file contains:

• A button tag that adds a button with a specific identifier.

• The javascript_pack_tag helper method is used to create a script tag referencing the pack file. In our code, this should be the hello.js file that will be created in the next chapter.

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

Press Alt+Insert and select JavaScript File in the invoked popup.

Specify the file name (hello in our case) and press Enter.

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

function hello(name) {
    let greeting = "Hello, " + name + "!";
    console.log(greeting);
    alert(greeting);
}

document.addEventListener('turbolinks:load', () => {
    const clickButton = document.getElementById("greet-user-button");
    clickButton.addEventListener('click', (event) => {
        hello('JavaScript')
    });
});

In this script we've:

• Created the hello function that writes a message to the web console and displays an alert dialog with this message.

• Appended an event listener to our web page to invoke the hello function when a user clicks a button.

Press Ctrl twice and start typing development.

Select the Development run configuration from the list and press Enter.

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

Copy the http://0.0.0.0:3000/welcome/index address used by a web server, insert it to the browser's address bar, and press Enter to see the welcome/index page. Then, click the Hello! button to see the alert.