Upgrade From 5.17.0 to 5.18.0

1. Upgrade Webiny Packages

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

yarn up "@webiny/*@5.18.0"

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

2. Run the Upgrade Command

The next step is to run the project upgrade:

yarn webiny 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 status command to see all changes that the command performed.

3. Deploy Your Project

Finally, proceed by redeploying your Webiny project:

# Execute in your project root.
yarn webiny deploy --env {environment}

Additional Information

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.

Updated webiny.config.ts Configuration Files

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.ts configuration file…

import { buildFunction, watchFunction } from "@webiny/project-utils";

export default {
  commands: {
    build: buildFunction,
    watch: watchFunction
  }
};

… will be transformed into the following :

import { createBuildFunction, createWatchFunction } from "@webiny/project-utils";

export default {
  commands: {
    build: createBuildFunction({ cwd: __dirname }),
    watch: createWatchFunction({ cwd: __dirname })
  }
};

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.ts , we’d be able to see the following Webpack override:

import { createBuildFunction, createWatchFunction } from "@webiny/project-utils";

const webpack = config => {
  (config.externals as any).push("sharp");
  return config;
};

export default {
  commands: {
    build: createBuildFunction({ cwd: __dirname, overrides: { webpack } }),
    watch: createWatchFunction({ cwd: __dirname, overrides: { webpack } })
  }
};

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 channel .

Admin Area Project Application - Updated Pulumi Code

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.ts file.

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

import * as aws from "@pulumi/aws";

class App {
  bucket: aws.s3.Bucket;
  constructor() {
    this.bucket = new aws.s3.Bucket("admin-app", {
      acl: "public-read",
      forceDestroy: true,
      website: {
        indexDocument: "index.html",
        errorDocument: "index.html"
      }
    });
  }
}

export default App;

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