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.

Popular Prag Prog topics Top

jimschubert
In Chapter 3, the source for index introduces Config on page 31, followed by more code including tests; Config isn’t introduced until pag...
New
jeffmcompsci
Title: Design and Build Great Web APIs - typo “https://company-atk.herokuapp.com/2258ie4t68jv” (page 19, third bullet in URL list) Typo:...
New
sdmoralesma
Title: Web Development with Clojure, Third Edition - migrations/create not working: p159 When I execute the command: user=> (create-...
New
herminiotorres
Hi! I know not the intentions behind this narrative when called, on page XI: mount() |> handle_event() |> render() but the correc...
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
New
nicoatridge
Hi, I have just acquired Michael Fazio’s “Kotlin and Android Development” to learn about game programming for Android. I have a game in p...
New
adamwoolhether
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
New
hazardco
On page 78 the following code appears: <%= link_to ‘Destroy’, product, class: ‘hover:underline’, method: :delete, data: { confirm...
New
s2k
Hi all, currently I wonder how the Tailwind colours work (or don’t work). For example, in app/views/layouts/application.html.erb I have...
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

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
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
AstonJ
Inspired by this post from @Carter, which languages, frameworks or other tech or tools do you think is killing it right now? :upside_down...
New
AstonJ
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
PragmaticBookshelf
Author Spotlight: Karl Stolley @karlstolley Logic! Rhetoric! Prag! Wow, what a combination. In this spotlight, we sit down with Karl ...
New
PragmaticBookshelf
Author Spotlight: Sophie DeBenedetto @SophieDeBenedetto The days of the traditional request-response web application are long gone, b...
New

Latest in PragProg

View all threads ❯