What you’ll learn
  • how to upgrade Webiny from 5.17.0 to 5.18.0

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

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

1. Upgrade Webiny Packages
anchor

Upgrade all @webiny/* packages by running the following command:

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

Before moving on, make sure you commit all your changes.

2. Run the Upgrade Command
anchor

The next step is to run the project upgrade:

If you’d like to learn more about the most important changes that the upgrade process will apply, check out the Additional Information section. Also, once the upgrade command has finished, you can run the git statusexternal link command to see all changes that the command performed.

3. Deploy Your Project
anchor

Finally, proceed by redeploying your Webiny project:

As stated in the Upgrade Webiny section, we recommend that you first deploy your changes into one of your pre-production environments, like dev or staging.

Learn more about different deployment environments in the CI/CD / Environments key topic.

Additional Information
anchor

The webiny upgrade command (run in step 2) will perform a couple of changes to your Webiny project files. Here are some of the more important ones.

Updatedwebiny.config.tsConfiguration Files
anchor

This is the biggest change that will be applied during the upgrade process.

Within all webiny.config.ts files in your Webiny project, build and watch command will be updated. For example, a previous version of the api/graphql/code/webiny.config.tsexternal link configuration file…

… will be transformed into the followingexternal link:

As we can see, instead of importing the old buildFunction and watchFunction functions and assigning them to the build and watch properties of the exported commands object, we’re now assigning createBuildFunction({ cwd: __dirname }) and createWatchFunction({ cwd: __dirname }), respectively.

The same will happen for frontend applications and any custom packages that you might have in your project, where the build and watch commands will be replaced with createBuildApp and createWatchApp, and createBuildPackage and createWatchPackage, respectively.

Please note that all webiny.config.ts files will be simply replaced with new ones. If you had some custom code in these, please make sure to revisit them and ensure the overrides are not lost. Furthermore, all Webpack and Babel overrides are now sent via the overrides property, and not directly into the build / watch function. For example, if we were to open the api/code/fileManager/transform/webiny.config.tsexternal link, we’d be able to see the following Webpack override:

TypeScript types have been updated so it should be clear how to properly re-assign the overrides that you might already had in place. But in any case, if you end up with a question, feel free to message us over at our community Slack channelexternal link.

Additionally, you can also take a look at the default code for all webiny.config.ts files in our GitHub repository: apiexternal link (additional packages hereexternal link), apps/adminexternal link, and apps/websiteexternal link.

Admin Area Project Application - Updated Pulumi Code
anchor

From the 5.18.0 version of Webiny, Admin Area React code is no longer deployed via Pulumi code, but with a custom after-deploy plugin, defined within the also newly created apps/admin/cli/deploy.tsexternal link file.

Because of this, we no longer need the file upload-related code previously located in the apps/admin/pulumi/app.tsexternal link file. All that is needed is the followingexternal link:

One additional change that will be performed is addition of appStorage: app.bucket.idexternal link to the returned stack output values, inside the apps/admin/pulumi/index.tsexternal link entrypoint file.