Standalone Starter React Component for Oracle Commerce Cloud
Must be used with occ-shared-resource-bundles
This component allows OCC developers to create and update React 16 JSX applications and components as standard widgets in real time.
The React Application is compiled to file/widget preserving the request path folder structure for an occ widget.
The component wraps the native knockout.js view model and injects both the model and developer defined dependencies into each React component allowing developers access to best of both worlds, "old" and new. Of course, the build can be configured and with the state of the React eco system, the possibilities are endless.
Hot Module Reload(HRM) allows developers to update component in real-time without page refreshes
works by way of code injection via sockets. To use this in the OCC instance you need a proxy. I use Charles, but I'm sure any proxy which allows you to map and wildcard files will work. Please see Proxy configuration for charles settings.
Component: 2.3.2 React: 16.7.0 OCC: 18.6 (will work with previous versions)
use shared vendor bundle- react-redux example
- OCC extension deployments scripts
React.lazy, React.Suspense example (bundle split, dynamic import)hot module reloadstyled components examplebase 64 img for css and url-loader exampleupdate to latest react (16.7.0)dependency cleanup
Examples includes the following webpack plugins/loaders
- styled-components
- style-loader - (injects styles in dom)
- css-loader (css-modules, css compilation)
- postcss-loader (css-processing)
- postcss-image-sizes (adds image sizes to the css class that references images)
- base64-inline-loader (converts image paths to base64 references)
Install the OCC shared-resource-bundle (application widget). occ-shared-resource-bundles There are no production level dependencies for React out of the box as they are included in the resource bundle. Feel free to add more to the global and your component application.
$ npm i
- Naturally update occ widget configuration in
/fileas well as the layout sub folder name/file/widget/{componentName}/layouts/{componentName}Default(don't forget to update the id in widget template files with your component's name, and rename all the classes)
<div data-bind="onRender: onRender.bind($data)" id="{componentName}"></div>
- Update
webpack.config
OCC_GLOBAL_FILE_NAME: filename of your occ-shared-resource-bundle . ex: react.vendor.min.js
COMPONENT_NAME: name of installed OCC component as defined by file/widget/{componentName}
MAIN_CHUNK_BUNDLE_ID: Id for the entry bundle. In most cases you will only have one, but depending on how you configure your chunking, this ID is used to prvent uglification/minification as OCC will perform this.
PUBLIC_PATH: DO NOT CHANGE
externals: Mappings to OCC specific require.js dependencies. ie: (knockout.js, jquery, etc etc...)
In your /webpack.config.js update the dllManifest variable with the path to where you copied the files. Update only the prefix.
const dllManifest = require(`./vendorManifest/vendor-${
isProd ? "prod" : "dev"
}.json`);
You will need the dev and prod versions as the filenames are postfixed accordingly when built.
These manifest files are generated with occ-shared-resource-bundle.
See instructions on how to set this up.
app/js/index.jsx is your entry application file. Use this as your starting point to modify the widget model, and all your defined occ dependencies.
* ReactDOM.render() is called on the onRender() method of the widget, which is data-bound in the occ widget template.
/app/js/app/App.jsx is your working Raect application file. Go Nuts from here!
The native OCC widget and combined bundles are located in file/. Create your .zip extension from file/ to upload to the OCC Admin.
After you install and create a widget instance in OCC, you will need follow these instructions to utilize Hot Module Reloading via proxy.
I personally use Charles, but you should be able to use any web proxy that supports mapping files
both locally and remotely. The webpack dev server is configured to run on https://localhost:9000 so you will need to configure your proxy mappings.
The file specific mapping with cover the minified file name and point it to the non minified file name "".
Charles file mappings and configurations can be found:
/charles remote configs
If Charles is not recording your requests in Mac OSX, plesase follow these instructions
$ npm run dev
Enzyme Jest Chai for React Components. See module documentation for further configurations.
Test
$ npm run test
Watcher
$ npm run test:watch
Coverage
$ npm run test:coverage
Update Snapshot
$ npm run test:update
$ npm run build:dev
$ npm run build:prod
You will need to use the DCU to manually deploy the files and supplementary bundles after the first extension installations.
I am currently working on a deployment task which will come in a later version.
Add all proprietory occ dependencies required for your app are referenced as externals which you can update in webpack.config.js under the externals property
nodejs
webpack 4
babel 7
eslint
react flow
reactjs
react-hot-loader
styled-components
Oracle DCU
Adeel Imran - Jest-Enzyme test setup and configuration
Thanks @bholt react inspiration
occ-shared-resource-bundles
occ-graphql
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.