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

1
Select the Development environment from the dropdown (the wrench icon)
Uploading a Tastic to Backstage Use Development Environment
2
Select the Developer App
Uploading a Tastic to Backstage Open Developer App
3
Go to the Tastics section
Uploading a Tastic to Backstage Go to Tastics Section
4
You will see a list of all known Tastic specifications which includes all Tastics from the Development environment as well as those from the Staging and Production environments
To upload your Tastic, click the add icon and select your file. You'll only need to repeat this step if the Spec changes
Uploading a Tastic to Backstage Click Add Icon

Once uploaded, you'll then need to create a Node.

1
Switch to the Stage app by selecting the phone icon on the left hand nav
Uploading a Tastic to Backstage Go to Stage App
2
Click New on the top left of your screen, then Create Node
Uploading a Tastic to Backstage Click New

As you're working in the Development environment, the Nodes you create won't affect Frontend Managers working in Production

3
Fill in the required Node settings
To keep structure to the folders we recommend creating a top-level node Developer

where each Developer can have their own Node level (usually their name). This helps to avoid disturbances between different Developers.

Uploading a Tastic to Backstage Fill in Node Settings
Remember the path to your Node! You'll need this path to view the Page created later in your VM. For example: /Developers/Catherine.

4
Click Stream then Add Stream and select a Stream type from the dropdown if your Tastic requires it
For example, the Product List Tastic that was shown in the previous article ( Creating a Tastic) requires a Stream type of product-list so you'll need to select Product API Search.

Uploading a Tastic to Backstage Select Stream Type

Streams are created on Node level, because their data can be shared between multiple Tastics on the same Page in that Node.

5
Give your Stream a name and add any of the filters you'd like to
The Filter Preview gives you an idea of which products will be returned in that Stream.

Uploading a Tastic to Backstage Add Stream Configuration

6
Click the back arrow (as highlighted in the image above) and then Save the Node configuration
Uploading a Tastic to Backstage Save Node

You will then need to create a Page within your Node that'll contain your Tastic.

Create a Page

1
Select New on the top left of your screen again, but this time select Create Page, then input a Page Name, select a Layout and click Save
Uploading a Tastic to Backstage Create New Page

This will open the Editor.

2
Click the blue Add icon on any of the Regions (e.g. Main), select a Cell layout and your Tastic will be added to this Region on your page
Uploading a Tastic to Backstage Add Cells in Editor
3
Search for the name of the Tastic you've just created and drag it into your Cell
Uploading a Tastic to Backstage Add Tastic to Page GIF
4
The Tastic configuration will open on the right of your screen (click your Tastic Cell if it doesn't appear), it contains exactly the options that you defined in your Tastic Spec which you can adjust here, then save the page by clicking Save on the top right of your screen
Uploading a Tastic to Backstage Configuration Panel

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.

5
If you created your Page in a Draft state, you can release it by clicking the More button (three vertical dots) on the right of the Page name, then clicking Make Default
Uploading a Tastic to Backstage Publish Page

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: Environment Selector GIF

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

Next Article ›

Tastic Schema

Still need help? Contact Us Contact Us