This is a starter project intended to help in the development of external components for Content Hub. It supports creating react components, as well as static vanilla javascript based components.
If you are creating a component that has no external dependencies, and does not require any compiling, you should follow the following steps:
- Create a new directory within
src/Static
, for example "MyNewComponent" - Create a javascript file within this new directory, for example "NewComponent.js"
- Copy the content of the file at
src/Static/simple/index.js
into your new file to use as a template - After building, the new component will be available at
public/static/{DirectoryName}/{FileName}.js
If you are creating a component that has external dependencies (such as react), and therefore requires compiling, you should follow the following steps:
- Create a new directory within
src/Static
, for example "MyNewComponent" - Create an entry point file within this new directory, for example "NewComponent.jsx"
- (optional) Copy the content of either
src/Simple/index.ts
orsrc/SimpleReact/index.jsx
into your new entry point file to use as a template - Add a new entry for your new entry point file within
webpack.config.js
, for example:
module.exports = {
...
entry: {
...
{NewComponentName}: '{PathToEntryFile}'
...
},
...
}
- After building, the new component will be available at
public/{NewComponentName}.js
Further detail regarding entry points can be found within the Webpack Documentation.
To build the components run
npm run build
You can also set this to run whenever a source file is changed by running
npm run watch
This will populate the public
directory
Start the server by calling
npm run start
This will host the compiled components from the public
directory, by default, at http://localhost:3000.