Using the Frontastic studio as a developer

Developers need to use the Frontastic studio 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 components 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 studio, 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.

Click on one of the schema names to open the right-hand drawer.

Then click Edit schema to make changes to open the schema editor and adapt to your needs.

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 studio.

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 builder and page builder for testing your newly created Frontastic components.

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 builder and page builder, see the below articles: