My OS is Linux and my distribution is debian-bullseye. My ruby version is 3.1 and my rails version is 7.
I created a rails project
rails new chat --skip-javascript
cd chat/
I installed hotwire
bundle add hotwire-rails
rails hotwire:install
And I got this error
You must either be running with node (package.json) or importmap-rails (config/importmap.rb) to use this gem.
I am trying to follow this tutorial
you only need type this
C:\Users\app>rails importmap:install
press enter
then you will see the code below..
Add Importmap include tags in application layout
insert app/views/layouts/application.html.erb
Create application.js module as entrypoint
create app/javascript/application.js
Use vendor/javascript for downloaded pins
create vendor/javascript
create vendor/javascript/.keep
Ensure JavaScript files are in the Sprocket manifest
append app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
create config/importmap.rb
Copying binstub
create bin/importmap
after that type
C:\Users\app>rails hotwire:install
press enter
you will see the code below
Create controllers directory
create app/javascript/controllers
create app/javascript/controllers/index.js
create app/javascript/controllers/application.js
create app/javascript/controllers/hello_controller.js
Import Stimulus controllers
append app/javascript/application.js
Pin Stimulus
Appending: pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true"
append config/importmap.rb
Appending: pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
append config/importmap.rb
Pin all controllers
Appending: pin_all_from "app/javascript/controllers", under: "controllers"
append config/importmap.rb
Import Turbo
append app/javascript/application.js
Pin Turbo
append config/importmap.rb
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
it's just a demo, made back when rails 6 was a thing. rails 7 has it by default. rails new chat is all you need. it'll set up all the javascript for you. hotwire-rails is not a thing anymore. Alex
Related
I have Rails 7.0.4.
I generated the project using this command.
rails new myproject --database=postgresql -j esbuild --css bootstrap
Thus, I don't have a file named config/importmap.rb.
How do I load a single file with custom JS?
I tried creating a file with a single console.log here.
// ./app/javascript/new.js
console.log('Hi')
and then load this file into the entry point application.js like this.
// ./app/javascript/application.js
import "./new.js"
But I don't see any console.log.
Thanks in advance~!
You're using esbuild which means you have to compile/bundle your javascript. Rails gives a command to start the server and run esbuild:
bin/dev
This is somewhat glanced over in the readme, but it's there: https://github.com/rails/jsbundling-rails
This should work just fine:
// app/javascript/application.js
import "./new"
I'm trying to configure Rails 7 app to load all js Stimulus controllers automatically.
I use esbuild as JavaScript bundler.
If we're using Stimulus for Rails together with an import map, the integration will automatically load all controller files from app/javascript/controllers.
// app/javascript/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "#hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
This #hotwired/stimulus-loading package comes from importmap
# config/importmap.rb
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
But it looks like #hotwired/stimulus-loading has not been published to NPM yet and is meant to be used only with importmaps in Rails.
When we're using Webpacker as JavaScript bundler we can use #hotwired/stimulus-webpack-helpers package to get the same form of autoloading behavior.
// app/javascript/application.js
import { Application } from "#hotwired/stimulus"
import { definitionsFromContext } from "#hotwired/stimulus-webpack-helpers"
window.Stimulus = Application.start()
const context = require.context("./controllers", true, /\.js$/)
Stimulus.load(definitionsFromContext(context))
But when we're using esbuild JavaScript bundler on the official Stimulus page recommended to import each controller individually.
Stimulus works with other build systems too, but without support for controller autoloading. Instead, you must explicitly load and register controller files with your application instance:
// app/javascript/application.js
import { Application } from "#hotwired/stimulus"
import HelloController from "./controllers/hello_controller"
import ClipboardController from "./controllers/clipboard_controller"
window.Stimulus = Application.start()
Stimulus.register("hello", HelloController)
Stimulus.register("clipboard", ClipboardController)
So my question is:
Is it possible to configure Rails 7 with esbuild as JavaScript bundler to load all js Stimulus controller files from app/javascript/controllers automatically?
Manually running a task to include all stimulus controllers
To include a new stimulus controller that you manually created in the app/javascript/controllers/index.js file, you can run:
rails stimulus:manifest:update
Automatically including a newly created stimulus controller
When you create a stimulus controller from the terminal with the generator, rails will automatically run the manifest:update command and so include your controller in js build.
rails generate stimulus controllerName
Watching for live file changes to stimulus controllers
To watch for live changes to your stimulus controllers, an additional watch process is needed. This additional watch process is appended to the Procfile.dev file after installing esbuild.
# Procfilde.dev
web: rails s -p 3000
css: yarn build:css --watch
js: yarn build --watch
The yarn build --watch command triggers the build command specified in the packacke.json file.
{
"name": "myapplication",
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds"
}
}
Rails 7.0.2.2
Windows 10 Professional
So I made a new rails 7 app in windows. It no likey windows so in order to get it working I used a workaround as the 'glob pattern is not recognized' when using the ./bin/dev command. I modified the package.json to add another script:
"build": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds",
"build:jscontrol": "esbuild app/javascript/controllers/application.js --bundle --sourcemap --outdir=app/assets/builds",
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
and to boot up the app as ./bin/rails I instead use foreman start -f Procfile.dev
I altered the configuration initializers/devise.rb uncommenting and changing the value.
config.scoped_views = true
Don't Judge :P
And it works fine until... I started using devise.
rails new . --javascript=esbuild --css=bootstrap
I proceeded to add the devise gem to the Gemfile
bundle install
rails generate devise:install
rails generate controller home index as per usual
I changed the rails routes accordingly. root to: 'home#index
I altered the configuration initializers/devise.rb uncommenting and changing the value.
config.scoped_views = true
Afterwards I boot the server using the command previously mentioned to verify and it works.
rails generate devise User Check.
rails generate devise:views users Check.
When styling the generated views I would refresh the browser. Nothing changed. No Styles were added. Shapoopy.
I deleted all but the model User. By way of rails destroy or manually escorting them to the recycle bin. I started the server. I stopped the server I cleared all the caches deleted every tmp file to no avail.
Then AFTER I DELETED THE VIEWS AND THE CONTROLLER with the server running, I refreshed the browser by reflex without changing the url ( localhost:3000/users/sign_up ) the default form popped right up. I checked the terminal and noticed it was pulling the views from Ruby30-x64/lib/ruby/gems/3.0.0/gems/devise-4.8.1/app/views/devise/shared/_links.html.erb and I can't get it to stop and pull from the app's views I had generated.
Rather Verbose I know. I added the workaround only for clarity and specificity.
Regards
-jaxton
I installed stimulus into my Rails 6 app using rails webpacker:install:stimulus, but then decided I don't need it. What is the command to uninstall something that was installed via webpacker? I tried rails webpacker:uninstall:stimulus but that didn't work, and googling only led me to people asking how to uninstall webpacker itself.
The webpacker:install:stimulus task does three things:
Adds stimulus to the dependencies in package.json
Creates app/javascript/controllers (plus a couple of sample files)
Adds import "controllers" to the bottom of app/javascript/application.js
So, presumably removing those three things will suffice to uninstall.
I have tried using npm package reactstrap.
My components:
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
I'm getting the following error:
ExecJS::ProgramError at /dir/xyz
TypeError: require is not a function
The webpacker-gem is the way to go for react + rails, not sprockets, which is ok for jQuery style JS, but not for complicated ES6-based stacks.
From the README:
To use Webpacker with React, create a new Rails 5.1+ app using --webpack=react option:
# Rails 5.1+
rails new myapp --webpack=react
(or run bundle exec rails webpacker:install:react in a existing Rails app already setup with Webpacker).
The installer will add all relevant dependencies using Yarn, changes to the configuration files, and an example React component to your project in app/javascript/packs so that you can experiment with React right away.
Note that you'll be using yarn from then on, instead of npm.