Modern CSS with Tailwind: setting up Rails app

Community PragProg Customers
,
1

In case this helps anyone, I’ve had issues setting up the rails source code. Here were the solutions:

In Gemfile, change

gem 'rails'

to

gem 'rails', "~> 6.1.3.1"

Then run

$ bundle update rails

Then change

gem "activerecord-postgres_enum"

to

gem "activerecord-pg_enum"

and run

$ bin/setup

Then, I needed to jump into the three view files: box.html.erb, intro.html.erb and page.html.erb and remove a LOT of these. 38 in total:

<%

which seem to appear before and after most elements.

Finally, I needed to delete the .browserslistrc file as it was conflicting.

THEN, I was able to run

rails server

and see the app.

I hope this helps someone and fingers crossed these changes can be made to the files to make it a bit easier for the next person.

1 Like
2

@gilesdotcodes - Thanks for this! :man_superhero:

2 Likes
4

I set the rails version to 6.1 otherwise I received an error about an active_something gem. I’m glad it’s working, bit frustrating and IMO PragPub should make sure to test these things at some interval and provide fixes.

When loading the app the following errors are shown…

❯ rails s
=> Booting Puma
=> Rails 6.1.4.4 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.5.2 (ruby 3.0.0-p0) ("Zawgyi")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 3218850
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
Started GET "/" for 127.0.0.1 at 2022-01-04 19:17:13 -0500
   (0.7ms)  SELECT sqlite_version(*)
   (0.1ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by HomeController#intro as HTML
  Rendering layout layouts/application.html.erb
  Rendering home/intro.html.erb within layouts/application
[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Error [BrowserslistError]: /home/user/code/books/tailwind-css/main contains both .browserslistrc and package.json with browsers
    at /home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:333:15
    at eachParent (/home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:49:18)
    at Object.findConfig (/home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:305:20)
    at Function.loadConfig (/home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:223:37)
    at Object.load (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/browserslistTargetHandler.js:67:18)
    at getDefaultTarget (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/target.js:15:45)
    at /home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/defaults.js:126:10
    at F (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/defaults.js:68:15)
    at applyWebpackOptionsDefaults (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/defaults.js:125:2)
    at createCompiler (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/webpack.js:73:2) {
  browserslist: true
}

[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Error [BrowserslistError]: /home/user/code/books/tailwind-css/main contains both .browserslistrc and package.json with browsers
    at /home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:333:15
    at eachParent (/home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:49:18)
    at Object.findConfig (/home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:305:20)
    at Function.loadConfig (/home/user/code/books/tailwind-css/main/node_modules/webpack/node_modules/browserslist/node.js:223:37)
    at Object.load (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/browserslistTargetHandler.js:67:18)
    at getDefaultTarget (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/target.js:15:45)
    at /home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/defaults.js:126:10
    at F (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/defaults.js:68:15)
    at applyWebpackOptionsDefaults (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/config/defaults.js:125:2)
    at createCompiler (/home/user/code/books/tailwind-css/main/node_modules/webpack/lib/webpack.js:73:2) {
  browserslist: true
}

  Rendered home/intro.html.erb within layouts/application (Duration: 1818.8ms | Allocations: 8097)
  Rendered layout layouts/application.html.erb (Duration: 1818.9ms | Allocations: 8178)
Completed 500 Internal Server Error in 1825ms (ActiveRecord: 0.0ms | Allocations: 11692)


  
ActionView::Template::Error (Webpacker can't find media/images/music.svg in /home/user/code/books/tailwind-css/main/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:
{
}
):
     7: 
     8: <div class="flex">
     9:   <div>
    10:     <%= image_pack_tag("media/images/music.svg", size: "100x100") %>
    11:   </div>
    12:   <div>
    13:     <h1>Welcome to NorthBy</h1>
  
app/views/home/intro.html.erb:10