How to Share S3 Files with External Users with the Storage Browser for Amazon S3 | AWS Tutorials

Video Description

If you’ve worked with AWS for any amount of time, you’ve almost certainly needed to share data in S3 with people outside of your organization. And while you can sort of use presigned URLs and APIs, there hasn’t been a super simple way to do it—until now! Amazon released the Storage Browser for Amazon S3 in December 2024, and it’ll greatly simplify how you share files with people who don’t have an AWS account. Storage Browser is an AWS Amplify UI React component that snaps right into your app. In this hands-on tutorial, I’ll walk you through how to create a Next.js app using Amplify Gen 2. We’ll first copy the sample code to our GitHub repo, deploy it to Amplify, and then pull it down locally into VS Code. Next, we’ll add authentication to the app using AWS Amplify Auth. Finally, we add storage to the backend and then create a new component for StorageBrowser. By the time we’re done, you’ll have a publicly-available Next.js app that allows external folks to access items in your S3 bucket. Be sure to stick around to the end for step-by-step instructions on how to delete the resources provisioned during this video. 🌟***WHAT YOU NEED TO FOLLOW ALONG***🌟 • An AWS account, logged in with admin permissions • A GitHub account • VS Code or IDE of your choice 🌟***LINKS REFERENCED IN THIS VIDEO***🌟 • Amplify pricing: https://aws.amazon.com/amplify/pricing • The Amplify Gen 2 Next.js Quickstart guide: https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/ • Code snippets used in the video: https://github.com/tinytechnicaltutorials/ttt-s3-storage-browser-notes • The AWS blog announcement for Storage Browser: https://aws.amazon.com/blogs/aws/connect-users-to-data-through-your-apps-with-storage-browser-for-amazon-s3/ 🌟***OTHER VIDEOS YOU MIGHT ENJOY***🌟 • Set up your local environment for Amplify development: https://youtu.be/3DJdA2OpMik • Basics of Amplify Gen 2: https://youtu.be/7-7ugqAxgxI • S3 basics: https://youtu.be/mDRoyPFJvlU 🌟***MY AWS COURSES***🌟 If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount! • AWS Certified Cloud Practitioner: https://academy.zerotomastery.io/a/aff_n20ghyn4/external?affcode=441520_lm7gzk-d • AWS Certified Solutions Architect Associate: https://academy.zerotomastery.io/a/aff_464yrtnn/external?affcode=441520_lm7gzk-d 🌟***TIMESTAMPS***🌟 00:00 – Previewing the completed Amplify app with the S3 Storage Browser 01:01 – What you need to follow along 02:12 – How much will this cost? 02:45 – Creating a new Next.js app using the Amplify Gen 2 Quickstart guide 03:20 – Creating a new GitHub repository from the Amplify Next.js template 04:08 – Deploying the templated Next.js app to Amplify 05:50 – Exploring the code for the Next.js starter app in GitHub 06:50 – Launching the Next.js starter app in Amplify 07:55 – Cloning the GitHub repository to your local machine through VS Code 08:42 – Installing the necessary dependencies for the app, including ui-react-storage 09:47 – Running the code locally; what is amplify_outputs.json error?? 10:41 – Downloading the amplify_outputs.json file from the Amplify backend 12:21 – The amplify_outputs.json file is automatically added to .gitignore; do NOT check it into source control 12:45 – Updating the auth backend and front end for the app 15:53 – Pushing local changes to GitHub and triggering the CI/CD pipeline 17:02 – Adding storage to the Amplify app through a resource.ts file 17:51 – Instantiating storage with the defineStorage function 18:13 – Defining access rules for the S3 Storage Browser 19:16 – Adding storage to the backend.ts file 19:51 – Creating a new component for StorageBrowser.tsx 20:53 – Adding the StorageBrowser component to the main app UI in page.tsx 21:45 – Staging new files and pushing to GitHub 22:55 – Testing the S3 Storage Browser in the Amplify app 23:14 – Adding files to the S3 bucket using the AWS Console 25:06 – Allowing anonymous guest access to S3 files in the Storage Browser 26:10 – Customizing the interface for the S3 Storage Browser 26:50 – Testing the S3 Storage Browser as an anonymous guest user 27:27 – IMPORTANT! Deleting your resources