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

lirux
Hi Jamis, I think there’s an issue with a test on chapter 6. I own the ebook, version P1.0 Feb. 2019. This test doesn’t pass for me: ...
New
raul
Hi Travis! Thank you for the cool book! :slight_smile: I made a list of issues and thought I could post them chapter by chapter. I’m rev...
New
HarryDeveloper
Hi @venkats, It has been mentioned in the description of ‘Supervisory Job’ title that 2 things as mentioned below result in the same eff...
New
gilesdotcodes
In case this helps anyone, I’ve had issues setting up the rails source code. Here were the solutions: In Gemfile, change gem 'rails' t...
New
patoncrispy
I’m new to Rust and am using this book to learn more as well as to feed my interest in game dev. I’ve just finished the flappy dragon exa...
New
jskubick
I think I might have found a problem involving SwitchCompat, thumbTint, and trackTint. As entered, the SwitchCompat changes color to hol...
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
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
SlowburnAZ
Getting an error when installing the dependencies at the start of this chapter: could not compile dependency :exla, "mix compile" failed...
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
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
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
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
New
PragmaticBookshelf
Author Spotlight James Stanier @jstanier James Stanier, author of Effective Remote Work , discusses how to rethink the office as we e...
New
New
CommunityNews
A Brief Review of the Minisforum V3 AMD Tablet. Update: I have created an awesome-minisforum-v3 GitHub repository to list information fo...
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

Sub Categories: