SRM — Rails React App with S3 Active Storage deployed on Heroku
“Never ever judge anyone. You don’t know their story and what’s really going on. A smile can hide so much.” — Jean Horvy
This is absolutely true, even for a piece of dessert. SRM is a small bakery shop that specializes in giving a story to every piece of dessert that they make. All their products can be customized to any type of events.
With this meaningful story and business model, SRM app was born. SRM app is built with Rails backend and React frontend with Amazon S3.
Here’s a quick tour of SRM app:
Now that we see how SRM app looks like, let’s talk about S3 Active Storage and what to do to ensure that we don’t have an issue deploying the app to Heroku.
- Create an account with Amazon AWS
- Sign in -> click Services -> click S3 -> click “Create bucket” -> Enter a Bucket Name -> select your AWS Region -> keep all the settings -> scroll to the bottom -> click “Create bucket”
- Go back to your project file and update Gemfile:
gem "image_processing", ">= 1.2"gem 'aws-sdk-s3'gem 'dotenv-rails'
4. In the terminal, run
bundle install 5. Add a file to the root of your project, name it “.env”
6. Add all your secure AWS information into the .env file
7. Locate the gitignore file in the root of your project and update the file with .env (gitignore file tells Git which files to ignore when we push our project codes to the GitHub repo).
8. Go to config/storage.yml and update the file
9. Go to config/environments/development.rb and update the file with:
config.active_storage.service = :amazon10. Go to config/environments/production.rb and update the file with:
config.active_storage.service = :amazon11. Go to config/application.rb and add:
require "active_storage/engine"12. In the terminal run
rails active_storage:installActive Storage will create a migration for you in db/migrate that have all the required setup that you needed:
13. Now in the terminal run
rails db:migrate13. Add Association to models/product.rb with:
has_one_attached :image #you can name this whatever you want :photo, :avatar, :img, etc... 14. Update the serializers/product_serializer.rb with a helper method to create a url for the image upload:
include Rails.application.routes.url_helpersdef image_url
return nil unless object.image.attached?
object.image.blob.attributes.slice('filename',
'byte_size').merge(url: rails_blob_path(object.image,
only_path: true)).tap { |attrs| attrs['name'] =
attrs.delete('filename') }
end
15. Update the prooduct_params in the controllers/api/products_controller.rb to include image:
privatedef product_params
params.require(:product).permit(:user_id, :name, :price,
:description, :category, :image)
end
Now, you can start using image upload to add image to your product. Once the image is uploaded, you will see a url:
To display the image, simply add it to your code:
That is it!
If you follow through these steps to have S3 Active Storage setup correctly at the beginning of your project building, once you’re ready to deploy to Heroku, it will be like putting icing on a cake.
