Ryan Martin

Yeah, just watched Stimulus JS episode again and can definitely see the benefits of utilizing it for form validations via listeners. No doubt that would be extremely useful in many instances for me.

As for Rails.ajax helper, I assume you mean simply utilizing the baked in AJAX helpers for Rails. That's what I'm using in my forms:

<%= form_with(model: @content) %>

Again, appreciate the advice. Honestly, I use very little JS and as a part-time hobbyist it's ridiculously difficult to keep up with front-end development as it changes so rapidly. 

For now, I want to integrate AJAX when possible while staying well within the boundaries of Rails and their relationship together. This includes form submissions and partial rendering primarily. 

As of a few weeks ago, I learned and now utilize (webpack/Tailwind) for front-end and it's fantastic. In addition to significantly decreasing time spent on front-end dev,  it's also opened up the many available features of webpack, something I was not familiar with. 

I see the .babelrc config is in my app as a result so I'll start down that path!

It's a lot to take in! ;-)

Anyways, thanks for your time and input today. It's been tremendously helpful! 

Will do. Any recommendations? Should I continue to utilize JQuery when Rails seems to be moving away? Or am I wrong in assuming so just because of the dependency drop?

Stimulus?

FTW Chris Oliver! F.T.W.

You, sir, are a machine. Greatly appreciated!

And icing on the cake is a quick look at the docs reveals the above method is much faster than direct innerHTML manipulation.

THANKS AGAIN!

I've got a standard Comment.model - I'm trying to use AJAX to render partial. Using JQuery works but I'm trying to use VanillaJS only. The AJAX is working but it's rendering the markup inside of the partial.

_comment.html.erb:

<div class = "bg-yellow">
   <%= comment.title %> 
</div>

document.getElementById("stuff").append("<%= j render @content %>");

When I add a comment via form it outputs the following via AJAX:

<div class = "bg-yellow"> Metallica and Megadeath </div>

Of course, I only want to render the string, not the markup. Can someone assist with my horrible JS skills? Thx!

Yeah, I'm messing with this and running TailwindCSS/SASS in parallel with the Rails Asset Pipeline/Bootstrap.

As mentioned, that's what's so powerful about Webpack (as I've recently discovered and love) is that it operates on its own asset pipeline.

Ultimately, Bootstrap classes conflict with Tailwind but the methods mentioned above are what I used to implement SASS via Webpack. Yarn to install packages along with webpack.config.js to export modules to application.scss file.

My pleasure. 

Have you successfully re-created the Comments/Modules/Models that Chris went over in the video?  Have you successfully integrated AJAX thus far? Once you understand the workflow that was followed you can simply extend it using another instance(s) of poly associations or simple has_many/belong_to associations.

I will update a git repo with an example this weekend if you need something to look through. In the meantime, if you've got a repo feel free to link to it and I will give it a look.

We can get you squared away.

Hey Jake,

Just to make sure I understand your goals, you want to integrate a Comment + Reply model(s) integration with a Rails app? Are you using AJAX?

I'd be glad to assist, just need a little more info. Can you reference which GoRails episode you're
 talking about?

Good deal! Now on to actually using Tailwind. Enjoy!

I was getting that error during failed tests as well. You're headed in the right direction then.

Have you had a look at the browser console (Chrome Developer Tools/Console) once your production page loads?

Is it displaying any errors?

SUCCESS!

A single sentence found on the github repo for webpacker rails gem solved my issue. 

Alas, this was all I needed to run via CLI:

NODE_ENV=production ./bin/webpack

HEY SIMON! 

I just successfully deployed via AWS Codestar EC2 instance! If your assets are compiling and running successfully in DEVELOPMENT, then run the following command via CLI for compiling Tailwind prior to PRODUCTION:

NODE_ENV=production ./bin/webpack

The above command successfully compiled my app for PRODUCTION state and renders CSS. What's really awesome is that Tailwind runs alongside the rails asset pipeline so I can still use Bootstrap as well. 

Very powerful front-end developing options. Let me know if you succeed!

Thanks Chris. 

I've got the buildpacks installed and executing in order (Node, then Ruby). Deployment is normal until compile where it's throwing the following error in log:

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'

I'm assuming I need a webpack.config.js in root (which I've added):

var tailwindcss = require('tailwindcss'); 
module.exports = { 
   plugins: [
       tailwindcss('./app/javascript/src/tailwind.js'), 
       require('autoprefixer') 
   ]
 }

I'm getting there.... :-)

Simon,

I'm working on exactly the same project. Have you attempted connecting to EC2 with Secure Shell and updating version? I successfully connected to my EC2 instance today using the SSH extension on my Chromebook. 

If you have a git repo for your project I'd be happy to clone as I'm currently trying to deploy a Rails app using Tailwind via AWS Codestar.

Cheers!

I deleted a separate thread I started in the JS section as I didn't realize this one existed. 

In a nutshell, I love Tailwind and would like to use it for a forthcoming project but can't get it to deploy via Heroku. Everything appears to install correctly until compile. At that point, the logs indicate an error when loading tailwind module.

Has anyone successfully deployed to Heroku or AWS Codestar?

Thanks for this. It helps me quite a bit!

Hey Simon,

Have you considered using AWS SDK and Rails Active Storage? I've recently started using it and it works amazingly well. Easy to install as well. Let me know if you need help!