Skip to main content

Upgrade from 5.3.0 to 5.4.0

What you’ll learn
  • how to upgrade Webiny from 5.3.0 to 5.4.0
danger

Before continuing, make sure to take the necessary precautions, listed in the Overview section.

info

Make sure to check out the 5.4.0 changelog to get familiar with all of the changes introduced with this release.

Upgrade Webiny Packages#

The first step is to upgrade all @webiny/* packages, which can be done by running the following command in the root of your project:

# Execute in your project root.
yarn up "@webiny/*@5.4.0"

Update Website Project Application#

This release includes a couple of smaller changes in the API (api/pulumi) and Website (apps/website/pulumi) project applications' cloud infrastructure code.

1. Adjust Cloud Infrastructure Settings (API Project Application)#

In your api/pulumi/prod/index.ts and api/pulumi/dev/index.ts files, at the end of the file, add the following two lines:

api/pulumi/(dev|prod)/index.ts:99
(...)
return {
region: process.env.AWS_REGION,
apiUrl: cloudfront.cloudfront.domainName.apply(value => `https://${value}`),
cognitoUserPoolId: cognito.userPool.id,
cognitoAppClientId: cognito.userPoolClient.id,
updatePbSettingsFunction: pageBuilder.functions.updateSettings.arn,
psQueueAdd: prerenderingService.functions.queue.add.arn,
psQueueProcess: prerenderingService.functions.queue.process.arn
};
};

This will expose the ARNs of Lambda functions that are part of the Prerendering Service, enabling us to execute them upon deploying the Website project application (happen automatically).

2. Adjust Cloud Infrastructure Settings (Website Project Application)#

Adjust Delivery CloudFront Distribution's pathPattern Property#

Open your apps/website/pulumi/delivery.ts and replace the pathPattern: "/static/*" with pathPattern: "/static-*":

apps/website/pulumi/delivery.ts
(...)
orderedCacheBehaviors: [
{
compress: true,
allowedMethods: ["GET", "HEAD", "OPTIONS"],
cachedMethods: ["GET", "HEAD", "OPTIONS"],
forwardedValues: {
cookies: {
forward: "none"
},
headers: [],
queryString: false
},
pathPattern: "/static-*",
viewerProtocolPolicy: "allow-all",
targetOriginId: appS3Bucket.arn,
// MinTTL <= DefaultTTL <= MaxTTL
minTtl: 0,
defaultTtl: 2592000, // 30 days
maxTtl: 2592000
}
]
(...)

This change is here because, from this release, upon generating a production builds of React applications in your Webiny project, all static assets (JS, CSS, images) will be generated in the static-{RANDOM_ID} folder (previously static). This is mainly for better caching purposes.

info

As it was always the case, upon deploying Website and Admin Area project applications, all previously uploaded React production build files are removed. So, once the deployment is complete, in your Amazon S3 buckets, expect to have the static folder removed, and a new static-{RANDOM_ID} to be created.

info

Due to website prerendering improvements that the 5.4.0 release brings, in the Amazon S3 bucket that's deployed as part of the Website project application, expect to have multiple static-{RANDOM_ID} folders - one for each deploy. If you're deploying frequently and you end up having a lot of folders, you might want to schedule a cleanup task, that will delete folders that are no longer in use.

Check out the Cloud Infrastructure key topics section to learn more about all of the resources included in the process.

Remove Static Assets Upload and Set min, default, and max TTLs to Zero#

Open your apps/website/pulumi/app.ts and remove everything related to the upload of the Website project application's React production build files.

Another thing you'll also need to adjust are the TTL properties, which all need to be set to zero.

To make it a bit easier, you can follow the differences that were made in the actual commit. Note that if you didn't make any changes to this file, you're free to just copy and paste the new version of the code.

Last updated on by Adrian Smijulj