Modern Front-End Development for Rails: B7 no main folder in the source code (page xv)

[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 seem to find that folder. Not sure where to start, I tried going with server – no luck:

ActionView::SyntaxErrorInTemplate in SchedulesController#show`)
Encountered a syntax error while rendering template: check <%= turbo_stream_from(current_user, :favorites) %>

Looking at other similar topics I believe I’ll need to start with turbo/01

[noelrappin]

Yeah, sorry, it looks like main didn’t get included in the download, starting with turbo/01 is fine, really running bin/setup should work from any of the directories.

Thanks,

Noel

[nigel-lowry]

turbo/01 doesn’t seem to be there either. Do you mean appendix_hotwire/01?

[gdonald]

There’s no folder “main”, and there’s no folder “turbo/01” in the download… and it’s been months since people pointed this out. Can you not fix the download?

[noelrappin]

Sorry about the confusion, the current starting folder is chapter_01/01 (it was turbo/01 for a while during the beta process).

I’ll look into what I need to do to get that folder copied into main in the download.

Thanks for your patience,

Noel

[gdonald]

Inside chapter_01/01 I ran bin/setup, and then I ran rails s.

When I visit localhost:3000 I get errors:

ActionView::Template::Error (Webpacker can’t find application.css in /rails/nrclient-code/chapter_01/01/public/packs/manifest.json. Possible causes:

1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the webpack -w or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker’s config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
   Your manifest contains:
   {
   “application.js”: “/packs/js/application-e2d1692aebb36c02d64a.js”,
   “entrypoints”: {
   “application”: {
   “assets”: {
   “js”: [
   “/packs/js/runtime-a264c6705547ad01acbb.js”,
   “/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js”,
   “/packs/js/application-e2d1692aebb36c02d64a.js”
   ]
   }
   }
   },
   “js/application-e2d1692aebb36c02d64a.js.map”: “/packs/js/application-e2d1692aebb36c02d64a.js.map”,
   “js/runtime-a264c6705547ad01acbb.js.map”: “/packs/js/runtime-a264c6705547ad01acbb.js.map”,
   “js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js”: “/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js”,
   “js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js.map”: “/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js.map”,
   “runtime.js”: “/packs/js/runtime-a264c6705547ad01acbb.js”
   }
   ):
   5:
   6: <%= csrf_meta_tags %>
   7: <%= csp_meta_tag %>
   8: <%= stylesheet_pack_tag(
   9: “application”,
   10: media: “all”,
   11: “data-turbolinks-track”: “reload”

app/views/layouts/application.html.erb:8

[noelrappin]

Okay, let me look at this – it does work for me starting from the downloaded source code and going through your steps, but webpacker can be flaky and I have seen this error before.

It does seem from that error that webpack didn’t create an entry for the CSS. It’s supposed to parse the file at app/packs/entrypoints/application.scss, but it looks like something went wrong.

A couple of things to try:

• Did the setup run cleanly, and install all the JS packages (specifically did all the sass postcss packages install)? Did it run webpack cleanly, or did it error (It might complain that there are no TypeScript files, that’s fine).
• If setup created a public/packs directory, try deleting it and run bin/webpack – does it complete successfully? Does it create a new public/packs directory? Does the manifest.json file in that directory have an application.css entry?

If that doesn’t work, try running bin/webpack-dev-server in a separate terminal and then running rails s in your main terminal, does that work?

I’m really sorry about this, let me know if this works or what messages you get.

Noel

[nigel-lowry]

Hi Noel,

I bought this book when it came out last year and despite numerous attempts and following advice on the Web, I’ve never got past the first few pages of the first chapter. Are you able to provide a Docker Compose setup for the first chapter with everything working?

[noelrappin]

Thanks for reaching out, I’m sorry that you are having setup issues.

What errors are you getting? Is it Webpacker related, or something else?

I don’t have a docker compose setup ready, but I might be able to help you get set up depending on what your issue is.

Noel

[nigel-lowry]

I’m getting the attached error message when I try to access the Rails app.

This looks like a great book and I’m very keen to understand the JavaScript frameworks described but know so little about setting up such a project to really know my way around. I’ve tried a lot of advice on the Web but none of it worked. I can’t get past p16 of the printed book using the ch01 content from the source code.

[noelrappin]

This is a weird webpacker thing that sometimes happens when webpack gets out of sync.

If setup created a public/packs directory, try deleting it and run bin/webpack – does it complete successfully? Does it create a new public/packs directory? Does the manifest.json file in that directory have an application.css entry? What output do you get from running bin/webpack?

It’s also possible that the webpack compilation step is failing and not producing the manifest for the CSS file.

[noelrappin]

Also this Rails 6: Webpacker::Manifest::MissingEntryError - DEV Community has some advice. You might need to remove the node_modules directory and rerun yarn.