This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Builds the app and pushes it to the gh-pages branch. The build is hosted at the aq-web-client project page of the airpartners organization github pages site.
When setting up GitHub pages hosting, it was necessary to add a homepage field to our package.json.
{
"homepage": "http://airpartners.github.io/aq-web-client",
"name": "aq-web-client",
"version": "0.1.0",
"private": true,
...
However, that field has to be removed for the firebase deploy to work properly. One of the benefits of Firebase hosting is that we have the option to route all urls to our index.html which GitHub pages doesn't support so direct url access doesn't work on our GitHub pages site because we use a single page React app with react-router-dom.
Refer to the Firebase quick-start guide for hosting and this medium article which is specific to React apps. Here is a synopsis:
npm install -g firebase-tools
firebase login
You'll need to use the adeairquality@gmail.com login because that account owns our Firebase project.
NOTE: you can skip this section since the config files are already tracked in git, however, if you need to overwrite it (e.g. to link to a different project), delete firebase.json and .firebaserc first
cd path/to/your/local/aq-web-client
firebase init
You'll be prompted with a series of questions:
- Select "Hosting: Configure and deploy Firebase Hosting sites." NOTE: you can always run
firebase initagain later and add other services. - Select "Use and existing project" and choose "airpartners-ade"
- Your public directory is
build - Yes you want to configure as a single-page app (rewrite all urls to /index.html)
- Don't overwrite your build/index.html file (if you accidentally do it's okay, you'll just need to execute
npm run buildagain before deploying.
NOTE: firebase deploy does not execute npm run build so if you've made changes you need to first execute npm run build.
firebase deploy
You'll get a command line printout that tells you at which urls it's being hosted. By default these should be: https://airpartners-ade.web.app/ and https://airpartners-ade.firebaseapp.com/.
When setting up GitHub pages hosting, it was necessary to add a homepage field to our package.json.
{
"homepage": "http://airpartners.github.io/aq-web-client",
"name": "aq-web-client",
"version": "0.1.0",
"private": true,
...
However, that field has to be removed for the firebase deploy to work properly. One of the benefits of Firebase hosting is that we have the option to route all urls to our index.html which GitHub pages doesn't support so direct url access doesn't work on our GitHub pages site because we use a single page React app with react-router-dom.
Go to the Actions tab of this repository to see all current and previous jobs, logs, and statuses.
It is highly recommended to run npm test, npm start (without any lint warnings or errors) and npm run build, before pushing to any branch. Otherwise, CI/CD workflows may fail unexpectedly causing you to add a fixing commit.
Although unit tests will run automatically, it's still important to do manual testing using npm start to run the application locally. Make sure there are no lint warnings or errors otherwise the GitHub workflow will fail. Use // eslint-disable-next-line to suppress warnings or errors sparingly. See this Goooooooooogle Doc for more detailed manual testing instructions.
Any time a push is made to a feature branch, the GitHub workflow at ./.github/workflows/feature.yml will run. After installing dependencies, it will run npm test and npm run build (which runs the linter also). Any issues will cause a failure and prevent merging a pull request to master without using admin privileges to override this check. To view and/or edit these branch protection settings go to Setting > Branches.
After any push to master (except changes that only affect README.md), the GitHub workflow at ./.github/workflows/main.yml will run. After installing dependencies, it will run npm test. Any issues will cause a failure and the changes will not be deployed. It will then build and deploy the project to Firebase hosting.
Initial setup for GitHub workflows was based on this article.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify