In order to use a React.js application as a opencomponent you have to create two files, the
oc-server.js will be processed by opencomponent registry. You have access to all plugins registered in the registry and code executed here is not exposed to public domain.
The server file has access to all parameters passed to your component from the application who is including it.
oc-server.js file should look as the next one:
Also you can use plugins and add yout params defaults or any logic you need:
Create yours in a specific folder in the project root. I.e
index.html. This file is a template which will be rendered by any template engine supported by the opencomponents registry. You have access to all parameters provided by the
An example template instantiating a UMD build reactjs application should look as follows (using handlebars template engine):
staticPath definition to load the main.js file. This variable is provided by the server to be able to reach the deployed files of your component.
Create yours in the same folder of the
oc-server.js . I.e
In order to tell to opencomponents where should go for this files you have to add some configurations in
NOTE: For react.js already built application it’s important to disable opencomponents minify which can break your application.
NOTE: Due how opencomponents deployment works you should move all the dependencies to devDependencies. If not, oc will try to require all them again and it will fail to deploy your component.
package.json possible configurations can be checked here.
Setting up Gitlab-ci to automatically deploy your component when a new tag (version) is created in git
You want to automatize the deployment process any time you publish new version of your react app. So let’s tell gitlab-ci to do the dirty work for us.
In resume the steps to deploy our component are:
- Test: We should ensure our new version is stable enough to be deployed.
- Build: When we know the application is stable enough we can proceed to build process which will generate the production js to be consumed by the component.
- Deploy: Upload the application to our opencomponents registry
.gitlab-ci.yml should look as follows:
Note that publish ask for
$REGISTRY_PASSWORD. You should ask your administrator the registry password and set up in your gitlab-ci.
- Move the component to a folder without any other component
- Enter the component folder and execute
yarn, and then
- Go back to parent folder and execute
NODE_ENV=production oc dev .