DEV Community: Christian Sedlmair

System Testing

Christian Sedlmair — Wed, 20 Nov 2024 13:44:10 +0000

Do you know Playwright?

Playwright is emerging as the new standard for front-end testing.

It is faster and more recent than Selenium, and its syntax is clearer than that of Capybara-DSL. See the discussion here: https://discuss.rubyonrails.org/t/rails-7-capybara-speedup-possible/87571.

Notice

Playwright can be used with the Capybara DSL, which is ideal for existing projects. Initially, I tried to keep the old tests in the Capybara DSL while writing the new ones in the Playwright DSL within the same project. However, this approach was unsuccessful, so ultimately I rewrote everything in Playwright.

As recommended, it is configured to create a new instance at the start of each run and open/close a new window for every test.

Playwright within Rails/RSpec

Derived from Docs

Setup

Remove all Selenium-gems
add gem capybara within group test
add gem playwright-ruby-client within group test
npm i --save-dev playwright (unlike docs do not install it by npx i ... because it would not install dependencies)

a File like playwright_helper.rb

(for a project with devise authentication, it uses the log_in method)

require 'rails_helper'
require 'capybara'
require 'playwright'
require 'support/playwright_utils'

RSpec.configure do |config|
  config.include Devise::Test::IntegrationHelpers, type: :system
  config.include PlaywrightUtils

  # Docs https://playwright-ruby-client.vercel.app/docs/article/guides/rails_integration_with_null_driver

  video_dir = '/tmp/rails-system-test-videos'

  config.before(:all, type: :system) do
    FileUtils.rm_rf(video_dir)
    FileUtils.mkdir_p(video_dir)

    # Launch Playwright and browser once for all tests
    @playwright = Playwright.create(playwright_cli_executable_path: './node_modules/.bin/playwright')
    # Use browser_type to access Firefox
    @browser = @playwright.playwright.firefox.launch(headless: !playwright_debug_mode?)
  end

  config.after(:all, type: :system) do
    # Close browser and Playwright after all tests
    @browser&.close
    @playwright&.stop
  end

  class CapybaraNullDriver < Capybara::Driver::Base
    def needs_server?
      true
    end
  end

  module PlaywrightPageScreenshotFix
    def save_screenshot(*_args)
      # No-op: videos already saved on failure.
    end
  end
  Playwright::Page.include(PlaywrightPageScreenshotFix)

  Capybara.register_driver(:null) { CapybaraNullDriver.new }

  config.around(driver: :null) do |example|
    driven_by :null

    # Create a new context and page for each test
    @browser.new_context(
      record_video_dir: video_dir,
      baseURL: Capybara.current_session.server.base_url
    ) do |context|
      context.enable_debug_console! if playwright_debug_mode?
      context.set_default_timeout(2000.0)
      @page = context.new_page

      # Capture JavaScript console logs
      @browser_console_logs = []
      @page.on('console', lambda do |message|
        @browser_console_logs << { type: message.type, text: message.text }
      end)
      @page.on('pageerror', lambda do |exception|
        @browser_console_logs << { type: 'exception', text: exception.message }
      end)

      # LOGIN PROCESS
      sign_in @your_desired_user # => set your user there

      example.run

      # Save video only if the test fails
      if example.exception
        puts "file://#{@page.video.path}"
      else
        FileUtils.rm(@page.video.path) if @page.video&.path
      end
    end
  end
end

support/playwright_helpers.rb

Playwright::Page.class_eval do
  def path
    URI(url).path
  end
end

# Helper methods for Playwright in system-ssr-tests specs.

module PlaywrightHelpers

  def playwright_debug_mode?
    # detects if a test is running in debug mode
    # works for rubymine
    @playwright_debug ||= $LOADED_FEATURES.join.include?('ruby-debug-ide')
  end

  def playwright_breakpoint
    @page.pause if playwright_debug?
  end

  def clear_js_logs
    @browser_console_logs = []
  end

  def wait_for_js_log(matcher, timeout: 2000, type: nil)
    wait_for_js_log_condition(
      "browser log to #{matcher.is_a?(Regexp) ? 'match' : 'equal'} «#{matcher}»",
      timeout: timeout
    ) do
      js_logs(type: type).any? { |text| text.match?(matcher) || text == matcher }
    end
  end

  def wait_for_js_debug(matcher, timeout: 2000)
    wait_for_js_log_condition(
      "browser debug to #{matcher.is_a?(Regexp) ? 'match' : 'equal'} «#{matcher}»",
      timeout: timeout
    ) do
      js_debugs.any? { |text| matcher === text || text == matcher }
    end
  end

  def wait_for_js_info(matcher, timeout: 2000)
    wait_for_js_log_condition(
      "browser info to #{matcher.is_a?(Regexp) ? 'match' : 'equal'} «#{matcher}»",
      timeout: timeout
    ) do
      js_infos.any? { |text| matcher === text || text == matcher }
    end
  end

  def wait_for_js_warning(matcher, timeout: 2000)
    wait_for_js_log_condition(
      "browser warning to #{matcher.is_a?(Regexp) ? 'match' : 'equal'} «#{matcher}»",
      timeout: timeout
    ) do
      js_warnings.any? { |text| text.match?(matcher) || text == matcher }
    end
  end

  def wait_for_js_error(matcher, timeout: 2000)
    wait_for_js_log_condition(
      "browser error to #{matcher.is_a?(Regexp) ? 'match' : 'equal'} «#{matcher}»",
      timeout: timeout
    ) do
      js_errors.any? { |text| text.match?(matcher) || text == matcher }
    end
  end

  def wait_for_js_exception(matcher, timeout: 2000)
    wait_for_js_log_condition(
      "browser exception to #{matcher.is_a?(Regexp) ? 'match' : 'equal'} «#{matcher}»",
      timeout: timeout
    ) do
      js_exceptions.any? { |text| text.match?(matcher) || text == matcher }
    end
  end

  def js_logs(type: nil)
    logs = if type.is_a?(Array)

             invalid = type - ALLOWED_CONSOLE_TYPES
             if invalid.any?
               raise ArgumentError, "Invalid console type(s) in array: #{invalid.map(&:inspect).join(', ')}. " \
                 "Allowed: #{ALLOWED_CONSOLE_TYPES.map(&:inspect).join(', ')}"
             end

             @browser_console_logs.select { |log| type.include?(log[:type].to_sym) }
           elsif type.present?

             sym = type.to_sym
             unless ALLOWED_CONSOLE_TYPES.include?(sym)
               raise ArgumentError, "Invalid console type: #{type.inspect}. " \
                 "Allowed: #{ALLOWED_CONSOLE_TYPES.map(&:inspect).join(', ')} or nil"
             end

             @browser_console_logs.select { |log| log[:type] == type.to_s }
           else
             @browser_console_logs
           end
    logs.map { |l| l[:text] }
  end

  def js_debugs
    js_logs(type: :debug)
  end

  def js_infos
    js_logs(type: :info)
  end

  def js_errors
    js_logs(type: :error)
  end

  def js_warnings
    js_logs(type: :warning)
  end

  # Some implementations use "exception" type – keep if needed
  def js_exceptions
    js_logs(type: :exception)
  end

  def js_issues
    js_logs(type: %i[error warning exception])
  end

  private

  def wait_for_js_log_condition(notice, timeout: 2000, &condition)
    start_ms = Time.now.to_f * 1000

    loop do
      return true if condition.call

      elapsed_ms = (Time.now.to_f * 1000) - start_ms
      if elapsed_ms > timeout
        raise "Timeout: waited #{elapsed_ms.round} ms for #{notice}"
      end

      sleep 0.1
    end
  end

  ALLOWED_CONSOLE_TYPES = %i[log debug info error warning exception].freeze

end

and a test:

require 'playwright_helper'

RSpec.describe "pw", type: :system do

    it 'test' do
      @page.goto(root_path)
      @page.locator('body').wait_for(state: :visible)
      # => without the .wait_for the test would not fail without the body-tag
    end
end

Here is a Code Example

Mainly importand docs, for writing tests, may be the API Coverage and Page class

Overview

A new kind of working

Christian Sedlmair — Sun, 16 Apr 2023 10:16:17 +0000

https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1

Streamlining, guidelines such as "convention over configuration" and a concise naming convention were the beginning of the success of the rails.

2021 DHH published Rails-7 fulfilling a vision and there is an expectation that we can now build React-like applications, but as a true full-stack development with much less effort than a front-end separated application.

Along the way I found some details:

Streamline Stimulus naming npm vite-stimulus-initializer
Working consistently with turbo means that part of the page hasn't changed between page changes. So they need to be refreshed in some other way: Popups often have content that needs to be refreshed when the popup or menu opens. I don't use lazy loading frames, but set a javascript trigger when the menu opens and reloads that part, and then set a trigger on `turbo:render' that makes sure all menus and popups are closed when a link is clicked.
Streamlining rendering of turbo frames

With all this and Vite as the frontend engine, full stack development feels like it should. Building such an app is much easier than separating frontend and backend, is minimally more effort than a classic Rails app bild React-like frontend apps, but with one huge advantage: having a consistent testing (rspec / capybara) over the whole app.

Rails was the most agile framework from the start. Then others caught up. These are added values that can make Rails an interesting framework for years to come.

https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1

P.S.:
As a alternative to the default trix editor i found Jodit because of issue on summernote on vite

Setup Stimulus on Vite

Christian Sedlmair — Fri, 21 Oct 2022 20:55:34 +0000

Overview

Why?

Stimulus is essentially an initialiser. In this sense, it is an essential and necessary part of the setup, together with Hotwired.

However, when it comes to building reactive components, we believe it is the wrong tool for the job.

Setup

$ npm i @hotwired/stimulus vite-stimulus-initializer

application.js

import { initStimulus } from "vite-stimulus-initializer";

const controllers = import.meta.glob('../javascript/**/*-controller.js', { eager: true })
initStimulus(controllers, 2, { debug: true, exclude: ['components', 'views'], folderSeparator: '-'  })

See naming options on vite-stimulus-initializer

Test Code

javascript/controllers/hello-controller.js

By the filename, the controller will be hooking on any element with data-controller="admin-hello".

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

    connect() {
        // connect fires after the controller has found a corresponding element.
        console.log("Stimulus is connected", this.element)
    }

    static targets = [ "name" ]

    greet() {
        const element = this.nameTarget
        const name = element.value
        console.log(`Hello, ${name}!`)
    }
}

any view in .haml

%div{ 'data-controller' => 'admin-hello' }
  %input{:type => "text", 'data-admin-hello-target' => 'name'}/
  %button{ 'data-action' => "click->admin-hello#greet" } Greet

same in html.erb

<div data-controller="admin-hello">
  <input data-admin-hello-target="name" type="text">/</input>
  <button data-action="click->admin-hello#greet">Greet</button>
</div>

by loading this you should see a «Stimulus is connected» in the console. Writing «John» in the input and clicking the button should print out a «Hello John!» on the console.

⚠️ Together with turbo you may see a double «Stimulus is connected» on the console (connect fires 2 times). Based on my Tests it is first firing on the old, element then turbo replaces this and then its firing on the new element, so it should't matter and the new element is not a double-initialized.

Continue with Stimulus Handbook

Good luck!

Overview

Rails UJS on Vite (⚠️ together with Turbo?)

Christian Sedlmair — Sat, 24 Sep 2022 15:45:10 +0000

Overview

Attention ⚠️

Unobstrosive Javascript (UJS) is widely applied in many rails apps. In 5.1 the Rails team made it indepent from jQuery and moved it to the core of rails.

Can UJS live alongside Turbo?

Yes, but not on the easy way, see github/turbo-rails and see recommendations.

Setup Turbo on Vite

Christian Sedlmair — Wed, 21 Sep 2022 12:17:26 +0000

Overview

Prerequisites

Vite

Turbo

Create Rails-7 app with Vite

Christian Sedlmair — Tue, 20 Sep 2022 13:51:56 +0000

Overview

Prerequisites

Vite relies on Node and its included npm which comes with node installation. So, check that Node is up to date on development machine and production server.

⚠️ Since 2.x, yarn, by default, deletes the node_modules folder, see Stackoverflow. For Vite it means that Vite breaks. So i'm going completely without yarn. If Yarn is referenced you can delete all yarn files in project, delete node_modules folder and rebuild it by npm i.

Create Rails App

$ rails new vite-app --skip-javascript && cd vite-app

--skip-javascript is necessary for avoiding conflicts on the next steps. In case of bootstrap/foundation-sites the asset pipeline is helpful so --skip-asset-pipeline is not applied.

Add the packages

see: GitHub/vite_rails

$ bundle add vite_rails
$ bundle exec vite install

Vite Stylesheets

Add entrypoint file application.css

$ touch app/frontend/entrypoints/application.css

Add the vite_stylesheet_tag («+») to layout so that its loaded alongside the asset pipeline

    = stylesheet_link_tag "application" 
+   = vite_stylesheet_tag 'application.css', media: :all // => extension .scss is necessary here
    = vite_client_tag
    = vite_javascript_tag 'application'

Foreman Runner

Add

$ bundle add foreman --group=development

within the development group.

Run the app

On the console, run the app by foreman start -f Procfile.dev, on RubyMine by the Runner.

Pitfall: Call your app by localhost and not by 0.0.0.0 / 127.0.0.0 e.g.. Otherwise the browser cannot access the vite dev server and HMR would not work.

=> You should see your app at http://localhost:5100 and Hot Module Reloading (HMR) should work, but only for files inside frontend folder. Check: Modify a file and check console output.

Full Hot Module Reloading (HMR)

$ npm i --save-dev vite-plugin-full-reload

on vite.config.ts add the lines with the «+»

  import {defineConfig} from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import FullReload from 'vite-plugin-full-reload'

  export default defineConfig({
      plugins: [
          RubyPlugin(),
+         FullReload([
+             'app/views/**/*',
+             // => add paths you want to watch
+         ], {delay: 0}),
      ],
  })

Restart the server

Test Code

create a scaffold or two views and connecting them by link

=> HMR should work even for views, regarding configuration.

Overview

P.S.
Deploy

I'm working on Capistrano, so some notes:

deploy.rb

append :linked_dirs, 'public/vite'

do not append tmp/cache/

see Vite/Discussions/potential issues when deploy with capistrano
do not append tmp/cache/
see Potential issues when deploy with capistrano

Setup Svelte as Custom Element on Vite

Christian Sedlmair — Tue, 20 Sep 2022 13:51:52 +0000

Overview

Why Svelte?

In every app, we have at least one feature that is special and requires complex front-end logic. This is where Svelte gives us and our customers so much pleasure.

Compared to React, which clearly has a larger ecosystem, Svelte is leaner, faster, better integrated, and in my opinion, simply the better technology. To understand the idea of Svelte in comparison to React, please take a look at this entertaining video from Rich Harris, the founder of Svelte, starting at minute 4:13 rethinking reactivity.

Combined with solid system testing (we use Playwright), this is a powerful and reliable framework.

Setup Svelte

For make work svelte fluently we built the gem svelte-on-rails with the related node-package. Please follow the instructions there.

But, first we must make svelte running:

Installation

npm i svelte@latest @sveltejs/vite-plugin-svelte@latest

vite.config.ts

  import { defineConfig } from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import { svelte } from '@sveltejs/vite-plugin-svelte';

  export default defineConfig({
    plugins: [
      RubyPlugin(),
+     svelte({})
    ]
  })

package.json

{
  ...
  "type": "module" // => otherwise @sveltejs/vite-plugin-svelte would break
}

Restart server.

example component frontend/javascript/HelloWorld.svelte

<h1>Hello World from Svelte</h1>

add on application.js:

import HelloWorld from '../javascript/HelloWorld.svelte'
import { mount } from 'svelte';
const tag = document.getElementById('svelte-hello-world')
mount(HelloWorld, { target: tag })

And you should see your component on the browser.

Overview

Setup jQuery on Vite

Christian Sedlmair — Tue, 20 Sep 2022 13:51:47 +0000

Overview

Prerequisites

Vite

Setup

$ npm i @rollup/plugin-inject --save-dev
$ npm i jquery

vite.config.js

add the lines with the «+».

  import { defineConfig } from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import inject from "@rollup/plugin-inject";

  export default defineConfig({
    plugins: [
+       inject({   // => that should be first under plugins array
+         $: 'jquery',
+         jQuery: 'jquery',
+       }),
      RubyPlugin(),
    ],
  })

Restart the Server

frontend/entrypoints/application.js

import $ from 'jquery';
window.$ = $;

Refresh the browser

Testcode

frontend/entrypoints/application.js

window.test_jquery = function() {
    $('#test-jquery').html('jQuery works!')
}

app/views/layout/application.haml

%button#test-jquery{onclick: 'test_jquery()'}
  Test if jQuery is working

=> Click the Button and you should see: «jQuery works!»

Overview

Setup Bootstrap on Rails-7 and Vite

Christian Sedlmair — Tue, 20 Sep 2022 13:51:42 +0000

Overview

This guide may work, but as of 2024, we would prefer to build new projects without any style framework. CSS has become feature-rich enough.

Note

We setup Bootstrap scss files upon asset pipeline for avoide slowing down Vite HMR. Custom stylesheets can be added inside vite app/frontend/. We setup one popover to make it working for checking if all the popper.js and bootstrapp javascript is working.

(Alternative would be: minify the bootstrap CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)

Links

Bootstrap/getting-started/vite

Prerequesites

Vite
jQuery

Asset Pipeline



gem 'bootstrap', '~> 5.2.0'



$ bundle install

add app/assets/stylesheets/_settings.scss for configuring bootstrap sass variables

rename app/assets/stylesheets/application.css to .scss if it isnt already done

remove the lines //= require tree and //= require . if it isnt yet.



@import "settings";
@import "bootstrap";

We use only the scss files from the gem. On Foundation i did the same by smylinking to the yarn package into the asset pipeline. The javascript we get from the yarn package:

Javascript Packages



$ npm i bootstrap @popperjs/core

frontend/entrypoints/application.js



// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip' 

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

// initialize the page
window.addEventListener('load', (event) => {
    initPage();
});
window.addEventListener('turbo:render', (event) => {
    initPage();
});
function initPage() {
      // initialize popovers
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  }
}

Layout

make sure the stylesheet_link_tag is present like described

Test View



%button.btn.btn-lg.btn-danger{"data-bs-content" => "And here's some amazing content. It's very engaging. Right?", "data-bs-title" => "Popover title", "data-bs-toggle" => "popover", :type => "button"} Click to toggle popover

=> If the popover works and looks like this, bootstrap styles are working, popper.js is working and popovers are initialized.

YIPPIE!

Overview

P.S.:

Symlinking SASS variables

Inside frontend/stylesheets/, create a symlink like this:



$ ln -s ../../assets/stylesheets/_settings.scss .

Then from all the stylesheets, by example frontend/stylesheets/components/button.scss, import it like this:



@import '../settings';

symlinks to a file are well handled by git (otherwise than symlinks to a folder) and they should landing well on production machine.

Setup Foundation-Sites on Rails-7 and Vite

Christian Sedlmair — Tue, 20 Sep 2022 13:51:38 +0000

Overview

For many years we were satisfied with zurb-foundation. But in 2024, we would not setup a new project with it. CSS has become enough future-rich, and the requirements of Rails-7, in particular, the initialization steps has changed so that we setup new projects with pure CSS.

Note

Foundation/sass slows down HMR aproximately 12 seconds. So, i use the asset pipeline for Foundation, by symlinking sass files from node_modules/, so Vite is freed from them. Custom Stylesheets, where will be the most changes, resides in frontend folder. Javascript goes the direct way, from the yarn (node_modules/) package to Vite.

(Alternative would be: minify the foundation CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)

Prerequesites

Vite
jQuery

Vite



$ npm i foundation-sites

application.js



import 'foundation-sites'

import $ from 'jquery'; //=> ATTENTION: jQuery has to be imported after foundation. Foundation would not need this, it would be satisfied with the settings in vite.config.js
window.$ = $;

// initialize the page
window.addEventListener('load', (event) => {
    initPage();
});

window.addEventListener('turbo:render', (event) => {
    initPage();
});
function initPage() {
    $(document).foundation();
    console.log('foundation ready');
}

=> Javascript should work, you should see foundation ready on Browser/development/console

Asset Pipeline

add settings file for sass variables and copy foundation

from app-root, run:



$ mkdir ./app/assets/stylesheets/foundation
$ touch ./app/assets/stylesheets/_settings.scss
$ cp -r ./node_modules/foundation-sites/scss ./app/assets/stylesheets/foundation
$ cp -r ./node_modules/foundation-sites/_vendor ./app/assets/stylesheets/foundation

Smarter it would be symlinking them instead of copying. But, at least in my case, git doesnt transfer symlinks to folders (unlike symlinks to files). So, you would have to exclude them with .gitignore and adding them again by a deployment task (in my case capistrano) on the server. Here is gone the easier way.

app/assets/stylesheets/application.scss

make sure that the lines //= require tree and //= require . are removed



@import "settings";
@import "./foundation/scss/foundation";
@include foundation-everything()

cannot tell why, but i was not able to refer the @import directly to the nodes folder, i had to do theese symlinks.

Vite Stylesheets

Create folder stylesheets and symlink settings file



$ mkdir app/frontend/stylesheets
$ cd app/frontend/stylesheets
$ ln -s ../../../app/assets/stylesheets/_settings.scss .
$ cd ../../..

Layout

make sure stylesheet_link_tag "application" and = vite_stylesheet_tag 'application.scss', media: :all are present.

Test view

.haml



%button.button{"data-toggle" => "example-dropdown", :type => "button"} Toggle Dropdown
#example-dropdown.dropdown-pane{"data-auto-focus" => "true", "data-dropdown" => ""}
  Example dropdown.

.html.erb



<button class="button" data-toggle="example-dropdown" type="button">Toggle Dropdown</button>
<div class="dropdown-pane" data-auto-focus="true" id="example-dropdown">
  Example dropdown.
</div>

=> If the Popover works and looks like this, Foundation styles and javascript is working like it should.

Overview

Setup Stimulus on Vite

Christian Sedlmair — Tue, 20 Sep 2022 13:51:34 +0000

Overview

Stimulus is a «modest» Lightwight Library, created by the rails team that connects html and JavaScript. JS and html are in separated files.

Links

Stimulus-docs/Installation/hello-stimulus

Prerequisites

Vite

Setup

$ npm i @hotwired/stimulus stimulus-vite-helpers

see: GitHub/stimulus-vite-helpers

frontend/controllers/index.js

import { Application } from '@hotwired/stimulus'
import { registerControllers } from 'stimulus-vite-helpers'

const application = Application.start()
const controllers = import.meta.globEager('./**/*_controller.js')
registerControllers(application, controllers)

frontend/entrypoints/application.js

import '../controllers'

Test Code

see: Stimulus Docs/is this thing on?

frontend/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus" 

export default class extends Controller {

    connect() { // => «connect» method is similar to initialize method in a ruby-class
        console.log("Hello, Stimulus!")
    }

    static targets = [ "name" ]

    greet() { // => doesnt matter for now, but later for the view
        const element = this.nameTarget
        const name = element.value
        console.log(`Hello, ${name}!`)
    }
}

any view .haml

%div{"data-controller" => "hello"}
  %input{"data-hello-target" => "name", :type => "text"}/
  %button{"data-action" => "click->hello#greet"} Greet

view in .html.erb

<div data-controller="hello">
  <input data-hello-target="name" type="text">/</input>
  <button data-action="click->hello#greet">Greet</button>
</div>

=> Reload page and you should see «Hello Stimulus!» in Browser/developer Console.

=> type «User» in the input, click «Greet» button and you should see «Hello User!» in the Browser/Developer Console

Overview

Setup Node on Debian ..and !Yarn

Christian Sedlmair — Tue, 20 Sep 2022 13:51:28 +0000

Overview

Note

Vite needs Node and its included npm and npx.

⚠️ Yarn Since 2.x, by default, deletes the node_modules folder, see Stackoverflow. For Vite it means that it breaks. Finally i decided for npm, removed all yarn and all folders and files it created on my projects.

Production server

remove all Nodes from root level

Login on production server with root user and check that the output is «command not found». If there would be a stale smylink, the -v would also not work but different output

$ node -v
bash: node: command not found
$ npx -v
bash: npx: command not found
$ npm -v
bash: npm: command not found
$ yarn -v
bash: yarn: command not found

Check /bin/, /sbin/, /usr/bin/, /usr/sbin/ for stale symlinks and check for node_modules/ folder in /bin/lib/.

Check sources (/etc/apt/sources.list, /etc/apt/sources.list.d/ for any nodes, and, if, remove them.

Check on user level

NVM is recommended by npm and i am satisfied since years. Just updating Node version did'nt work for me, so i gone the hard way, removed the old, installed it anew and then installed the current Node version.

`$ rm -rf ~/.nvm`

Like on root level, check that no nodes are there.

Install Node

Regarding to GitHub/nvm#installation, perform:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Logout, Login, and nvm -v should work.

$ nvm install node

=> node -v, npm -v, npx -v should print out the current versions.

⚠️ Pitfall!

In ~/.bashrc there may be a piece of code like this:

# If not running interactively, don't do anything
case $- in
    *i*) ;;
      *) return;;
esac

If shell is running interactive, which means you are not logged in by username and password (login-shell) the code execution ends there.

nvm needs a code piece like this, i have it also in ~/.bashrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

So, make sure that its above the previous mentioned code block. Otherwise, if the app is running, it runs shell as interactive and nvm is not working, while you, by ssh on the server, think its working.