What is the scaffold?
The scaffold is your Mobify project starting point. It’s a server-side rendered React app that’s optimized for ecommerce web applications, with the following features:
- Contains all the dependencies you need to create a Node.js project.
- Integrates Mobify’s Commerce Integrations and Analytics Integrations, which you can then customize to suit your backend and any analytics providers.
- Comes with common ecommerce pages already implemented: the home page, product details page (PDP), product listing page (PLP), and an error page.
- Contains user interface components from Mobify’s Component Library.
- Comes with excellent Lighthouse performance scores right off the bat.
Libraries used in the scaffold
Over 100 different libraries are imported into the scaffold files from
node_modules to provide a performant project starting point. Of these, Mobify’s Progressive Web SDK is one of the core libraries that’s included.
To see a list of all the major libraries included in the project scaffold, read about our core technologies.
What does the scaffold include?
The scaffold includes the following files and directories:
pages, and components: everything you’d expect for a React app.
pagesdirectory: contains the home page, PDP, PLP, and error page.
main.jsx: the project entry point. It starts the Express app and the
packages/pwa/app/connector.js: a starting point Commerce Integrations
Connectorthat you can configure for your ecommerce backend.
packages/pwa/app/analytics.js: a starting point Analytics Integrations implementation. It contains
getAnalyticsManager, which returns a singleton instance of
ssr.js: this is where you can configure your Express app.
eslint: a linter that helps highlight code syntax and style issues without having to execute it.
webpackdirectory: a module bundler. It consolidates Mobify’s application modules into one or more bundles for the end user to download.
app/worker/main.js: service workers.
NPM build scripts
The scaffold also includes these NPM scripts:
npm run startor
npm start: starts your local development server.
DEBUG=true npm run start: starts your local development server with the debug environmental variable enabled. This option prints logs in the Chrome DevTools console, which is especially handy for debugging analytics implementations.
npm run test: runs the Jest test framework.
npm run lint: runs the ESLint linter.
npm run prod:build: builds your project.
Project scaffold history
Mobify’s original scaffold was a site called Merlin’s Potions. Thanks to partner feedback, it was replaced in January 2019 with a new lightweight scaffold that’s intended to be much more simple to use. The new scaffold is available in Mobify Platform versions 1.0.4-alpha.0 and later.