Each of these commands can be accessed from Visual Studio Code by pressing (cmd/ctrl)+shift+B.
First, npm install. Then, either npm run prod for a one-off, minified build after tests run, or, npm run watch to host locally at 127.0.0.1:8080 and rebuild automatically on changes.
index.pug describes the HTML file loaded at startup. Use this to show the basic frame of your SPA before React mounts.
index.sass must reference or contain all styling rules you want to be present.
index.tsx is executed on page load; the root React component is mounted here.
In each directory, there is expected to be the following (see an example)
- An index.ts file containing the functionality.
- A unit.ts file containing the corresponding unit tests.
logo.svg is used as an app icon and a splash screen.
Other branding can be found in webpack.config.ts, in the configuration for FaviconsWebpackPlugin.
The GitHub Action will build the SPA, upload it to a S3 bucket (configured to allow public HTTP reads), then invalidate a Cloudflare cache (which sits in front and provides HTTPS).
Add the following secrets on GitHub:
This is:
- The name of the S3 bucket which will be uploaded to.
- The public URL which Cloudflare will host.
For example, for https://www.google.com/, this would be www.google.com - no protocol, no trailing slash.
The access key ID and secret access key of an IAM user with the following permissions against the S3 bucket and objects within:
PutObjectPutObjectAclGetObjectListBucketDeleteObjectGetBucketLocation
A Cloudflare access token with the Zone.Cache Purge permission. The Zone ID can be found on your domain's dashboard.
To trigger a deployment, create a GitHub release. The name/version of the GitHub release will be included in the deployed HTML.
