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()

The simplest way is to use the JavaScript 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 fetch().

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.

Custom Stream

If 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 Tastic.

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