Build a React.js web app and sync to an AWS S3 repository
Please consider:
- Buying me a coffee ☕
- Supporting me on Patreon 🏆
- Starring this repo on Github 🌟
This action runs the equivalent of this oversimplified example:
$ yarn
$ yarn build
$ aws s3 sync public s3://your.website.com/
# Optionally
$ aws cloudfront create-invalidation --distribution-id XYZ --paths /\*With the previous in mind:
1- Make sure there is a build script in your package.json.
2- Place in your .github/workflows directory a .yml similar to the following:
name: Upload Website
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@main
- uses: jeanlescure/react-deploy-to-s3-action@main
with:
args: --acl public-read --follow-symlinks --delete
env:
NODE_ENV: development # optional: defaults to production
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: us-west-1 # optional: defaults to us-east-1
SOURCE_DIR: bundle # optional: defaults to publicThe following settings must be passed as environment variables as shown in the example.
Sensitive information, especially AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, should be
set as encrypted secrets — otherwise, they'll be public to anyone browsing your repository's source code and CI logs.
| Key | Value | Suggested Type | Required | Default |
|---|---|---|---|---|
NODE_ENV |
This environment variable is commonly used by the web packager to select the appropriate variables for the environment you will deploy to | env |
No | production |
AWS_ACCESS_KEY_ID |
Your AWS Access Key. More info here. | secret env |
Yes | N/A |
AWS_SECRET_ACCESS_KEY |
Your AWS Secret Access Key. More info here. | secret env |
Yes | N/A |
AWS_S3_BUCKET |
The name of the bucket you're syncing to. For example, jarv.is or my-app-releases. |
secret env |
Yes | N/A |
AWS_REGION |
The region where you created your bucket. Set to us-east-1 by default. Full list of regions here. |
env |
No | us-east-1 |
AWS_S3_ENDPOINT |
The endpoint URL of the bucket you're syncing to. Can be used for VPC scenarios or for non-AWS services using the S3 API, like DigitalOcean Spaces. | env |
No | Automatic (s3.amazonaws.com or AWS's region-specific equivalent) |
SOURCE_DIR |
The yarn build output directory you wish to sync/upload to S3. |
env |
No | public |
DEST_DIR |
The directory inside of the S3 bucket you wish to sync/upload to. For example, my_project/assets. Defaults to the root of the bucket. |
env |
No | / (root of bucket) |
CLOUDFRONT_DISTRIBUTION_ID |
If you include a CloudFront Distribution Id using this variable, the action will run aws cloudfront create-invalidation for the wildcard path *, meaning it will completely flush the cache (Note: AWS considers this a single invalidation even though it affects all files in the distribution) so that the new changes synced to S3 are available immediately. |
secret env |
No | N/A |
- Errors such as
/bin/sh: react-scripts: not foundorTo import Sass files, you first need to install node-sass.are usually caused by these or other libraries being withindevDependenciesin thepackage.json. ALL dependencies should be under thedependenciesentry withinpackage.json. A react application which gets pushed to S3 will be bundled with all its dependencies, there is no such thing as dependencies that are used for development vs production, all dependencies are needed to build the final package of html, js, css, etc.
This project is distributed under the Apache-2.0 license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent