Starter Kit for quickly creating a Remote React Component that can be Remotely Loaded by @paciolan/remote-component
.
Clone the repository and initialize your project
# create new repo
mkdir my-component
cd my-component
git init
# pull the remote component starter kit
git pull https://github.com/Paciolan/remote-component-starter.git --depth=1
git commit --amend -m "chore: 🛠️ pull remote-component-starter"
# install dependencies
npm ci
Modify package.json
and replace the starter kit values with your own.
name
to the name of your project.description
to describe your project.repository
to point to your repository.license
to reflect the license of your project.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 the default
export.src/webpack-dev-server.js
- Entrypoint for webpack-dev-server
. This is only used for development and will not be included in the final bundle.src/index.html
- HTML for webpack-dev-server
. This is only used for development and will not be included in the final bundle.The bundle will be output to the dist/main.js
.
npm run build
Create a development build for easier debugging.
npm run build:dev
The component can be debugged locally by first starting webpack-dev-server
.
npm run start
Now (using VSCODE), go to the Debug tab, select "Launch Chrome" and start the debugger (F5).
You should now be able to set breakpoints and step through the code.
The bundle as a default will be output to the dist/main.js
. This can be updated by changing the following two files:
entry
in webpack-main.config.js
. Update the main
property to a desired output name.module.exports = {
...
entry: {
main: "./src/index.js"
},
...
};
url
variable in src/webpac-dev-server.js
// different paths for localhost vs s3
const url =
global.location.hostname === "localhost" ? "/dist/main.js" : "main.js";
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"
}
};
Commits are added to the repository with commitizen compatible git-cz
.
# stage all changes
git add .
# run commitizen
npm run cz
Joel Thoms (https://twitter.com/joelnet)
Icon made by Freepik from www.flaticon.com
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。