Skip to main content

Using Webpacker and Rails on AWS Elastic Beanstalk

General • Asked by Simon Cooper
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

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.