weld-renderer-react
Universal/isomorphic Weld project renderer built in Next.js/React.
Folder structure
components: React componentselementsButton.jsetc
Project.jsScreen.jsElements.js
pages: (1) Page componentlib: datastatic: e.g. CSS files, images
Components
Project
Project includes a <head> and a Screen.
<Project
project={project}
projectId={projectId}
screenId={screenId}
customObjects={customObjects}
rendererUrl={rendererUrl}
windowProperties={windowProperties}
/>
Screen
<Screen
screen={screen}
layouts={project.breakpoints}
customObjects={customObjects}
windowProperties={windowProperties}
/>
How to Run
Install first:
yarn install
Development:
yarn dev
Production:
yarn build
yarn start
URL syntax
New style:
http://localhost:3000/embed/-KgIjgXxmrYP7p1CnJ7e
http://localhost:3000/embed/-KgIjgXxmrYP7p1CnJ7e/screen1
Old style:
http://localhost:3000/?server=production&projectId=-KgIjgXxmrYP7p1CnJ7e&screenId=screen1
URL parameters:
projectId(required)screenIdserverdefaults to 'production'.widthscreen width for optimized imagesdprdevice pixel ratio for optimized images
Test pages
“Test Everything” project:
| Original Weld | Renderer (localhost) | Renderer (staging) | Renderer (production) | Fastly CDN |
|---|---|---|---|---|
| Table of contents | RR local | RR staging | RR production | CDN |
| All objects | RR local | RR staging | RR production | |
| Custom objects | RR local | RR staging | RR production | |
| Responsive | RR local | RR staging | RR production | |
| Object states | RR local | RR staging | RR production | |
| Links | RR local | RR staging | RR production | |
| Action Blocks | RR local | RR staging | RR production | |
| Fonts | RR local | RR staging | RR production |
Other projects:
| Original Weld | Renderer (localhost) | Renderer (staging) | Renderer (production) | Fastly CDN |
|---|---|---|---|---|
| PoP Cares | RR local | RR staging | RR production | |
| Indiska 1 | RR local | RR staging | RR production | |
| TomSoderlund.com | RR local | RR staging | RR production | |
| HenricMalmberg.se | RR local | RR staging | RR production |
Embed mode (for debugging)
Embed in an IFrame:
http://localhost:3000/embed-test?server=production&projectId=-KgIjgXxmrYP7p1CnJ7e&screenId=screen1
Connections to weld-angular-node
- elementTypeModel → Element.js
- weldFilters (video) → Video.js
- responsiveLayoutListener + cssBuilder → ElementStyleTag.js
- elementBuilder