{"id":27858,"date":"2022-02-09T22:24:40","date_gmt":"2022-02-09T22:24:40","guid":{"rendered":"http:\/\/Transform-Images-Stored-on-Amplify-Storage"},"modified":"2025-03-30T02:37:22","modified_gmt":"2025-03-30T09:37:22","slug":"transform-images-stored-on-amplify-storage","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-images-stored-on-amplify-storage\/","title":{"rendered":"Transform Images Stored on Amplify Storage"},"content":{"rendered":"

AWS Amplify<\/a> enables developers of all skill levels to create, deploy, and maintain full-stack applications more effectively. Speaking of services, we will be using the Amplify CLI to create an S3 bucket and upload images from a React app. Next, we\u2019ll use Cloudinary\u2019s rich media transformation tools to retrieve images stored on the S3 bucket and apply some transformations to them.<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Run the following command in your terminal to set up a React application:<\/p>\n

    npx create-react-app my-amplify-project\n<\/code><\/span><\/pre>\n
Let\u2019s create a file that\u2019ll hold the logic for handling image transformation. Run this command in your terminal to create a file named TransformImage.js<\/code>:<\/p>\n
    cd<\/span> my-amplify-project<\/span>\n    cd<\/span> src<\/span>\n    mkdir<\/span> components<\/span>\n    cd<\/span> components<\/span>\n    touch<\/span> TransformImage<\/span>.js<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Our application will require some dependencies. To keep things simple, we will be installing them when we need them.<\/p>\n
Setting up AWS Amplify<\/h2>\n
To initialize our React application, integrate, create and provision the AWS services required in our app, let\u2019s install and configure the Amplify CLI tool. Run the following command in your terminal:<\/p>\n
    npm<\/span> i<\/span> -g<\/span> @aws-amplify<\/span>\/cli\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The installed tool must be linked to your AWS account; to do so, run the following command in your terminal:<\/p>\n
    amplify configure\n<\/code><\/span><\/pre>\n
AWS discourages using your Root-level credentials (i.e., email and password) to manage your account\u2019s resources and instead suggests utilizing an IAM user account to specify permissions. You will be sent to your dashboard to fill up your information. We gave the IAM user account AdministratorAccess<\/code> in the permissions area.<\/p>\n
Once this is successful, you will receive an access key ID and a secret key, as shown below:<\/p>\n
\"\"<\/p>\n
You will be prompted in the CLI to insert these credentials to complete the configuration step. Finally, select a name that will be bound to the profile of the IAM user you just created \u2014 I used \u201cdefault\u201d.<\/p>\n
Setting up Cloudinary<\/h2>\n
Login to your Cloudinary account or create one here<\/a> if you don\u2019t have one already. You can get your credentials in the Account details<\/strong> section on your dashboard.<\/p>\n
\"\"<\/p>\n
We only need our public credentials \u2013 our cloud name and API key. Take note of their values; we will use them later to set up the Cloudinary SDK to transform our images.<\/p>\n
Uploading an Image to an S3 Bucket<\/h2>\n
At the moment, our project is just a basic CRA application. To make it amplify compatible, we need to initialize it by running this command:<\/p>\n
    amplify init\n<\/code><\/span><\/pre>\n
\"\"<\/p>\n
In the prompt, you will be required to choose the name of your Amplify project. It will also detect the framework you\u2019re using (React) and other project-specific information. We are also required to authenticate using an IAM account, so we use the one created earlier. If this is successful, this tool does several things, the most important ones are as follows:<\/p>\n