All threads / Using Webpacker and Rails on AWS Elastic Beanstalk

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Using Webpacker and Rails on AWS Elastic Beanstalk

Simon Cooper asked in General
Can anyone point me in the direction of documentation/tutorial for using Webpacker with Rails on Elastic Beanstalk? I have been playing with Tailwind CSS (which is great btw), and I'm getting a version requirement error when trying to upload:

Webpacker requires Node.js >= 6.0.0 and you are using 4.6.0

Does anyone know where/how I can upgrade my Node version?
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!
Hey Ryan,

I've managed to do a successful deploy to beanstalk with the following in `.ebextensions`.  Although I have no CSS styling in the production app. One step forwards! 

commands:
  01_install_yarn:
    command: "sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo && curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash - && sudo yum install yarn -y"
  02_download_nodejs:
    command: curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
  03_install_nodejs:
    command: yum -y install nodejs



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!

yeah everything is fine locally.  I've just tried this, and whilst it seems to compile locally, I've ran eb deploy with no errors, but the live app still has not CSS styling. 

Looks like it did compile, as I'm not getting this error in the logs:


 ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/css/application.css
Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
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?
Good point.  

I'm getting a 404 on both the application.css and application.js

application-a5cbbd551a90e5fa75fc8997e17a9236.css Failed to load resource: the server responded with a status of 404 (Not Found)

SOLVED IT:

Just needed to run:

eb setenv RAILS_SERVE_STATIC_FILES=enabled
Good deal! Now on to actually using Tailwind. Enjoy!
I spoke too soon.  The issue is back:

Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

Can't work this out.  Starting to think it's too much hassle.  
Solved it ;)

Moved tailwaindcss to dependencies instead of devDependencies in package.json
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 34,885+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.