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

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

Make sure to check out the 5.5.0 changelog to get familiar with all the changes introduced in 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:

Once the upgrade has finished, running the yarn webiny --version command in your terminal should return 5.5.0.

Upgrade Webiny Project
anchor

Before running the below webiny upgrade command, please run the following from your project root:

Running this command will apply a minor fix to the webiny upgrade command that you’re about to execute.

This release includes a couple of smaller changes on the project organization level. To make it easier, we provide a simple Webiny CLI command that will automatically make all the necessary adjustments for you.

Once you’ve run the above upgrade command, run the following:

Before running the webiny upgrade command, we recommend that you commit any active code changes you might have in your working branch.

Additional Manual Upgrade Steps
anchor

Once the webiny upgrade command has finished, a couple of manual steps remain to be completed, after which, your project should be completely updated.

You can then proceed by committing the changes to your working branch and trying to deploy the project to one of the development or pre-production environment.

1. AddapolloLinks.tsFile (Located in Your Website Project Application)
anchor

In your Website project application (apps/website), we need to add the new apolloLinks.tsexternal link file, that contains a couple of plugins, necessary for resolving a couple of pre-rendering related issuesexternal link.

Copy and paste the above mentioned apolloLinks.ts file to apps/website/code/src/plugins/apolloLinks.ts, and also, make sure it’s imported in the index.tsexternal link, located in the same plugins folder:

apps/website/code/src/plugins/index.ts

2. UpdatePageReact Component (Located in Your Website Project Application)
anchor

Open your /apps/website/code/src/components/Page/index.tsx file and replace its content with the new oneexternal link. This change is also related to new pre-rendering related fixes.

3. Optionally, Add Necessary Environment Variables to Enable Newly Introduced Logs Forwarding
anchor

The new webiny watch command enables you to stream logs from your application code directly to your terminal. And while all new projects will have this feature automatically enabled, there are a couple of manual steps that needs to be done for projects that are making the upgrade to version 5.5.0.

In api/pulumi/dev/index.tsexternal link, upon instantiating both Graphql and HeadlessCMS classes, make sure to pass the WEBINY_LOGS_FORWARD_URL: String(process.env.WEBINY_LOGS_FORWARD_URL) as an environment variable.

With that, you will also need to add the @webiny/handler-logs dependency to api-graphqlexternal link and api-headless-cmsexternal link packages, and register its plugins in respective index.tsexternal link / index.tsexternal link files.

This will enable logs forwarding for your main GraphQL API and HeadlessCMS GraphQL API Lambda functions.

4. Fix thebuildFunctionin thetransformLambda Function Handler
anchor

We’ve received several reports of the webiny.config.tsexternal link not importing the correct buildFunction. Before doing any deployments, please ensure that the config file imports the correct buildFunction:

Upgrade Headless CMS Permissions
anchor

After a successful deployment, open your Admin Area to execute the automated upgrade of Headless CMS permissions. It will update permissions data structure on user groups and API keys.

We recommend verifying your CMS permissions after the upgrade, to make sure they reflect exactly what is expected.