scenes-project v1.0.0-SNAPSHOT
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.
4. 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.
5. 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
11 months ago