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

telemachus
Python Testing With Pytest - Chapter 2, warnings for “unregistered custom marks” While running the smoke tests in Chapter 2, I get these...
New
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
New
AleksandrKudashkin
On the page xv there is an instruction to run bin/setup from the main folder. I downloaded the source code today (12/03/21) and can’t see...
New
jskubick
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New
adamwoolhether
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
New
hgkjshegfskef
The test is as follows: Scenario: Intersecting a scaled sphere with a ray Given r ← ray(point(0, 0, -5), vector(0, 0, 1)) And s ← sphere...
New
jonmac
The allprojects block listed on page 245 produces the following error when syncing gradle: “org.gradle.api.GradleScriptException: A prob...
New
kolossal
Hi, I need some help, I’m new to rust and was learning through your book. but I got stuck at the last stage of distribution. Whenever I t...
New
Henrai
Hi, I’m working on the Chapter 8 of the book. After I add add the point_offset, I’m still able to see acne: In the image above, I re...
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

brentjanderson
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
New
foxtrottwist
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New
New
New
New
New
NewsBot
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New

Sub Categories: