Testing Component

Inside the component folder execute follow the below instructions.

If the project has been recently cloned and/or the node_modules are not installed, run:

$ npm i

To run and serve your component execute:

$ npm start -- --commons

Figure 4. Npm start command execution.

The application will run at http://localhost:3000/. It won’t render anything on the screen;

For us to be able to test it, we need to open the builder application and make the framework to load our component. For development it has a simpler process which is to upload a static file server with a presets file, with the name and address of the new module.

$ mkdir dist
$ cd dist
$ touch presets

The presets is a json file, with all the modules that the builder will use. Edit the presets file and put the content below:

{
    "modules": {
        "graph-component": "http://localhost:3000/static/js/bundle.js"
    },
   “load”: [“graph-component”]
}

With the preset configured, to test in the builder we must start a static server on port 8080, to do that use the http-server which is a command line node tool to serve static files.

To install http-server run the command below:

$ npm i http-server -g

To run the server, run the command in the folder where presets file is located:

$ http-server --cors -p 8080

Figure 5. Http-server --cors execution

After these steps are executed the component will be visible in the builder (Fig. 6):

Figure 6. Component visible on the Builder application.