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
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:
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
Voilà - your continuous delivery set up is complete.
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
- Standalone. The standalone React application to which you can browse. This is stored in the
- Component. The files to share with a third party to easily embed the component on his website. This is stored in the
If the branch names includes
master, the application is hosted on the following paths in the storage browser:
version of the application are retrieved from the
If the branch names not include
master as is the case for
hotfix following the git-flow paradigm, the application is hosted on the following paths in the storage browser:
An example of the cloud storage file structure is given in the figures below:
The development of the deployment scripts is based on the following preparation steps before uploading the files to cloud storage:
- Create a production build taking into account the
.env.productionenvironment 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.
- Use environment variables from GCP to determine the bucket to deploy to
gulpfile.jsto prepare the
deployfolder by creating
- Upload the files to cloud storage using the node
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
- https://stackoverflow.com/questions/26719884/gulp-minify-multiple-js-files-to-one to concatenate all js files in
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: