In this article, we will explore one way to generate CSS object urls utilizing Amazon Web Services. The CSS <url> data type denotes a pointer to a resource, such as an image or a font. URLs can be used in numerous CSS properties, such as display text, background-image, cursor, and list-style.
For example, you have a globally accessible application that doesn’t yet support localization but some UI elements have display text. This solution provides a way to create a translation type of stylesheet injection, changing display text from English to Spanish.
Before you get started, you should have your AWS account set up and stylesheet created. I prefer creating my stylesheets in Notepad++ as it has one of the easiest flows to save files in many different formats.
Instructions
My step-by-step guide will lead you through the process of setting up scalable cloud storage, uploading CSS files, and then obtaining the object urls.
1.After signing into AWS, type s3 in the search box and select the top option - S3 Scalable Storage in the Cloud.
2. This screen is S3 buckets. Before we can upload our CSS file, we need to create a place to store it. Click +Create bucket on this screen.
3. The following screens take you through creating a bucket. Enter a DNS-compliant bucket name and select your Region.
4. While in Configure options and Set permissions, you may need to toggle the Block settings while testing visibility. By default, Block all public access is checked. When you are satisfied with your configuration, click Next.
5. Now that we have a bucket we can upload the CSS file. Click on the bucket you created for this exercise.
6. Once in your bucket, upload the CSS file by clicking Upload, and then select your file. When the file displays, click the Upload button on the bottom left of the Upload modal.
7. Files uploaded to this bucket display in the Overview tab. Locate the file you uploaded, then click on it. The CSS file details are displayed. Locate the Object URL. The Object URL is the CSS url link that can be used for stylesheet injections.
And that’s it! I hope you found my article helpful. Please reach out if you have any questions about using AWS s3/CloudFront to help make your life easier!
Connect with me on LinkedIn!
