Skip to main content

Avada React App Artifacts

Introduction​

As you may already see in Avada CI/CI pipeline, there is a step of the pipeline in which push the code to the artifacts and then deploy the artifacts to the Firebase Hosting. So what does this step really do?

Why need React artifacts?​

Whenever we deploy our app, we need to build the React app and upload it to the Firebase Hosting. Since each page we use React.lazy to lazy load the page, so each page has a content hash of in the chunk file names. So with each time we build the file names will be changed.

This pose a challenge for us because when we deploy, the current files might be removed on the Firebase Hosting. Then customers will see a blank page or a 404-page while browsing duo the missing files. If the customer reload the page, they will get a new version of the app, but this is not a good experience.

How to solve it?​

The idea is quite simple, we will build the app, but not yet deploy it to the Firebase Hosting. Instead, we will only deploy --only functions,firestore,storage to Firebase. Then we push the React app files to a shared git repository. In the third step, we pull the git repository and deploy the React app to the Firebase Hosting. This will keep previous versions of the app still deployed to Firebase Hosting along with the latest version.

Will this get full?​

Yes the artifacts will get full over the time. Sometimes we cannot push to the git repository because it is full. We will need to clean the repository by removing the old files with:

Get the last 3 days committed files to a files_to_remove.txt

git log --name-only --pretty="format:" --since="3 days ago" | sort | uniq > files_to_remove.txt

Remove these files:


xargs rm -f < files_to_remove.txt


Once done, commit it to the repository.

note

You need access to the artifacts repository

Notes​

NEVER undo this line, it is intentional:

./node_modules/.bin/firebase deploy --only firestore,functions,storage -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY --force

Also, this artifacts repository is quite heavy, it will take your disk space, so remove once you don't need it anymore.