Creating a Tastic in Backstage
Because Tastics don't exist on their own you need to prepare a Page in Backstage which contains the Tastic you've just created in your Catwalk. You only need to do this once for every new Tastic, because the actual code for the Tastic exists on your VM and is re-compiled when you change something.
However, creating Pages to test your Tastics in different combinations and layouts is also a good idea.
Once you've created a Tastic you need to upload the spec file to Backstage to let it know that your Tastic exists.
Uploading the Schema
Developmentenvironment from the dropdown (the wrench icon)
addicon and select your file. You'll only need to repeat this step if the Spec changes
Once uploaded, you'll then need to create a Node.
Stageapp by selecting the
phoneicon on the left hand nav
Newon the top left of your screen, then
As you're working in the
Development environment, the Nodes you create won't affect Frontend Managers working in
where each Developer can have their own Node level (usually their name). This helps to avoid disturbances between different Developers.
Remember the path to your Node! You'll need this path to view the Page created later in your VM. For example:
Add Streamand select a Stream type from the dropdown if your Tastic requires it
product-listso you'll need to select
Product API Search.
Streams are created on Node level, because their data can be shared between multiple Tastics on the same Page in that Node.
Filter Previewgives you an idea of which products will be returned in that Stream.
You will then need to create a Page within your Node that'll contain your Tastic.
Create a Page
Newon the top left of your screen again, but this time select
Create Page, then input a
Page Name, select a
This will open the Editor.
Addicon on any of the Regions (e.g. Main), select a
Celllayout and your Tastic will be added to this Region on your page
Saveon the top right of your screen
Note: You can't preview your Tastic in Backstage, yet. The code for the Tastic only exists on your VM so far, so the Preview environments can't render it yet.
Draftstate, you can release it by clicking the
Morebutton (three vertical dots) on the right of the Page name, then clicking
Viewing the Tastic
You can now view your Tastic in your VM. Just use the URL path you specified at your Nodes against the local VM, for example, http://.frontastic.io.local/Developers/Catherine
Whenever you change the code of your Tastic, the development stack will automatically re-compile the code and show you the result instantly.
Once you're happy with the Tastic, you can make it available in all environments by clicking the environment icons:
The Tastic only exists once in Backstage, so once you’ve changed it to Production and you want to make any changes to the Schema, it will take immediate effect on Production even if you’re only changing it in the Development environment. In the next article, we'll go through the Tastic Schema itself in more detail but for tips on how to update your Schema to an existing see this article as well as this one.
Note: You don't need to go through the steps shown in this tutorial for every change to your Tastic. You only need to re-upload the Spec whenever it changes.
‹ Back to Article List