Setting up a Blog with Ruby on Rails 7, Bootstrap, and Action Text

This is a short blog post with instructions on how to set up an app with bootstrap 5 and Rails 7, with action text

By Andy Maldonado
Posted: Thu Mar 23 10:54:55 2023

Setting up a blog with Ruby on Rails 7

While this might seem easy at first, the reality is that setting up a blog with Ruby on Rails, Action Text, Bootstrap, and Amazon S3 is more difficult than it should be.

If you're just starting with a new app, and you want to use Bootstrap, follow this guide by MixandGo. You might want to save yourself the hassle and set up Tailwind, it works better with Rails 7 in my opinion. I haven't had any issues with Tailwind. I found a useful guide for setting up the Trix editor with Tailwind as well.
I recommend starting by following the active storage guide after you've set up bootstrap and your app. If you're using S3 things get a bit more complicated.
For app secrets I use the Figaro gem, but make sure you have a method for hiding your AWS access code and secret code.
Then I recommend following the action text guide to begin setting up your Trix editor.
On paper, all of this should work. Once you've set it all up you need to run: rails assets:precompile in your terminal (from your Rails app directory). This should fix your Trix editor. If it doesn't, you can always load the CDN dependency, but I'd imagine you don't want to if you're following this guide.
To set up Amazon S3, follow the active storage guide linked earlier and this video.
VERY IMPORTANT, you must set up CORS permissions in your S3 bucket. Here's an example:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000",
            "https://<yourdomainhere>",
        ],
        "ExposeHeaders": []
    }
]

When trying to upload a file via Trix, what you'll see is a grey bar. If the grey bar doesn't go away, it means you're being blocked due to CORS permissions. Press f12 to load your developer console in Chrome/Firefox and you can easily see that you're being blocked if you haven't set this up correctly. I use http:// for the local host as https:// didn't work. But for production the opposite was true, only https:// worked. Weird! Another thing to note is that you must add any subdomains as well, such as www. if you’re using them.

On paper, once you've followed through each of these steps, you should have a functioning blog app. From there, you'd need to figure out how to differentiate user types and allow access to certain features based on the user role. That's a topic for another blog post, but hopefully this was exciting and interesting to you!

Happy Coding ya'll!

Back to posts