Example app on how to get things running in Rails #4
Comments
Laravel Mix makes webpack a no-brainer. It is not coupled to PHP or Laravel at all, you can use it in any project. Repo: https://github.com/JeffreyWay/laravel-mix Installation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/installation.md The only exception to it not being coupled to Laravel this is the versioned paths found in You may need to write your own helper function to do a lookup in the mix |
@jvanbaarsen depending on which version of Rails (4.2+) you're using, the Webpacker gem makes this pretty straightforward. Please note: I haven't used this in production, and I only fired up a Rails app to start playing with Tailwind. Also, I'm also not much of a JS hero either. 😎 This is a very basic process I followed and was able to get up and running pretty quick. Someone may have a more efficient way to do this. If I had more time today, I'd work on making this part of the Webpack build process.
Webpacker will add the required files for Webpack, as well as create the
(edit) ALSO NEED TO INSTALL TAILWIND:
Paste in the contents of this file.
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
This builds the CSS for the application.
In one terminal window:
I hope this helps. As I mentioned, this is just my first attempt at it. I'm glad to share with you (and hope you'll share with me!) as I experiment more with Rails + Tailwind. |
@jasoncharnes Thanks! Yeah I have been trying to do this with Webpacker, but I wasn't sure where to place the code that is in the docs for Webpack (The tailwind docs that is). I tried placing that in a new file called: I'll give this a shot and see if I can get it deployed to Heroku! |
@jasoncharnes Great, I got this working locally. Only thing that I had to change was the following: "yarn add tailwindcss --dev" -> When I ran that command the tailwindcss was not added to It does seem that the config js (The one in the root tailwind.js) is not picked up. I'm looking into ways of getting this to work :) |
Nice glad you guys are figuring this out! Once you feel like you've got it ironed out pretty well, would you mind sharing a simple bare bones Rails repo with everything setup? Would be great for helping out other trying to integrate with Rails 👍 |
@adamwathan Yes! Collaborative learning 💪 |
@jasoncharnes / @adamwathan It looks like I have the full app running now! I'll do another test with a brand new app, after that is working I'll post it as an example app. |
@jasoncharnes I got it all working. For now I quickly created a Heroku app and an example repo without any readme: Repo: https://github.com/jvanbaarsen/tailwindcss-rails-example All the configuration has been done in this commit: jvanbaarsen/tailwindcss-rails-example@9e00e27 The most import thing is to remove the Tomorrow I'll write some proper documentation with that readme, and if @adamwathan would accept a PR for it a small headline in the official docs on how to set it up and a link to that example repo (Or even better, maybe they can import it under the tailwindcss namespace and collect a bunch of example apps) |
@jvanbaarsen Could you add your example to the awesome-tailwind list? |
@m1guelpf Where do you want me to add it? Under Resources or Open Source? |
@jvanbaarsen I'd put it under resources, but creating a quickstart subsection in the resources section would be the best thing. |
@jvanbaarsen I got Tailwind to work with Rails (5.1.4) and Webpacker gem without replacing the Here is my |
@jonaskay Thanks for sharing :-) Yeah I got that figured out in the end as well! The syntax feels so weird :P |
This is very helpful, and I can't emphasize enough how important it is to build the Tailwind file using: I find that its easiest to add this to your See the "scripts" key in my
This way, typing Thanks again for the help in here, it was great! |
@skywinston For me there is no need to use the build script. With the example app I posted earlier you can run |
@jvanbaarsen You're absolutely correct. I couldn't get this to work until I ran |
@jvanbaarsen Do you know if this is watching changes to the |
@skywinston I believe in his example it is watching the style.css file. But in my example repo (https://github.com/jvanbaarsen/tailwindcss-rails-example) it is watching this file: https://github.com/jvanbaarsen/tailwindcss-rails-example/blob/master/app/javascript/src/application.scss |
@skywinston I'm in the process of writing a blogpost on step by step setting up Tailwind in your rails post. It should be up beginning next week (I'll post here when it's up 👍 ) |
Here's my take on it https://github.com/artmann/rails-tailwind-example |
@jvanbaarsen Can you update the steps for a successful deploy to heroku? I've had no issues running tailwindcss locally but fail to deploy via heroku or aws. |
@DawgOnKing I'd be happy to help. I'm successfully deploying Rails 5.2/Edge apps using Tailwind to Heroku right now. What version of Rails are you using and are you using Webpacker to manage everything? |
@joeybeninghove Greatly appreciated! I'm running "locally" on Cloud9 via Rails 5.2 and webpacker gem. |
@DawgOnKing Oh ok, well I'm only working with Heroku at the moment, not Cloud9 or AWS directly. I'll still try to push up a full repo later if I have a chance, but for now, here is a quick Gist showing the relevant files that I've set up to work: https://gist.github.com/joeybeninghove/882ca5a2ea2917ffca087609a7e4c181 This a pretty vanilla set up honestly, as Heroku takes care of automatically running the webpack compile during deployment. |
@joeybeninghove - Thanks again for your help. At quick glance, my setup is exactly the same as yours. I will create another app and post specific errors I'm getting from heroku during compile (which is where it's failing). |
@DawgOnKing Did you setup the buildpacks for Heroku? |
@jvanbaarsen - short answer, no. I attempted to via console but attempts have been unsuccessful. Did you use CLI? |
Here's a breakdown for getting Tailwind up and running on Cloud9 machines. This isn't the AWS setup although I have that running as well. I just need additional steps for deploying via Heroku and AWS CodeDeploy which I will work on tomorrow. Thanks again for assistance with deployment! |
@DawgOnKing I believe I set the Buildpacks in the Heroku interface itself. It is very important that the Nodejs buildpack comes before the ruby buildpack. Otherwise it won't work. |
@DawgOnKing @jvanbaarsen That’s true about the buildpacks, but in my recent deployments to Heroku, they just figured that out for me automatically. I didn’t have to do anything special to manually configure the buildpacks. I’m not sure how or what about the Rails apps I’m deploying that makes that the case, but I’m happy it’s working like that for me. :) Sent with GitHawk |
@jvanbaarsen I set both of those via the CLI and they are loading in order according. Here's the output of running heroku buildpacks via CLI: === stormy-sands-xxxxx Buildpack URLs
When I attempt to push project to Heroku, I'm getting errors/failures during compile. But warnings as well when building dependencies: -----> Building dependencies AND FINALLY THE FAILURES DURING COMPILE: [2] ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css 799 bytes [built] [failed] [1 error] ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css Module build failed: ModuleBuildError: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer' IN SUMMARY |
@jvanbaarsen I appear to be down to a single error for deployment: ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css remote: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' |
@DawgOnKing I'm using Webpacker for this. See my example repo: https://github.com/jvanbaarsen/tailwindcss-rails-example |
Finally solved by setting NODE ENV production variable via CLI. Thanks to all for assistance! |
Note, the current version of Tailwind (v0.5.1) now requires your CSS file to look like this:
If you use the old config, most classes will be missing and you'll likely experience a prolonged spike in blood pressure. |
I manage to put together a gem to easily install tailwindcss with Rails - https://github.com/IcaliaLabs/tailwindcss-rails - please let me know how it goes! |
Thanks @jasoncharnes rails webpacker:info Thanks @jasoncharnes again! |
Have you deployed this to production anywhere? I've been trying to get the
EDIT So, I'm not sure if this feels like it happens regularly to anyone else, but 10 minutes after being exasperated enough to post here, I figured it out. The issue was installing Tailwind as a |
I'm not much of a JS hero, so all the build tools: Webpack, Postcss etc feel like one big magic show to me. Is there anyone around here that has more experience with these tools that could create an example app with the bare configuration that is required for Ruby on Rails?
In return I'll make sure that the steps to set it up are added to the docs :-)
The text was updated successfully, but these errors were encountered: