ants

ants

Modern Front-End Development for Rails: Setting-up Intro, Chapter 1 and 2

Is this book still relevant because setting it up could well be more difficult with newer gems/packages than when you first wrote the book. There is a reason why I haven’t touched the book in almost a year.

Intro:

%bin/setup -> NOK

Needs dummy.ts in app/packs/entrypoints

Chapter 1:

%yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin -> OK

%yarn add postcss-loader sass sass-loader -> OK

%yarn add tailwindcss@latest postcss@latest autoprefixer@latest -> NOK

TypeError: Cannot read property '700' of undefinedType
Error: Cannot read property '700' of undefined
....node_modules/@tailwindcss/typography/src/styles.js:16:65

To overcome this error I chose the last major version and it worked. I really don’t want to see upto which version 3 it breaks at

%npm show tailwindcss versions
%yarn add tailwindcss@2.2.19 postcss@latest autoprefixer@latest -> OK

%yarn add @tailwindcss/forms -> OK
%npx tailwindcss init -> OK

Page 10 - app/javascript/packs/application.scss should be app/packs/entrypoints/application.scss

%yarn add typescript @babel/preset-typescript -> OK

Chapter 2:

%rails hotwire:install -> NOK

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

Couldn't find "app/javascript/application.js".
You must import "./controllers" in your JavaScript entrypoint file

Install Stimulus
     run  yarn add @hotwired/stimulus from "."

You must import @hotwired/turbo-rails in your JavaScript entrypoint file

Install Turbo
     run  yarn add @hotwired/turbo-rails from "."

%less config/webpacker.yml

default: &default
    source_path: app/packs
    source_entry_path: entrypoints

Not sure why it’s installing into app/javascript/controllers and can’t find application.js but I’m not an expert on JS stuff hence reading this book. Trying to read this book.

In the book, there are:
32 references to app/packs/controllers
1 reference to app/javascript/controllers → this is a typo, no?

%less app/packs/entrypoints/application.js

import "channels"
import "core-js/stable"
import "regenerator-runtime/runtime"
import * as ActiveStorage from "@rails/activestorage"
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

app/packs/entrypoints/application.js file hasn’t changed

I’ve given up unless I have done something bleeding obviously wrong.

First Post!

Margaret

Margaret

Editor at PragProg

@ants Thanks for reading. The author is working on a second edition. Readers of 1e will get the new ebook at no cost automatically from their accounts on the PragProg website when it comes out this summer.

Where Next?

Popular Pragmatic Bookshelf topics Top

jimmykiang
This test is broken right out of the box… — FAIL: TestAgent (7.82s) agent_test.go:77: Error Trace: agent_test.go:77 agent_test.go:...
New
ianwillie
Hello Brian, I have some problems with running the code in your book. I like the style of the book very much and I have learnt a lot as...
New
Alexandr
Hi everyone! There is an error on the page 71 in the book “Programming machine learning from coding to depp learning” P. Perrotta. You c...
New
leonW
I ran this command after installing the sample application: $ cards add do something --owner Brian And got a file not found error: Fil...
New
curtosis
Running mix deps.get in the sensor_hub directory fails with the following error: ** (Mix) No SSH public keys found in ~/.ssh. An ssh aut...
New
akraut
The markup used to display the uploaded image results in a Phoenix.LiveView.HTMLTokenizer.ParseError error. lib/pento_web/live/product_l...
New
mert
AWDWR 7, page 152, page 153: Hello everyone, I’m a little bit lost on the hotwire part. I didn’t fully understand it. On page 152 @rub...
New
EdBorn
Title: Agile Web Development with Rails 7: (page 70) I am running windows 11 pro with rails 7.0.3 and ruby 3.1.2p20 (2022-04-12 revision...
New
bjnord
Hello @herbert ! Trying to get the very first “Hello, Bracket Terminal!" example to run (p. 53). I develop on an Amazon EC2 instance runn...
New
davetron5000
Hello faithful readers! If you have tried to follow along in the book, you are asked to start up the dev environment via dx/build and ar...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1037 19435 386
New
AstonJ
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
New
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
New
First poster: joeb
The File System Access API with Origin Private File System. WebKit supports new API that makes it possible for web apps to create, open,...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New

Sub Categories: