Skip to main content

5.0.0 to 5.1.0

What you’ll learn
  • how to upgrade Webiny from 5.0.0 to 5.1.0
danger

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

Upgrade Webiny Packages#

Execute the following command in the root of your project:

yarn up "@webiny/*@5.1.0"

Update Pulumi Infrastructure Code#

The following changes apply only to the production setup of the API project application's cloud infrastructure.

info

Note that the cloud infrastructure, defined within the API project application, is defined as two different setups - development and production.

Read more about it in our Cloud Infrastructure key topic.

Add Missing Private Subnet for the ElasticSearch Cluster#

Open your api/pulumi/prod/elasticSearch.ts file, and on line 26, add the vpc.subnets.private[1].id subnet to the subnetIds array:

api/pulumi/prod/elasticSearch.ts
this.domain = new aws.elasticsearch.Domain(domainName, {
elasticsearchVersion: "7.7",
clusterConfig: {
instanceType: "t3.medium.elasticsearch",
instanceCount: 2,
zoneAwarenessEnabled: true,
zoneAwarenessConfig: {
availabilityZoneCount: 2
}
},
vpcOptions: {
subnetIds: [vpc.subnets.private[0].id, vpc.subnets.private[1].id],
securityGroupIds: [vpc.vpc.defaultSecurityGroupId]
},
ebsOptions: {
ebsEnabled: true,
volumeSize: 10,
volumeType: "gp2"
},
advancedOptions: {
"rest.action.multi.allow_explicit_index": "true"
},
snapshotOptions: {
automatedSnapshotStartHour: 23
}
});

Optionally, Mark Mission Critical Resources as Protected#

In order to prevent accidental deletions of mission critical cloud infrastructure resources, the Pulumi framework allows us to mark a resource as protected, via the protect property.

info

Learn more about the protect property in the official Pulumi documentation.

For the prod setup of your API project application's cloud infrastructure, projects created with Webiny version 5.1.0 and higher, will have the following cloud infrastructure resources marked as protected:

For projects created before Webiny version 5.1.0, these need to be added manually.

To do that, start by adding the protectedEnvironment variable, and passing its value to DynamoDB, Cognito, ElasticSearch, and FileManager classes, in your api/pulumi/prod/index.ts:12 file:

api/pulumi/prod/index.ts:12
/**
* We protect mission critical cloud infrastructure resource against accidental deletion. We do this
* only for the "prod" environment, but, if needed, feel free to additional environments.
* @see https://www.pulumi.com/docs/intro/concepts/resources/#protect
*/
const protectedEnvironment = process.env.WEBINY_ENV === "prod";
export default () => {
const dynamoDb = new DynamoDB({ protectedEnvironment });
const cognito = new Cognito({ protectedEnvironment });
const elasticSearch = new ElasticSearch({ protectedEnvironment });
const fileManager = new FileManager({ protectedEnvironment });

Once you have that in place, make sure to pass the value of protectedEnvironment to relevant cloud infrastructure resources:

  1. default DynamoDB table
  2. ElasticSearch - domain, domain policy, and special ElasticSearch-related DynamoDB table
  3. File Manager's S3 bucket
info

For more information and code changes, you can check the relevant pull-request.

Update Page Builder Plugins#

We've upgraded all element plugins to support customization via factory parameters. It now also allows you to create multiple variations of the same element, with different settings.

One of the plugins was not a factory in the previous version of Webiny, and we need to change the usage of that particular plugin in your project. Simply open the file below, and add () to execute the grid plugin factory:

apps/admin/code/src/plugins/pageBuilder/editorPlugins.ts
// ... imports
export default [
contentBackground,
blockEditing,
// Elements
document(),
grid(),
block(),
gridBlock,
cell(),
heading()
// ... existing plugins
];

Update build configs#

If you're developing your custom packages, you'll soon run into ugly import paths like ../../../../../types, etc. To avoid this, make the following changes in your project:

Update .babel.node.js#

Replace the entire file with the following code, or only copy/paste the highlighted lines:

.babel.node.js
module.exports = ({ path }) => ({
presets: [
[
"@babel/preset-env",
{
targets: {
node: "12"
}
}
],
"@babel/preset-typescript"
],
plugins: [
["@babel/plugin-proposal-class-properties"],
["@babel/plugin-proposal-object-rest-spread", { useBuiltIns: true }],
["@babel/plugin-transform-runtime", { useESModules: false }],
["babel-plugin-dynamic-import-node"],
["babel-plugin-lodash"],
[
"babel-plugin-module-resolver",
{
cwd: path,
alias: {
"~": "./src"
}
}
]
]
});

Update .babel.react.js#

Replace the entire file with the following code, or only copy/paste the highlighted lines:

.babel.react.js
module.exports = ({ path }) => ({
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["last 2 versions", "safari >= 7"]
},
// Allow importing core-js in entrypoint and use browserlist to select polyfills
useBuiltIns: "entry",
// Set the corejs version we are using to avoid warnings in console
// This will need to change once we upgrade to corejs@3
corejs: 3,
// Do not transform modules to CJS
modules: false,
// Exclude transforms that make all code slower
exclude: ["transform-typeof-symbol"]
}
],
["@babel/preset-react", { useBuiltIns: true }],
["@babel/preset-typescript", { isTSX: true, allExtensions: true }]
],
plugins: [
"babel-plugin-macros",
"babel-plugin-lodash",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-throw-expressions",
[
"@babel/plugin-transform-runtime",
{
corejs: false,
version: require("@babel/runtime/package.json").version,
regenerator: true,
useESModules: false
}
],
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
["babel-plugin-emotion", { autoLabel: true }],
[
"@babel/plugin-proposal-object-rest-spread",
{
useBuiltIns: true
}
],
[
"babel-plugin-named-asset-import",
{
loaderMap: {
svg: {
ReactComponent: "@svgr/webpack![path]"
}
}
}
],
[
"babel-plugin-module-resolver",
{
cwd: path,
alias: {
"~": "./src"
}
}
]
]
});

Update jest.config.base.js:#

Add a moduleNameMapper parameter to the existing config:

jest.config.base.js
// ... imports
module.exports = ({ path }, presets = []) => {
const name = basename(path);
return merge.recursive({}, tsPreset, ...presets, {
name: name,
displayName: name,
modulePaths: [`${path}/src`],
testMatch: [`${path}/__tests__/**/*.test.[jt]s?(x)`],
transform: {
"^.+\\.(ts|tsx)$": "ts-jest"
},
moduleDirectories: ["node_modules"],
moduleFileExtensions: ["ts", "js", "tsx"],
moduleNameMapper: {
"~/(.*)": `${path}/src/$1`
},
modulePathIgnorePatterns: [],
globals: {
WEBINY_VERSION: version,
"ts-jest": {
isolatedModules: true,
babelConfig: `${path}/.babelrc.js`,
diagnostics: false
}
}
});
};

Update TS and Babel configs in existing packages (if any)#

In case you already have custom packages, you will also need to update their tsconfig.build.json and tsconfig.json files, by adding the following parameters to them:

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
}
}

Also update the corresponding .babelrc.js files in your custom packages, as we now use the base babel config as a factory. We need to pass the path parameter as some babel plugins need to know the exact root of the package.

.babelrc.js
// For node packages:
module.exports = require("../../.babel.node")({ path: __dirname });
// For React packages:
module.exports = require("../../.babel.react")({ path: __dirname });

Now you can use ~ to have nice, clean import paths in your packages, and Jest tests. ~ will always point to your packages' src folder.

Deploy your project#

Now you're ready to deploy your project. Run yarn webiny deploy, or consult the guide on deployment.

Edit this page
Last updated on by Pavel Denisjuk