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.

@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.

Hi – I think you might have better results starting from one of the sample code chapters or at least looking to see what versions of the gems and NPM modules those chapters actually lock to – Webpacker in particular made breaking changes after the book came out and you need to be on the same version as the book uses for the examples to work (could be some of the directory issues you are seeing), also the turbo-rails and stimulus installers also changed, and I think you’ll need to coordinate the versions of those gems, too)

Thanks,

Noel