Continuous delivery CRA

Node package to include the required files to deploy the application on a google cloud storage bucket without CDN. This package contains the required files to set up a the continuous delivery of the application via cloudbuild.yaml.

Set up of the deployment

In order to set up the continuous-delivery, follow the steps below.

Start by installing the npm package @aeco-cloud/continuous-delivery-cra

npm install @aeco-cloud/continuous-delivery-cra

This will create the continuous-delivery folder in the project root folder that contains all the required files to set up the continuous delivery. If you installed the package in a CRA project, you will see something like this:

.
├── build/
├── continuous-delivery/
├── node_modules/
├── public/
├── src/
├── README.md
├── package-lock.json
├── package.json
└── tsconfig.json

The final step to set up the deployment is to configure the build trigger on the google cloud platform. Do this by browsing to https://console.cloud.google.com/cloud-build/triggers and click on Create trigger. This will show you the page below that you need to complete as follows:

• name: A combination of the repository for which you want the deployment and the name of the branch on which you are triggering: ${repository-name}-${branch-name}
• description: Desribe the trigger
• Source: Choose your repository. If it is not in the list, you will have to add it first by clicking on Connect new repository
• Branch: Choose the branch on which you want to trigger the deployment
• Build configuration: Set it to Cloud build configuration and change the Cloudbuild configuration file location to continuous-delivery/cloudbuild.yaml

Voilà - your continuous delivery set up is complete.

Deployment results

The CRA application is hosted using google cloud buckets via storage: https://console.cloud.google.com/storage/browse. The delivery always creates a stand-alone version of the application and creates bundled files to embed the react component on third party websites. The location of the application depends on the name of the branch of your trigger.

Hosting of the stand-alone application and component bundle files

An application is always deployed in two ways

1. Standalone. The standalone React application to which you can browse. This is stored in the /app folder.
2. Component. The files to share with a third party to easily embed the component on his website. This is stored in the /component folder.

Hosting location

If the branch names includes develop, release, or master, the application is hosted on the following paths in the storage browser:

https://storage.googleapis.com/${GCP-project}/${package.json-name}/v${package.json-version}
https://storage.googleapis.com/${GCP-project}/${package.json-name}/latest

The name and version of the application are retrieved from the package.json.

If the branch names not include develop, release, or master as is the case for feature/, bugfix/, and hotfix following the git-flow paradigm, the application is hosted on the following paths in the storage browser:

https://storage.googleapis.com/${GCP-project}/${package.json-name}/${branch-type}/{name}

An example of the cloud storage file structure is given in the figures below:

Development

The development of the deployment scripts is based on the following preparation steps before uploading the files to cloud storage:

1. Create a production build taking into account the .env.production environment variables. We use https://absolute-path.com as a placeholder to later include the correct URL. This step is necessary as the absolute path of the URL depends on the chosen deployment options.
2. Use environment variables from GCP to determine the bucket to deploy to
3. Use gulpfile.js to prepare the deploy folder by creating app and component subfolders, merging the javascript and css files in a bundle, and replacing the correct URL.
4. Upload the files to cloud storage using the node @google-cloud/storage package.

The development is based on the following resources:

• https://create-react-app.dev/docs/production-build to replace the hardcoded html script with a js file
• https://create-react-app.dev/docs/deployment#building-for-relative-paths to ensure the paths are correct in bundle.js
• https://stackoverflow.com/questions/26719884/gulp-minify-multiple-js-files-to-one to concatenate all js files in bundle.js

Pass data to a component

If you embed the component on a third party website, you can allow the website to pass configuration data to your component. How this is done is explained in the resources here:

• https://stackoverflow.com/a/54158247
• https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html