menu
Menu
Mobify DevCenter
search_icon_focus

Configuring the Express App

Note: In this article, we use the abbreviation “SSR” to refer to server-side rendered.

Key parts of the setup of the Express app are controlled by configuration options in the mobify object, defined at the top level of the project’s package.json file. Here’s an example (with other parts of package.json omitted for clarity):

{
"name": "progressive-web-scaffold",
"mobify": {
"ssrEnabled": true,
"ssrOnly": ["ssr.js", "ssr.js.map"],
"ssrShared": [
"main.css",
"static/ico/favicon.ico",
"static/robots.txt",
"**/*.js",
"**/*.js.map"
],
"ssrParameters": {
"proxyConfigs": [
{
"protocol": "https",
"host": "www.merlinspotions.com",
"path": "base"
}
]
}
}
}

Key parameters in the package.json file

ssrEnabled

This boolean flag should be set to true for a server-side rendered PWA project. If the project is based on the Mobify platform scaffold, then setting this to true enables building of the SSR-related parts of the project. The value also marks any bundles pushed to Mobify Cloud as containing SSR files. If this value is not true, deploying those bundles will not create Express apps.

ssrOnly and ssrShared

For efficiency, when a bundle is pushed to Mobify Cloud, not all the files in that bundle are packaged up and made available to the Express app in remote mode. For example, large image files aren’t used in server-side rendering, and including them as part of a remote mode Express app slows down bundle deployment and SSR rendering.

The ssrOnly and ssrShared properties are lists of bundle files, relative to the build directory (the output directory for webpack or other build tools) that define which bundle files are made available to the SSR server when it’s running in remote mode. They are lists of globbing patterns where * is a wildcard matching zero or more of any character.

The ssrOnly list defines which files are only part of the Express app, and should not be made available under the /mobify/bundle/ path. Typically this would include the ssr.js file that instantiates the Express server and handles the main React rendering flow.

The ssrShared list defines which files are made available to the Express app and are also available available under the /mobify/bundle/ path. Typically this list will include:

  • The server-side rendered JavaScript files: main.js, vendor.js and worker.js. The example above includes them with .js* extensions so that .map files will also be available to the Express app, for more meaningful stack traces in the event of errors.

  • Any extra JS files such as webpack chunks (for example, product-list*.js*) that may be loaded by the PWA when running server-side.

  • Any bundle files that the server-side rendered PWA might need to load from the file system.

ssrParameters

This section contains additional parameters that configure Express app behavior.