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

brianokken
Many tasks_proj/tests directories exist in chapters 2, 3, 5 that have tests that use the custom markers smoke and get, which are not decl...
New
herminiotorres
Hi @Margaret , On page VII the book tells us the example and snippets will be all using Elixir version 1.11 But on page 3 almost the en...
New
jgchristopher
“The ProductLive.Index template calls a helper function, live_component/3, that in turn calls on the modal component. ” Excerpt From: Br...
New
jskubick
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
New
digitalbias
Title: Build a Weather Station with Elixir and Nerves: Problem connecting to Postgres with Grafana on (page 64) If you follow the defau...
New
oaklandgit
Hi, I completed chapter 6 but am getting the following error when running: thread 'main' panicked at 'Failed to load texture: IoError(O...
New
dsmith42
Hey there, I’m enjoying this book and have learned a few things alredayd. However, in Chapter 4 I believe we are meant to see the “>...
New
taguniversalmachine
Hi, I am getting an error I cannot figure out on my test. I have what I think is the exact code from the book, other than I changed “us...
New
Keton
When running the program in chapter 8, “Implementing Combat”, the printout Health before attack was never printed so I assumed something ...
New
gorkaio
root_layout: {PentoWeb.LayoutView, :root}, This results in the following following error: no “root” html template defined for PentoWeb...
New

Other popular topics Top

PragmaticBookshelf
Stop developing web apps with yesterday’s tools. Today, developers are increasingly adopting Clojure as a web-development platform. See f...
New
PragmaticBookshelf
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
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
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
PragmaticBookshelf
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
PragmaticBookshelf
25 puzzles that will make you a better C programmer by challenging your knowledge of the language, and explaining the technical details o...
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New
PragmaticBookshelf
Escape callback hell and ship fast, clean code that reads as smoothly as it runs. Squash bugs and stamp out memory leaks with an intuitiv...
New
PragmaticBookshelf
As digital systems increasingly run the world, mastery of the recurring patterns of software development risk is the key to fast and effe...
New
xiji2646-netizen
There’s a GitHub repo at forrestchang/andrej-karpathy-skills that’s sitting at 97.8k stars. It’s a single CLAUDE.md file with four behavi...
New

Sub Categories: