React-static app deployment and CI — Tutorial Part II
02 React-Static-App with Firebase and CI
As we have our finished app ready to be deployed, we will deploy it to firebase with Continuous Integration (CI) from Github and also create preview branches whenever we create a Pull Request, that we can verify the latest changes.
Firebase setup
Create a free Firebase Account if you haven’t one yet at firebase.google.com.
Once you are on your dashboard, create a new project and give it a meaningful name — I called mine: app-bootstrap-tutorial, at this stage, I disabled Google Analytics for now, as I just want to use the hosting capabilities.
Installation
$ npm install -g firebase-toolsIn the next step, we need to login with firebase and initialise the project in the project’s root directory:
$ firebase login
$ firebase init
You're about to initialize a Firebase project in this directory:
/Users/ckaatz/development/static-app-tutorial
? Which Firebase CLI features do you want to set up for this folder? Press Space to sele
ct features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase
Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: app-bootstrap-tutorial (app-boot
strap-tutorial)
i Using project app-bootstrap-tutorial (app-bootstrap-tutorial)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? /dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
? File /dist/index.html already exists. Overwrite? No
i Skipping write of /dist/index.html
i Detected a .git folder at /Users/ckaatz/development/static-app-tutorial
i Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.
Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=<REDACTED>
Waiting for authentication...
✔ Success! Logged into GitHub as chrkaatz
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/
repository) chrkaatz/static-app-tutorial
✔ Created service account github-action-XYZ with Firebase Hosting admin permissions.
✔ Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_APP_BOOTSTRAP_TUTORIAL.
? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? yarn && yarn build
✔ Created workflow file /Users/ckaatz/development/static-app-tutorial/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main
✔ Created workflow file /Users/ckaatz/development/static-app-tutorial/.github/workflows/firebase-hosting-merge.yml
i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/<REDACTED>
i Action required: Push any new workflow file(s) to your repo
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!At best, we’ll do this within a feature branch to test the preview capabilities of firebase. Once a PR is created, we’ll see that Github Actions will start to create a preview deployment and see the url to it.
CI
After we verified the pull request, we merge it and the merge workflow will kick in to deploy the changes from our feature branch to production. Mine is available at app-bootstrap-tutorial.web.app
An additional Tips
I suggest you to limit the versions available for rollbacks to a feasible number (I’ve chosen 10) as it uses also the budget of your free storage space on firebase.
In the next part of this Tutorial, we’ll add PWA (progressive web application) capabilities to our Application.
Code
The Code can be found at Github https://github.com/chrkaatz/static-app-tutorial where each tutorial step will have it’s respective commit and tag associated with it. This one is tagged with 02-React-Static-Firebase-and-CI.
