React Deploying to AWS S3 production using npm - index.html file as last

Question

I have a React app (using React Create App) which I want to upload to production using a script. My production is an AWS S3 bucket. I have added to package.json a "deploy" script as follows:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "aws s3 cp ./build s3://app.example.com --recursive --exclude \"*.DS_Store\" --cache-control public,max-age=604800 --profile production-profile"
  },

This will updload all the build files to the production bucket. Since the build static files (css, js etc.) get their own hash code they do not get overwritten by each version and that is fine.

The problem I am having is that I don't want the index.html file to be uploaded until AFTER the other files have completed upload. That way, once index.html is overwritten with the latest version the new static files are automatically used.

Any idea how to achieve this? If there is a better script for uploading a react app to S3 would be great.

Answer 1

You can copy everything else first except index.html and later copy that.

 "aws s3 cp ./build s3://app.example.com --recursive --exclude \"*.DS_Store\" --exclude \"index.html\" --cache-control public,max-age=604800 --profile production-profile && aws s3 cp ./build/index.html s3://app.example.com  --cache-control public,max-age=604800 --profile production-profile "

Answer 2

If I'm not mistaken, you want the index.html file to upload last so that it will contain the static js/css file names that should be loaded in your app (the old index.html contains the old versions) right?

Well what you can do is instead have s3 delete files that do not exist in the files that are being uploaded:

aws s3 sync build/ s3://app.example.com --delete --exclude \"*.DS_Store\" --cache-control public,max-age=604800 --profile production-profile

The command "syncs directories and S3 prefixes. Recursively copies new and updated files from the source directory to the destination. Only creates folders in the destination if they contain one or more files." - AWS Docs

"the --delete flag will cause the CLI to delete files that are in the destination, that are not in the source." - AWS Help

So this should still upload everything in your build directory, but also delete the old versions of the files.

Edit (Instead of deleting old files):

# Exclude the index.html file for first upload, you could probably use cp instead of sync
aws s3 sync build/ s3://app.example.com --exclude \"*.DS_Store\" --exclude "index.html" --cache-control public,max-age=604800 --profile production-profile
# Add it after everything else is uploaded
aws s3 sync build/index.html s3://app.example.com --exclude \"*.DS_Store\" --cache-control public,max-age=604800 --profile production-profile