What you’ll learn
  • how are React application files served via the deployed cloud infrastructure

Diagram
anchor

Webiny Cloud Infrastructure - Admin Area - Serving Application FilesWebiny Cloud Infrastructure - Admin Area - Serving Application Files
(click to enlarge)

Description
anchor

The diagram shows how HTTP requests travel through the deployed cloud infrastructure and how files are returned back to the client. This happens repeatedly as the user opens and navigates through the Admin Area React application. Note that, when talking about the API HTTP requests that the Admin Area React application issues, those are still issued to the Amazon CloudFront distribution that’s deployed as part of the API project application.

Steps
anchor

  1. The HTTP request first reaches the Amazon CloudFront A.
  2. The request is forwarded to the Amazon S3 bucket B.
  3. Amazon CloudFront A receives the file from Amazon S3 B, caches it accordingly, and returns it back to the client.

FAQ
anchor

Are there any Amazon CloudFront caching rules in place?
anchor

All of the files that are served from the /static/* path are cached for 30 days. The rest is cached for five minutes. If need be, this can be additionally adjusted via code .

What is the static folder anyways?
anchor

The Admin Area React application is actually a create-react-app application, which, upon making a production build, places all of the static files (JS, CSS, images, …) into this folder.