{"id":20285455,"url":"https://github.com/mramshaw/reactaws","last_synced_at":"2025-10-13T17:14:58.938Z","repository":{"id":92906069,"uuid":"230333562","full_name":"mramshaw/ReactAWS","owner":"mramshaw","description":"Quick test of CI build and deploy to AWS S3 http://react-aws-github-integration-test.s3-website.ca-central-1.amazonaws.com","archived":false,"fork":false,"pushed_at":"2022-11-29T18:40:13.000Z","size":555,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T08:12:11.022Z","etag":null,"topics":["aws","aws-s3","ci","ci-cd","cicd","github-actions","github-actions-ci","react","reactjs","s3","serverless"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mramshaw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-26T22:03:22.000Z","updated_at":"2022-11-29T18:40:18.000Z","dependencies_parsed_at":"2023-04-25T17:02:33.434Z","dependency_job_id":null,"html_url":"https://github.com/mramshaw/ReactAWS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mramshaw%2FReactAWS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mramshaw%2FReactAWS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mramshaw%2FReactAWS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mramshaw%2FReactAWS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mramshaw","download_url":"https://codeload.github.com/mramshaw/ReactAWS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241780512,"owners_count":20019061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","aws-s3","ci","ci-cd","cicd","github-actions","github-actions-ci","react","reactjs","s3","serverless"],"created_at":"2024-11-14T14:26:49.678Z","updated_at":"2025-10-13T17:14:53.891Z","avatar_url":"https://github.com/mramshaw.png","language":"JavaScript","readme":"# ReactAWS\n\n[![https://github.com/mramshaw/ReactAWS/workflows/CI/badge.svg](https://github.com/mramshaw/ReactAWS/workflows/CI/badge.svg)](https://github.com/mramshaw/ReactAWS/actions)\n\nA quick test of using GitHub actions for a CI build and deploy of a React scaffold to AWS S3\n\nIn this case: http://react-aws-github-integration-test.s3-website.ca-central-1.amazonaws.com\n\n## Prerequisites\n\n1. node.js installed\n2. `npm` installed\n3. `create-react-app` installed\n\n## Create minimal react app\n\n    $ npx create-react-app minimal-react\n\n## Smoke test\n\n    $ cd minimal-react\n    $ npm start\n\nThis should make the app available at : http://localhost:3000/\n\n## Build\n\n    $ npm run build\n\n## Upload to S3\n\n1. Create an S3 bucket\n2. Upload the contents of the `build` folder to this bucket\n3. Enable `Static website hosting`\n4. Make a note of the URL\n\nIn this case: http://react-aws-github-integration-test.s3-website.ca-central-1.amazonaws.com\n\n## Routing\n\nIn order to test AWS S3 website hosting, we will create some stub pages.\n\n1. Login (Home) page\n2. Sign Up page \n3. Forgot Password page\n4. Does not exist (404) page\n\nTest the 404 page: http://react-aws-github-integration-test.s3-website.ca-central-1.amazonaws.com/does-not-exist\n\n## Reference\n\nSome useful references follow.\n\n#### Create React App\n\nIn order to properly [twelve-factor](http://12factor.net/) our app, we will need to use environment variables.\n\n[Adding Custom Environment Variables](http://create-react-app.dev/docs/adding-custom-environment-variables/)\n\n__TL;DR__ Define application variables in a __.env__ file (which may be checked-in) and environment variables\nin __.env.local__ (which can probably also be checked-in) as well as in __.env.staging__ or __.env.prod__ (which\nshould definitely NOT be checked-in). The normal practice is to define production variables in __.env__ but the\nReact.js workflow seems to be slightly different.\n\n#### GitHub Actions\n\nThese seem to be the new kid on the block in terms of Jenkins/CircleCI/TravisCI/GitLab CI integrations.\n\nBut good examples (and even documentation) seem to be scarce. ___GitLab___ has a good linter for their YAML files!\n\n[For an example of using GitHub Actions with __vue.js__, check out my [VueRender](http://github.com/mramshaw/VueRender) repo.]\n\n[GitHub actions](http://help.github.com/en/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions)\n\n[Using Node.js with GitHub Actions](http://help.github.com/en/actions/automating-your-workflow-with-github-actions/using-nodejs-with-github-actions)\n\n[Caching dependencies](http://help.github.com/en/actions/automating-your-workflow-with-github-actions/caching-dependencies-to-speed-up-workflows)\n\n[Caching of dependencies removed as it did not seem to be working.]\n\n## Alternatives\n\nThere are a number of different options, both for CI/CD and for deployment targets.\n\n#### CI/CD\n\n* [AWS Amplify](http://aws.amazon.com/amplify/)\n* [Buddy](http://buddy.works/)\n\n#### Deployment\n\nThere are a number of deployment options (in addition to Amazon S3).\n\nCheck out this scaffold deployed on Netlify: https://compassionate-sinoussi-40e0e0.netlify.com/\n\nFor an extensive list of cloud deployment options (including some [Vue.js](http://vuejs.org/) deployments)\nplease check out my [Meatballs](http://github.com/mramshaw/Meatballs) repo.\n\n## To Do\n\n- [x] Add GitHub actions build badge\n- [ ] Add linting\n- [x] Add [prettier](htts://prettier.io/) code formatting\n- [x] Add some routes so we can try out routing on AWS S3\n- [ ] Add logging-in processing (currently, all `submit` buttons do not do anything)\n- [ ] Add some React tests (also to CI workflow)\n- [x] [Twelve-factor](http://12factor.net/) our build and CI\n- [x] Configure AWS IAM for deploying react components to S3 after the build\n- [x] Research Caching dependencies\n- [ ] [Amazon Route 53](http://aws.amazon.com/route53/) for domain registration\n- [ ] [Amazon CloudFront](http://aws.amazon.com/cloudfront/) for content distribution (CDN)\n- [ ] [AWS Certificate Manager](http://aws.amazon.com/certificate-manager/) for certification\n- [x] Add more notes on cloud deployment options\n- [x] Move cloud deployment options to a new [Meatballs](http://github.com/mramshaw/Meatballs) repo\n- [x] Remove link to deleted Heroku deployment (Heroku is no longer free)\n- [x] Run 'npm audit fix' to fix some issues\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmramshaw%2Freactaws","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmramshaw%2Freactaws","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmramshaw%2Freactaws/lists"}