Frontastic architecture: Developer tooling

Frontastic is made up of 4 parts: the API hub, developer tooling, the Frontastic studio, and frontend delivery. Each gives you all the tools you need to build amazing commerce sites.

In this blog series, we’ll look at each part of the architecture, how it works, and what you can do with it.

In this article, we’ll be looking at developer tooling.

What are developer tools?

Developer tools can be anything that developers use to develop their commerce site. A lot of people think that all a developer needs is an Integrated Development Environment (IDE), but there’s so much more than that. With Frontastic, we provide all the tools needed (apart from an IDE) to build a commerce site.

Frontastic developer tooling

The developer tools we provide as part of our Composable Frontend Platform cover a wide range of areas. Let’s take a look at each individually.

Frontastic CLI

The Frontastic CLI is your shortcut to frontend development. All you need is your IDE, Yarn, Homebrew, and access to our studio and a GitHub project repository (both of which you’ll get with Frontastic). Then you can download our CLI and start coding using our staging server. We’ve kept the number of commands low, so it’s super simple to use. We also have a dashboard that shows you all the up-to-date information about your staging environment, just in case something goes wrong. You can even download the logs to send them to our Support team if you’re unable to debug the issue yourself.

Sometimes, you don’t want to work against a staging environment, and in these cases, you can use the Frontastic CLI with a Frontastic sandbox.

Frontastic sandboxes

A Frontastic sandbox is a cloud machine that you can bring up at a click of a button in the Frontastic studio. You can then use it in conjunction with the Frontastic CLI to develop features not yet on staging, debug backend code, or develop extensions to the API hub. The Frontastic CLI is responsible for syncing all the code between the 2 so you don’t have to worry about that.

We also provide a public DNS feature, so when you create a sandbox and do your development, you can share the URL with anyone on your team, and they can access your work in progress without deploying or merging to master.

Deployment pipeline

Our deployment pipeline lets developers deploy their changes with confidence. Every project comes with Continuous Integration, so you can merge to master, tests are automatically run, you can then check on staging, and you can deploy to production when you’re ready from the Frontastic studio. If there’s an issue, you can click the rollback button to revert to the previous build version. We also ensure that there’s no downtime for any customers, they can continuously access your commerce site, and you don’t have to worry about hot replacements in the load balancers.

Frontastic starter components

At the heart of Frontastic are Frontastic components. Each part of your commerce site can be split into a Frontastic component, like a hero image, a product carousel, a newsletter sign-up, and so on. A Frontastic component is made up of a JSON schema and a JSX file in your GitHub project repository. The JSON schema is also added to the Frontastic studio so that business users can use it to build any page on a commerce site.

Frontastic starter components can kickstart your development. You can access both the JSON and JSX files and copy them into your project to use on your commerce site. We have components for the most common commerce use cases, like product listings, details pages, cart, and checkout to save you time.

Conclusion

The developer tooling that Frontastic provides, helps developers to get coding quickly, deploy with confidence, and know that everything is working as it should (unless they make a mistake in their code 😉). With the right tools, commerce teams can build the incredible.

If you’re interested in finding out more about our architecture, see our documentation at docs.frontastic.cloud.