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.

Comments

[Ahmed Amman]

Nice Info. Do you know Advanced Drywall Estimating Techniques Improve Planning Process Accuracy and Efficiency Our services guarantee you reliable estimates to save time and costs.

[Ahmed Amman]

Great blog. Do you think construction estimating software can help small businesses? In terms of efficiency, what would benefit a small business like yours? It is helpful in the budgeting process and also increases accuracy in project estimates.

[Ahmed Amman]

Great post! Can you imagine how cost estimating for New York City contractors basically becomes crucial in dealing with the complex landscape of construction in the city and ensuring that any construction project shall be viable?

[Ahmed Amman]

That's a great post. Do you have any insights on creating winning commercial estimates? Do you have the kind of winning strategies you develop to make an effective difference in your works as a bidderee.

[Ahmed Amman]

Good read! Do you know what are responsibilities of construction estimators? It's noted that budgeting, cost control, and making sure that the project finds its way to meeting financial objectives are all among their primary responsibilities.

[Ahmed Amman]

It is a nice post on flooring estimates cost and how they may be charged based on materials and labor. Getting a detailed estimate would help you in planning your budget.

[Ahmed Amman]

Nice blog! Do you have any insights on estimating software? It plays a crucial role in streamlining the estimating process and ensuring accurate project assessments.

[Ahmed Amman]

Good article! Ever think how construction estimating might have an effect on your project timelines? It's also a very important aspect of your planning: everything stays the course and within budget.

[Ahmed Amman]

Great blog! Understanding how to obtain achieve in construction estimate is essential for cost management and the bottom line of the project.

[Ahmed Amman]

Great blog! Do you touch upon common mistakes to avoid in mechanical cost estimation? These are just those that save you from serious misestimates and improve the accuracy of your project in the first place.

[Ahmed Amman]

Great read! The Guide to Residential Electrical Estimates is a fantastic resource for mastering accurate budgeting and refining your estimating skills on residential electrical projects.

[Ahmed Amman]

Guide to Xactimate Estimating Software: Increasing Estimating Accuracy and Efficiency More efficiently and quickly streamlining your workflow, you'll be able to take your project assessments to the next level

[Ahmed Amman]

Absolutely brilliant blog! I've got questions about tips for estimating masonry work. They really can make a difference in your accuracy and efficiency in planning a project