brohemian

brohemian

Modern Front-End Development for Rails: Can't get past the entire first chapter

Trying to build an app from scratch based off of the first chapter is extremely frustrating when trying to use the later/latest versions of related libraries.

I’m using Rails 6.1.4.1 and Webpacker v6.0.0.rc.5:

rails new side_project -d postgresql

gem 'webpacker', github: 'rails/webpacker' (6.0.0.rc.5 at time of installation)

After running rails webpack:install, by default the rails app uses app/javascript/packs instead of app/packs/entrypoints. I renamed the folders to follow the same pattern as in the book.

Second, application.scss does not exist, only application.css in app/assets/stylesheets/application.css, so if we need to rename and copy it over to packs/entrypoints/ it’s unclear.

fork-ts-checker-webpack-plugin is required in the config mentioned on p 57 but it’s not mentioned anywhere that this has to be added with yarn first. yarn add fork-ts-checker-webpack-plugin.

Last, I had to update webpacker.yml to update the source_path and source_entry_path to match the new folder structure:

default: &default
  source_path: app/packs
  source_entry_path: entrypoints
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/webpacker
  webpack_compile_output: true

Even after all this config change, I cannot get the app to compile:
Webpacker can't find application.js

Here is a sample repo where I’ve tried to get this to work, any help would be much appreciated.

EDIT:

Was finally able to get my app to run. It required doing a few different things, some from the webpacker 6 upgrade guide: webpacker/v6_upgrade.md at master · rails/webpacker · GitHub

  1. delete .browserlistrc
  2. delete babel.config.js
  3. yarn add postcss-flexbugs-fixes postcss-import postcss-preset-env (this is especially annoying because they are required inside postcss.config.js by default)
  4. Add a dummy TS file to entrypoints/ or tsconfig.json will complain. I added a empty dummy.ts file.

The lack of documentation for all the config that is required with rails new along with a fresh install of webpacker 6 is unfortunate, hopefully things can be updated soon.

First Post!

noelrappin

noelrappin

Author of Modern Front-End Development for Rails

Yes, it’s extremely frustrating that Webpacker and Rails never quite agreed on file structure, and that Webpacker is continuing to make changes after the book came out.

Webpacker still hasn’t released an official 6.0 version, and Rails 7.0 changes everything all over again.

I’m not quite sure what the most useful thing to do about this, but creating a good place to go for current instructions on setting up the app is probably useful. I’m not sure whether it’s worth doing a Rails 6 one, or doing a Rails 7 one, or both.

Where Next?

Popular Pragmatic Bookshelf topics Top

abtin
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
New
sdmoralesma
Title: Web Development with Clojure, Third Edition - migrations/create not working: p159 When I execute the command: user=> (create-...
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
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
brian-m-ops
#book-python-testing-with-pytest-second-edition Hi. Thanks for writing the book. I am just learning so this might just of been an issue ...
New
jskubick
I’m under the impression that when the reader gets to page 136 (“View Data with the Database Inspector”), the code SHOULD be able to buil...
New
Charles
In general, the book isn’t yet updated for Phoenix version 1.6. On page 18 of the book, the authors indicate that an auto generated of ro...
New
brunogirin
When installing Cards as an editable package, I get the following error: ERROR: File “setup.py” not found. Directory cannot be installe...
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
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...
New

Other popular topics Top

ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
PragmaticBookshelf
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
New
PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
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
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 29994 760
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
mindriot
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
New

Sub Categories: