AWS s3 has been the primary and common storage option for many industry projects because it is inexpensive. Furthermore, there is a lot of practice deploying ReactJS projects in the AWS S3 bucket. Here in this post, we will see how we can configure the S3 bucket and use it with React and NodeJS.

Prerequisites:

• Knowledge of ReactJS,

• Basic Knowledge of NodeJS

• an AWS account.

In this part, we will setup our "IAM" user who can access the s3 bucket we will create and policies.

Now let's focus on the AWS part where we will access s3 bucket. It is recommended to create an IAM user for the following reasons:

• We will create a user (our own app) that will access our AWS and it's resources.

• We will need to create rules and policies for our services (here s3) which will be allocated to the user or app.

Creating new IAM Policy:

The following documentation answers why and when to use "IAM" service: When to use "IAM"?

We will head over to dashboard page of IAM where we will select policy sub menu to create a new policy. Click on "Create Policy" to create a new one.

We will be headed to the next page. We will select "s3" as a service. And for the "access allowed" permissions, we need to select the following:

• Inside "Read" Action List: Let's select the following boxes:

GetObject: We want to get all files inside an s3 object. So, we will check the "GetObject" field.

• Inside "Write" Action List:

PutObject: We want to put our files inside s3 bucket.

DeleteObject: Because we also want to delete a file from our bucket.

These are the action lists that we are going to allow for this policy.

Setting up Resources for the Policy

The next step is in the same page where we will select on which resources we are allowing this policies. So we will specify bucketname by clicking on "Add ARNs".

Let's give a bucket name. I have put "imageuploader" as bucket name and has selected the checkbox "any object name" to allow any files to be added and read.

Now we will be presented a page where we should give that policy a name. For example, I have named it as "imageuploaderaccess". We will click on "Create a policy". And then we can see our newly created policy in our policies list.

Now our policy and rules that we created for s3 access has been created as well as the bucket name. Let's head to our previous IAM submenu page where we will click on "User" submenu and will create a new user there.

Creating user/app details for resources

A user can be a person or any app that accesses our services. Since we are going to have our s3 bucket consumed by our react app, so we can name the user as "imageuploaderwebapp".

Click "Next" and the next step is attaching policies to the user. Remember the policy that we created previously for S3, we are going to use it here. Let's search for the policy name "imageuploaderaccess" or as you named earlier. Select it and click "Next".

We will see "Review" page. We can then click "Next" on this page. Hence, we will find our newly created user "imageuploaderwebapp" in the "IAM" users list.

Creating Access Key and Secret Key

The final step is creating an access key. So click on the newly created user and then click on "Create Access Key".

We can see the options to use for creating the "Access key". We can choose "Command Line Interface (CLI)" and then we have to give "Description tag value". Hence on clicking "Create access key", you will find your "Access key" and "Secret access key" in the next steps. You will need to copy or store these keys somewhere so we can use it in our applications.

Next Steps into React and Node:

Next thing we will do is using this bucket to post and retrieve images from our React app. Since this post will be longer, so the next part has been written here:

Aws S3 with React and Node.

Aws S3 with React and Node

Aws S3 with React and Node