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
telemachus
Python Testing With Pytest - Chapter 2, warnings for “unregistered custom marks” While running the smoke tests in Chapter 2, I get these...
New
alanq
This isn’t directly about the book contents so maybe not the right forum…but in some of the code apps (e.g. turbo/06) it sends a TURBO_ST...
New
jeremyhuiskamp
Title: Web Development with Clojure, Third Edition, vB17.0 (p9) The create table guestbook syntax suggested doesn’t seem to be accepted ...
New
swlaschin
The book has the same “Problem space/Solution space” diagram on page 18 as is on page 17. The correct Problem/Solution space diagrams ar...
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
redconfetti
Docker-Machine became part of the Docker Toolbox, which was deprecated in 2020, long after Docker Desktop supported Docker Engine nativel...
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
SlowburnAZ
Getting an error when installing the dependencies at the start of this chapter: could not compile dependency :exla, "mix compile" failed...
New
New

Other popular topics Top

PragmaticBookshelf
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
AstonJ
Or looking forward to? :nerd_face:
503 15149 280
New
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
DevotionGeo
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
New
PragmaticBookshelf
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New

Sub Categories: