React Apps with Plugins Using ScandiPWA

Banner Image

Setting Up An App

The first job is to set up a Create React App. Let’s do this in a directory called scandi-test.

% mkdir scandi-test
% cd scandi-test
% yarn create react-app my-host-app
% cd my-host-app
% yarn add @scandipwa/scandipwa-scripts
"scripts": {
"start": "scandipwa-scripts start",
"build": "scandipwa-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
  "scandipwa": {
"type": "theme",
"extensions": {
}
},

Making The App Extensible

Now that our Create React App based application is enabled for ScandiPWA plugin it’s time to make it extensible. Over in App.js let’s create a new function called getData and define it like so:

/** @namespace my-host-app/getData */
const getData = () => [1,2,3,4];
function App() {
return (
<div>{JSON.stringify(getData())}</div>
);
}

Building The Extension

In the parent directory of my-host-app we create a peer directory called extension and initialize it as an NPM repo with some directories like so:

% mkdir extension
% cd extension
% yarn init -y
% mkdir -p src/plugin
% touch src/plugin/extension.plugin.js
export default {
"my-host-app/getData": {
function: () => [10,20,30,40,50]
}
}

Enabling the Extension

Now we can go back to the package.json of my-host-app and enable the extension:

  "scandipwa": {
"type": "theme",
"extensions": {
"extension": true
}
},
"extension": "link:../extension",
% cd my-host-app
% yarn
% yarn start
The override data shown in the host application
  • Functions (as we did)
  • Classes
  • Static member variables
  • Member variables
  • Member functions

Where To Go Next

One the Blue Collar Coder channel we have a video that walks through getting this all working using a far more interesting example. Go have a look!

Associated video for this article

Conclusions

Pluggable architectures are a great way to move your highly verticalized application to something that is an extensible platform that folks can customize to match their requirements. This ScandiPWA webpack plugin (which can be used outside of CRA) allows you to specify extension points and override their functionality. That gives you a great new architectural tool for NodeJS applications.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jack Herrington

Jack Herrington

523 Followers

I YouTube as the Blue Collar Coder on advanced FE topics. Check it out!