How to upload react build files to S3 from GitHub Actions

Every time you push new changes to your React app, it’s live on the web within minutes—no manual uploads, no repetitive commands, just pure automation magic. With GitHub Actions and Amazon S3, you can make it happen but there is a catch, Very few prebuilt scripts are available for uploading react build files to S3 from GitHub actions. In this post, Let's see how to connect the dots between your React project and AWS S3 using GitHub Actions, turning every code push into an automatic deployment.

To begin with we need to create a script that will iterate over all files in the build folder and then use aws-sdk to upload all files to the S3 bucket configured with static website hosting. First we will import required packages to JS script.

const S3 = require('aws-sdk/clients/s3');
const path =require('path');
const fs = require('fs');
const klawSync = require('klaw-sync');
const {lookup} = require('mime-types')

Then we will initialize the S3 client and get build folder path which will be generated from github action with npm run build

var awsoptions = {
    accessKeyId : process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey : process.env.AWS_ACCESS_KEY
}

const buildFolderPath = path.join(__dirname,'build')

var s3 = new S3(awsoptions);

Then we will use klaw-sync to get file path for each file and then upload that file to the S3 bucket using upload() function.

const filePaths = klawSync(buildFolderPath,{
    nodir : true
});

filePaths.map((filePath)=>{
    const fileContent = fs.createReadStream(filePath.path);
    const bucketPath = path.join('',path.relative(buildFolderPath,filePath.path));


    config ={
        Bucket : 'YOUR_BUCKET_NAME',
        Body : fileContent,
        Key : bucketPath,
        ContentType : lookup(filePath.path) || "text/plain"
    }

    upload(config);
})

function upload(config){
    return new Promise((resolve) => {
        s3.upload(config, (err, data) => {
          if (err) console.error(err);
          console.log(`uploaded - ${data.Key}`);
          console.log(`located - ${data.Location}`);
          resolve(data.Location);
        });
    });
}

Thats it place this script file in react project directory where package.json is present. Run this script from your github action workflow after building the react project. Once called it will upload all files from build folder to bucket.

Example job steps for building & uploading files

    steps :
      - uses : actions/checkout@v4
      - uses : actions/setup-node@v4
        with :
          node-version : 20
      - name : Install node modules
        run : npm install
      - name : Build the project for production
        run : npm run build
      - name : Upload Files to S3
        run : node s3upload.js

With GitHub Actions and S3 working together, deploying your React static site is no longer a tedious task but an automated part of your workflow. This setup not only saves time but also ensures that every time your static files get pushed to the bucket while developer can focus on development.