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"
Related
If I run the following command, Rails will build a new app without ImportMap.
rails new rails_seven_app --database=postgresql --css bootstrap
If I remove the --css flag, Rails will use ImportMap.
I'm curious why this would be the case. ImportMap's seem to add a lot of nice simplicity to a Rails app...why do I need to throw all that away by specifying to use bootstrap?
If I were to not use the --css flag, and then add in Bootstrap after the fact...would there be a downside to that? Could I use ImportMap's to do that?
I'm also unsure if using ImportMaps and esbuild together makes sense, or if that is not necessary. I'm still learning the lay of this new land.
I tried to complete the first suggestion by typing
ruby
rails bin/dev
but I was not able to get an output (The terminal showed no output )
then I realized my code was wrong so I tried once again and typed:
rails create bin/dev
But it showed me an error and said "rails aborted!
Don't know how to build task 'create' (See the list of available tasks with rails --tasks)
Did you mean? db:create"
Then I tried the other command by typing rails in front of it but that didn't work either.
So even though my app works should I bother to solve this warning or skip past it?
TLDR: You need to build your CSS output on every Tailwind style addition so execute bin/dev in a terminal to start your rails server AND watch for tailwind changes.
Hey! Your screenshot is saying that you have successfully installed Tailwind via the tailwind-rails gem.
The end of the message provides instructions on how to build your Tailwind CSS during local development so that Tailwind styles are output to the CSS and applied to your app on localhost:3000 immediately.
Option 1: (documented in the installation output) In your terminal, execute bin/dev to start your rails server AND watch for tailwind changes. This command uses a library called foreman to run two processes, reading from the Procfile.dev that was created in your project's root directory during tailwind installation.
Option 2: (documented in this section of the README) In your terminal, execute rails s in one terminal window and rails tailwindcss:watch in a different window (separate commands)
Option 1 is simpler and probably recommended.
(Based on your screenshot, you are not on a Mac and your exact command may differ, but these work for me on a macbookpro.)
TLDR: I NEED TO USE PRETTIER STANDALONE WITH WEBPACK IN RAILS 5.
Prettier docs: https://prettier.io/docs/en/browser.html
I can make it work with the cdn, but I don't want to use the cdn.
I need to format css in a text editor in the browser. I want to use Prettier Standalone for this.
The app is Rails 5.2 that uses Webpacker and Vue.
I am following the documentation here: https://prettier.io/docs/en/browser.html
I run yarn add prettier
Then, in my .js file I have:
import prettier from 'prettier';
import parserCss from 'prettier/parser-postcss';
prettier.format(".foo{color: red;}", {
parser: "css",
plugins: [parserCss],
});
This works in my local development environment, but when I try to deploy the application, the build fails during Webpack compile.
I think I need to configure my webpack or something. If you need more information just let me know and I will update the question.
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.
I've created a file ebm.rb script to add new entries to a database in rails.
The file is very long, and uses some rails models.
Can I easily execute ebm.rb in the rails console?
I tried something with load and require, but that didn't work. My ebm.rb file is located in C:\Sites\ebm and my rails project in C:\Sites\rublesql.
You can run the code in the file in the context of your rails app with
rails runner
http://guides.rubyonrails.org/command_line.html#rails-runner