This tool is aimed to simplfy deployment of React static apps to AWS S3 bucket (with enabled static hosting). The deployment is based on branches, which means that it deploys currently active Git branch as a separate revision to S3. All revisions are available at the same time.
Let's assume that we have an AWS S3 bucket react-app located in eu-north-1 region. Also we have a React application, created with Create React App and create-react-app-dist installed. As usually, when we need to implement some changes, first of all we create a new Git branch:
git checkout -b my-awesome-changes
Then we implement all the necessary changes and want to show them to our manager or pull-request reviewer. In order to do that, the app needs to be deployed somewhere. This is very easy to achieve!
cra-dist deploy
That's it! Our branch is now deployed and available at http://react-app.s3-website.eu-north-1.amazonaws.com/my-awesome-changes.html
Globally:
npm install -g create-react-app-dist
Locally:
npm install --save-dev create-react-app-dist
Upon the installation the tool exposes cra-dist binary that allows to run it via CLI.
The first thing to do after installation in the app is to initialize configuration. It's as easy as running
cra-dist init
This command creates a configuration file at ./config/dist.js relative to your app's Git root.
The config file contains all available configuration options with default values and documentation comments. Here's how it looks
Although, it requires certain options, like AWS credentials and Bucket settings, to be configured via environment variables. You could define them either via .env file located in the Git root of the application, or environment settings of the server (e.g. CI server).
The config is basically a script that configures options for each run. The script provides two arguments:
branch- current Git branchrevision- the exact revision name, based on Git branch, with all special characters replaced by-
You can use these options to configure the deployment in runtime. E.g. You can tweak certain configuration options depending on current branch (for example, deploy to different bucket or activate the revision)
The initial config contains general options, that aplly to all branches. These settings could be tweaked for other branches. For example, initial config overwrites settings for master branch to automatically activate any deployment from that branch.
Once configuration is set up, the deployment of the current branch is as easy as:
cra-dist deploy
If you need to activate current branch (make it available as index.html or just on root of the domain), just add --activate or -a option:
cra-dist deploy --activate
This CLI parameter takes precedance over the activate config option.