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 "