Webiny Docs home page
What you’ll learn
  • how to upgrade Webiny from 5.3.0 to 5.4.0
Before continuing, make sure to take the necessary precautions, listed in the Overview section.
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
anchor

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
anchor

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)
anchor

In your api/pulumi/prod/index.ts external link and api/pulumi/dev/index.ts external link 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 external link 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)
anchor

Adjust Delivery CloudFront Distribution's pathPattern Property
anchor

Open your apps/website/pulumi/delivery.ts external link 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.

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.

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
anchor

Open your apps/website/pulumi/app.ts external link 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 external link, 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 external link. Note that if you didn’t make any changes to this file, you’re free to just copy and paste the new version external link of the code.