Using the Frontastic studio as a developer

Developers need to use the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. on a regular basis for multiple reasons. In this article, we'll run through the layout, what you can do, and other uses.

You can select the environment you're working in with the environment selector:

There are 3 environments:

Development — any changes made here will be visible when you're using a Frontastic sandbox
Staging — any changes made here will be visible when you're using the Frontastic CLI
Production — any changes made here will be visible on the live site

If you are working on more than 1 project, you can switch between projects using the project dropdown:

There are 2 main areas that you'll use as a developer: Components and Developer.

Components

This is where you can add, manage, and delete Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. for your project.

All components from all environments will show in this area.

See the components in the Frontastic studio article for more information.

Developer

Once you've clicked Developer within your Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., you'll find the below screen:

Each section is outlined below:

Schemas

Here you can manipulate basic settings regarding your project or page folder configuration.

To download the current configuration, click the download icon.
To upload a new version of your configuration, click the upload icon.

Each environment has its own schema, so you can have different settings for each environment if you wish.

See the Extend node schema and Managing project settings articles for more information.

Deployment

This is where you can execute a zero downtime deployment of a new version of your software, as well as a zero downtime rollback if anything goes wrong.

You can do a deployment from any environment setting in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

For more info, see the Deployment article.

Continuous Integration

Here, you can get an overview of your build-process regarding success, duration, or version which is running throughout the pipeline.

Below is the layout of the screen you'll see:

You'll see the same logs no matter which environment you're in.

For more info, see the Continuous Integration (CI) article.

Data profiling

This is where you can analyze your backend code regarding performance issues, bottlenecks, and more. If you click on this icon and your project has access to Tideways, it will automatically open your project data within Tideways.

Sandboxes

This is where you find your Frontastic sandboxes for development. You can find out more in the Bringing up a Frontastic sandbox and the Frontastic sandboxes in the Frontastic studio articles.

You can access all the same sandboxes in any environment selected.

Other areas

You'll also need to know how to use the site buildersite builder - An interface that you work with to build your commerce site. Previously known as `stage`. and page builderpage builder - An interface you work with to build your pages. for testing your newly created Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..

For testing, it's best to create a page folder called developers, and then create a sub-page folder with your name. That way, each developer has their own testing pages and you know not to make these live on your commerce site.

For more information on using the site buildersite builder - An interface that you work with to build your commerce site. Previously known as `stage`. and page builderpage builder - An interface you work with to build your pages., see the below articles: