Modern CSS with Tailwind: setting up Rails app

gilesdotcodes · 2021-04-13T23:40:42.708Z

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.

sschroed · 2021-04-21T14:09:52.545Z

@gilesdotcodes - Thanks for this!

frigidcode · 2022-01-05T00:14:47.956Z

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