Remote Component Starter Kit
Starter Kit for quickly creating a Remote React Component that can be Remotely Loaded by @paciolan/remote-component
.
Getting Started
Clone the repository and initialize your project.
Modify package.json
and replace the starter kit values with your own.
- set
name
to the name of your project. - set
description
to describe your project. - set
license
to reflect the license of your project.
Install the dependencies.
npm install
Files
There are a few important files, one set is used for the bundle, another set for local development.
-
src/index.js
- Entrypoint of the Remote Component. The component needs to be thedefault
export. -
src/webpack-dev-server.js
- Entrypoint forwebpack-dev-server
. This is only used for development and will not be included in the final bundle. -
src/index.html
- HTML forwebpack-dev-server
. This is only used for development and will not be included in the final bundle.
Building
To build the application, run the following command:
npm run start
This will start the webpack-dev-server
and output the bundle to dist/main.js
.
Adding the Remote Component to an Application
Copy the dist/main.js
to the application's transpiled
folder.
Now the Remote Component can be loaded by the Plugin Discovery service, you just need to send the url
where the bundle is hosted to the Plugin Discovery service.
Development
To start the webpack-dev-server
run the following command:
npm run start
You can view the Remote Component in the browser by going to http://localhost:9090.
Modify the App.js in the src
folder. The webpack-dev-server
will automatically reload the page when changes are made.
You can also use Bootstrap CSS classes in your component. See the Bootstrap Documentation for more information.
Parent Props
The Remote Component can accept props from the parent application. The props are passed to the Remote Component as a props
object.
const App = ({ token, metadata }) => {
// ...
}
Token: The token is the authentication token coming from the parent application. This can be used to authenticate the user in the Remote Component requests.
Metadata: The metadata is an object that can be used to pass additional information to the Remote Component (currently there is no fixed structure but it will have soon).
Note
If developing locally, the token
and metadata
props will be undefined
as they are only passed by the parent application, in this case, you can mock the values.
const App = ({ token, metadata }) => {
token = "" // mock token
metadata = {
// mock metadata
}
// ...
}
Changing the Output
The bundle as a default will be output to the dist/main.js
. This can be updated by changing the following two files:
-
entry
inwebpack-main.config.js
. Update themain
property to a desired output name.
module.exports = {
...
entry: {
main: "./src/index.js"
},
...
};
-
url
variable insrc/webpac-dev-server.js
// different paths for localhost vs s3
const url =
global.location.hostname === "localhost" ? "/dist/main.js" : "main.js";
External Dependencies
The Remote Component is self contained with all of it's dependencies bundled with webpack. Any dependencies that will be provided by the app should be marked as external
in the webpack.config.js
.
In this example, react
and prop-types
are added to externals
. They will not be included in the bundle. The web application is expected to provide these dependencies.
module.exports = {
output: {
libraryTarget: "commonjs"
},
externals: {
react: "react",
"prop-types": "prop-types"
}
};