Assumption: Page information available through a sample page service - and dynamically importing required components We can create a mapper to transform service response to required structure assumed.
Clone this repo and run following for development mode:
npm install
npm run dev
# or
yarn
yarn dev
Run the mock server separately (which serves the page services):
npm run mock-server
# or
yarn mock-server
For production mode (all with mocks for now):
npm run build:serve
# or
yarn build:serve
This examples shows how to dynamically import modules via import()
API and futher extend it to a use case where the page layouts are governed by an external CMS.
- Application Layout Component:
pages/_app.js
- Base Rendering Engine (for all routes):
pages/BaseLayoutEngine.js
- Component Registry:
components/lib/componentRegistry.js
- Layout Renderer:
components/lib/renderers/layout.js
- Page Service Mocks:
mocks/page-service