airpartners/aq-web-client

This project was bootstrapped with Create React App.

Available Scripts
Firebase Hosting
GitHub Workflows
- Continuous integration (CI)
- Continuous deployment (CD)
Learn More

Available Scripts

In the project directory, you can run:

`npm start`

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.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

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.

`npm run eject`

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.

`npm run deploy`

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.

Firebase Hosting

Refer to the Firebase quick-start guide for hosting and this medium article which is specific to React apps. Here is a synopsis:

Install the Firebase CLI

npm install -g firebase-tools

Login to Firebase

firebase login

You'll need to use the adeairquality@gmail.com login because that account owns our Firebase project.

Initialize Firebase and Configure Your 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 init again 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 build again before deploying.

Deploy to Firebase

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,
  ...

GitHub Workflows

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.

Continuous integration (CI)

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.

Continuous deployment (CD)

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.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.