We use static web hosting for our ReactJS website. We either deploy it on S3 if its AWS or Blob Storage if it’s Azure

To further improve the load time of the website, we put a CDN in front of it - AWS CloudFront or Azure CDN.

CACHE SETTINGS

Irrespective of the cloud, the following settings are configured

Browser Cache Settings

  1. Index.html should never be cached on the browser. Set cache-control to no-store the necessary header tags on the file.
  2. manifest.json file in the assets folder should never be cached on the browser. Set cache-control to no-store the necessary header tags on the file.
  3. Cache assets - fonts, CSS files, js files, images - with 1-month expiry.

CDN Cache Settings

  1. Index.html should be cached for 1 month on the CDN. If the CDN cache-busting API call is not working in your CICD pipeline, then do not cache Index.html in CDN.
  2. manifest.json file should be cached for 1 month. If the CDN cache-busting API call is not working in your CICD pipeline, then do not cache manifest.json in CDN.
  3. Cache assets - fonts, CSS files, js files, images - with 10 years expiry

URL MAPPINGS

For each non-prod environment, we will have a dedicated hosting with a user-friendly URL format. The URL format is of the env will be https://<app-name>-<env-name>.cawstudios.com

Env Name Branch name URL
Develop develop https://<app-name>-develop.cawstudios.com
QA qa https://<app-name>-qa.cawstudios.com
Staging staging https://<app-name>-staging.cawstudios.com
Production master The actual application domain

Note - The website will always be available on https. The http should auto-redirect to https and user should never be able to access the website on http.