I have always wanted to run my own data visualization stack from the database all the way to the dashboard but there was always a tough hurdle to get through and that was how can I build amazing dashboards without a paid tool like Tableau or some other service that would host the UI but not the data. I wanted to keep everything in one location and I wanted to host it myself.
Being able to get the data was quite easy as setting up a MySQL DB on Unraid is pretty straight forward but the challenge comes from trying to display the charts on an external URL.
That was quite the networking challenge. I had to dive deep into Nginx and really understand how Chartbrew was setup so that I could configure my network to be able to host my own charts.
Here's how I did it.
I had to config my Chartbrew docker instance so that the REACT_APP_API_HOST and REACT_APP_CLIENT_HOST were configured to my external URL address. This would make it so that any requests from this Chartbrew instance would flow through my external URL first, which at the same time meant that it would effectively break the localhost IP address for local testing. (The page will load but the API will have some issues and will not be able to login.)
Next I had to configure my SWAG instance to be able to allow the two ports to be on different subdomains. This was a necessary step as Chartbrew seperates the front end and back end into two different API endpoints. The reason for this, I think, is that it seperates front end vs backend. This works great in coding it, but it make quite difficult from a networking perspective. Because it seems like the routes are static, each REACT endpoint, expects that their endpoint is the root endpoint. This makes it so that if you were to make an API suffix i.e. https://davidc.dev/api, it would return with an error cannor get /api/.
I was able to create two subdomain conf files for Chartbrew client as well as the Chartbrew API. These configurations are for if you are Nginx proxy manager. One thing to note is that because of CORS issues, there needs to be an extra line to allow for cross origin resource sharing(CORS). This will allow you to embed your charts into a blog on your site and not run into issues.
Chartbrew Nginx Config Here:
https://github.com/dchen-8/chartbrew-config
It's a start but here is a dashboard that is hosted from my server.