scenes-framework

Low-effort, high-impact user interfaces for free or reasonably priced

Environment Setup

Node: 14.19.3
Npm: 7.24.2

​ Note: the rest of these instructions will show how to apply the 'scenes-sample-component' provided. They assume that 'scenes' and 'scenes-sample-component' packages will be stored in the same directory, for relative URL purposes. ​

1. In the scenes/module-provider/webpack.config.js file, edit so that the ModuleFederationPlugin looks something like this: ​ new ModuleFederationPlugin({ name: 'elements', filename: 'remoteEntry.js', exposes: { './scenes-sample-component': '../../scenes-sample-component/index.js' } }) ​ The ./ in front of the package name you are exporting is significant; do not omit it. ​
2. In your terminal at the root of scenes, run the following commands npm install then npm run start ​ This will build the project and then launch the module provider and webpack-dev-server to allow you to run Scenes launcher locally. ​
3. When this is running, the launcher will be running at localhost:8080/index.html. To test out new Scene json, you can include a scene using the sceneJson query parameter. This should be Base64-encoded JSON text. For example, something like this: ​ { "frames": [ { "type": "SideviewFrame", "elements": [ { "package": "scenes-sample-component", "type": "WeatherWidget" } ] } ] } ​ will look like this when included in the URL. ​ http://localhost:8080/index.html?sceneJson=ewogICAiZnJhbWVzIjogWwogICAgICB7CiAgICAgICAgInR5cGUiOiAiU2lkZXZpZXdGcmFtZSIsCiAgICAgICAgImVsZW1lbnRzIjogWwogICAgICAgICAgICB7CiAgICAgICAgICAgICAgICJwYWNrYWdlIjogInNjZW5lcy1zYW1wbGUtY29tcG9uZW50IiwKICAgICAgICAgICAgICAgInR5cGUiOiAiV2VhdGhlcldpZGdldCIKICAgICAgICAgICAgfQogICAgICAgIF0KICAgICAgfQogICAgXQp9

Local Tappp URL http://localhost:8080/index.html?sceneJson=ew0KICAgImZyYW1lcyI6IFsNCiAgICAgIHsNCiAgICAgICAgInR5cGUiOiAiU2lkZXZpZXdGcmFtZSIsDQogICAgICAgICJlbGVtZW50cyI6IFsNCiAgICAgICAgICAgIHsNCiAgICAgICAgICAgICAgICJwYWNrYWdlIjogInNjZW5lcy1zYW1wbGUtY29tcG9uZW50IiwNCiAgICAgICAgICAgICAgICJ0eXBlIjogIlRhcHBwUGFuZWwiDQogICAgICAgICAgICB9DQogICAgICAgIF0NCiAgICAgIH0NCiAgICBdDQp9