UI customizing for beginners

[leniervm]

Hi, I want to create an instance of StreamPipes running on my VPS using Docker Compose because it is more convenient for me given the installed architecture. However, I am somewhat lost regarding the implementation of a customized UI. I have reviewed the documentation, added the required files within the ./streampipes/ui folder, and compiled the interface files using 'npm run build'. Nevertheless, having already deployed StreamPipes with Docker Compose (nats version), I am unsure how to incorporate only the image I just compiled into my services as 'custom-ui'. I would appreciate more precise guidance on this implementation (if I am on the right track), as my primary interest is in customizing the UI, given that the default tool's potential is quite good for the intended use. Thank you for your support.

[tenthe]

Hi @leniervm,

If I understand your question correctly, you've created a custom UI Docker image and are asking how to deploy it to StreamPipes using Docker, is this correct?

To do this, replace the default UI image name (${SP_DOCKER_REGISTRY}/ui:${SP_VERSION}) with the name of your new image. When you start the system, the new UI should be loaded.

Cheers,
Philipp

[dominikriemer]

Hi @leniervm welcome! Were you able to solve the problem with Philipp's answer?
If not, please feel free to ask if there's anything you need help with.

[leniervm]

Hello @tenthe and @dominikriemer,

I apologize for the misunderstanding. What I meant to say was that when I referred to compiling the image, I was talking about the process of building, using the npm build command within the UI folder, the necessary files for the customized Apache StreamPipes interface. Regarding the commands and the use of Docker, I am following the official documentation.

However, I am somewhat lost when it comes to StreamPipes. I am seeking your support on, once this process is done, how to reach the Docker image pull stage. What steps are required after build custom files in order to get a new Docker image, because I suppose I can't hold the Streampipes stock image when I am customizing UI, backend or elements respectively. I do not have much experience with React apps, and I would like to know if this applies to customizing the backend functions too as @dominikriemer explained to me.

In a short description, I do not know how to get a custom 'UI' after I have the Streampipes repository folder in my PC with the custom files like the tutorial https://streampipes.apache.org/docs/extend-customize-ui/ and the deployment of Streampipes docker compose file with every service.

Thank you for your assistance.

[tenthe]

If I understand you correctly, you have customized the UI and now want to deploy it in a Docker container, right? Can you run the system with your configuration locally on your development machine?
To create and deploy a Docker container, you need to create a Docker image of your customized UI. Once the image is created, you should upload it to a repository, such as Docker Hub. You can then reference this custom image in your docker-compose file using the image name so that your deployment can use the custom UI.

Note that the customizations mentioned in the link you provided only apply to the UI elements. If you need to customize the backend or extension services with adpaters and processing elements, you should read the development documentation for further guidance on these aspects.

I hope this is helpful. If you need further guidance or if I have misunderstood your problem, please let us know.