How to …?
This file contains a loose collection of "How to ..." recipies which give you a rough idea about how certain goals can be achieved as well as referring to further readings about the technical details.
How to Retrieve Custom Data in a Tastic
Tastics are populated with required data from Backstage and Frontastic data APIs automatically. But in some cases you need additonal, custom data. To achieve this you have multiple possibilities which potentially add up:
fetch() function in any React
Component of your Tastic and to handle the loaded state yourself in the
component. If the API endpoint you want to call resides on the same domain or
allows Cross Origin Requests (CORS) you can just go ahead. If you want to learn
more about the
fetch() function, please refer to MDN docs on
While this solution is simple and fast to implement, it requires an asnychronous call to the back-end and is therefore not ready for Server Side Rendering (SSR). In many cases this can be ignored, but sometimes you want the fetched content to appear in SSR for SEO reasons. Also, if the fetched information should be shared between Tastics, this solution might not be feasible. If you find yourself in one of these cases, please jump ahead to Custom Stream.
fetch() + CORS proxy
TODO: The genric CORS proxy is not ready, yet. If you have an API that could usually be handled by generic CORS, please go to the next section.
fetch() + Custom Controller
If the API endpoint you want to work with requires additional work (e.g. authentication), you can implement a TODO: custom Controller in Frontastic. This controller can then easily be reached from the front-end and can implement the additional work.
fetch() does not work for you, a Custom
Stream is the solution. Using
this you can fetch information together with all the other data provided
by Frontastic. The fetched data will be automatically injected into the the
You maybe want to combine a Custom Stream with storing data in a TODO: Custom App.
How to use a dependency which is inside a private npm-repository
npm has a feature for this by adding a
.npmrc to the root-level of the
repository (see Configuring npm -> npmrc).
They have also an article on how to implement this for a CI/CD solution which is
the one we need here:
Using private packages in a CI/CD workflow