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.

0 788 2

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

johnp
Hi Brian, Looks like the api for tinydb has changed a little. Noticed while working on chapter 7 that the .purge() call to the db throws...
4 1231 1
New
jamis
The following is cross-posted from the original Ray Tracer Challenge forum, from a post by garfieldnate. I’m cross-posting it so that the...
4 2354 3
New
mikecargal
Title: Hands-on Rust: question about get_component (page 295) (feel free to respond. “You dug you’re own hole… good luck”) I have somet...
1 1160 5
New
rmurray10127
Title: Intuitive Python: docker run… denied error (page 2) Attempted to run the docker command in both CLI and Powershell PS C:\Users\r...
9 1256 4
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...
0 1127 1
New
Keton
When running the program in chapter 8, “Implementing Combat”, the printout Health before attack was never printed so I assumed something ...
2 1019 2
New
NaplesDave
I am using Android Studio Chipmunk | 2021.2.1 Patch 2 Build #AI-212.5712.43.2112.8815526, built on July 10, 2022 Runtime version: 11.0....
0 1403 2
New
mcpierce
@mfazio23 I’ve applied the changes from Chapter 5 of the book and everything builds correctly and runs. But, when I try to start a game,...
0 1160 10
New
SlowburnAZ
Getting an error when installing the dependencies at the start of this chapter: could not compile dependency :exla, "mix compile" failed...
1 1103 10
New
dachristenson
I just bought this book to learn about Android development, and I’m already running into a major issue in Ch. 1, p. 20: “Update activity...
0 2059 6
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’...
1033 17470 383
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
177 8632 77
New
AstonJ
SpaceVim seems to be gaining in features and popularity and I just wondered how it compares with SpaceMacs in 2020 - anyone have any thou...
30 3579 14
New
Rainer
Not sure if following fits exactly this thread, or if we should have a hobby thread… For many years I’m designing and building model air...
200 3586 78
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...
166 7775 69
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
21 11128 7
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...
52 4894 22
New
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...
5 8045 3
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
40 2292 21
New

Sub Categories: