AWS Logo
Menu
Getting Started: Setting Up AppStream 2.0 Embedded Sessions with S3 and CloudFront

Getting Started: Setting Up AppStream 2.0 Embedded Sessions with S3 and CloudFront

Learn how to easily get started with AppStream 2.0 Embedded Streaming Sessions

Bryan May
Amazon Employee
Published Jan 11, 2025

Getting Started: Setting Up AppStream 2.0 Embedded Sessions with S3 and CloudFront

Embedding Amazon AppStream 2.0 Streaming Sessions into your website is an effective way to provide on-demand access to desktop applications directly within your web environment. This integration eliminates the need for users to download, install, or maintain software locally, while ensuring they always have access to the latest version of your application on-hand. Whether you're looking to simplify software distribution, enhance security, or provide self-guided training content, AppStream 2.0 embedded sessions can help change how your users interact with complex applications, all without leaving your website.
The purpose of this post is to demonstrate how we can integrate AppStream 2.0 embedded sessions into a website hosted on S3 and delivered via CloudFront. While not a comprehensive integration guide (for that, refer to our official documentation), this tutorial offers a streamlined approach for quickly setting up a proof of concept. It's designed for those who need to demonstrate AppStream 2.0's embedded functionality on short notice.
Step 1: Create a non-domain joined AppStream fleet and associate it to a stack.
Step 2: Create an S3 bucket. This will be used to store our various web assets.
Step 3: Download the AppStream 2.0 Embed Kit
Step 4: Extract the ZIP file, and upload the appstream-embed.js file to the root of your S3 bucket
Step 5: Create a CloudFront distribution, and specify your newly created S3 bucket as the origin domain.
  • For origin access, select Origin access control settings
  • Under Origin Access Control, select the option to Create new OAC
  • Under Viewer Protocol Policy, select Redirect HTTP to HTTPS
  • Do not enable security protections
  • Set the Default root object to index.html and then select Create distribution
Step 6: Select the Copy Policy pop-up message, and then navigate to your S3 bucket
Step 7: Edit the bucket policy, and paste the JSON directly into the Bucket policy, and then save
Step 8: Add your CloudFront domain to the AppStream Embed domain settings
  • Navigate to your stack, and select Edit
  • Under Embed AppStream 2.0 - optional, add the CloudFront domain name of your distribution
Step 9: Copy the below HTML code into a text file, and name it index.html. Upload this file to the root of your S3 bucket. If you'd like a more bare-bones site without extra css/formatting, feel free to use the embed-sample.html file that was downloaded as part of the zipped contents from step 3 instead.
Step 10: Access your CloudFront distribution via your web browser. You should see a screen similar to the one below
Step 11: All that's left to do is create a Streaming URL, and paste it into the Streaming URL input box on our website to start the streaming session. We can quickly generate a Streaming URL via the AWS console under stack actions. You can optionally do this programmatically as well using the CreateStreamingURL API.

Testing the end user experience

Upon clicking "Start Session," the AppStream session initializes and begins streaming. While the default toolbar provides additional functionality, we also have the option to customize the user interface by hiding specific toolbar elements to tailor the session experience.
  • Select the Hide Toolbar button, and then select the Start Session / Update Toolbar UI button to refresh the UI and hide the toolbar.
  • For more information on Hiding individual toolbar elements, reference embed-sample.html that was downloaded alongside appstream_embed.js back in Step 3 of this post.
Toolbar visible
Toolbar visible
Toolbar Hidden
Toolbar Hidden

Summary

By following these steps, you can create a proof of concept that showcases the seamless integration of desktop applications into your web environment. While this tutorial provides a streamlined setup process, remember that for production environments, you should refer to AWS's official documentation for comprehensive integration guidelines and best practices.
 

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

1 Comment