Do you want to join our team? We're hiring!
  • Product
    • Features
    • Why Frontastic
    • Pricing
  • Partners
  • Use Cases
  • Documentation
  • Contact
  • Request a demo
  • Menu Menu
You are here: Home1 / For developers2 / Frontastic architecture: Developer tooling

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.

Frontastic architecture

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.

Portrait Catherine Jones

Catherine Jones

Catherine’s the Lead Editor at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related

operational efficiency as metric for headless commerce

Operational efficiency: The future metric for headless eCommerce platforms

Insights, Tech Talk
This blog post explores how operational efficiency will be the future metric for headless eCommerce platforms. If you've moved to headless or are planning towards headless transition then this article will serve as the best guide for you.
Read more
April 28, 2022
https://www.frontastic.cloud/wp-content/uploads/2021/07/Operational-efficiency-Li.jpg 1260 2400 Zoya Ruhe https://www.frontastic.cloud/wp-content/uploads/svg/frontastic-commercetools-logo-gradient.svg Zoya Ruhe2022-04-28 08:00:052022-04-12 13:53:28Operational efficiency: The future metric for headless eCommerce platforms

Business problems a headless frontend can solve

Insights
While eCommerce has grown over the years, there're still obstacles and challenges that companies face in their attempt to improve the online shopping experience. In the article, you will find some of the top issues that still cause difficulties and how you can solve them with a headless frontend.
Read more
April 12, 2022
https://www.frontastic.cloud/wp-content/uploads/2022/04/unsplash_gTs2w7bu3Qo-1.jpg 1260 2400 Zoya Ruhe https://www.frontastic.cloud/wp-content/uploads/svg/frontastic-commercetools-logo-gradient.svg Zoya Ruhe2022-04-12 08:00:042022-04-07 12:53:33Business problems a headless frontend can solve

Multichannel commerce and why technology matters

Insights
For more than 2 years now, remote work — be it hybrid or fully remote — has been part of everyday life in many companies. In this blog post, we want to talk about productivity in remote environments and share the experiences and tips of our team.
Read more
April 4, 2022
https://www.frontastic.cloud/wp-content/uploads/2022/03/Multichannel-strategy-1.jpg 1260 2400 Zoya Ruhe https://www.frontastic.cloud/wp-content/uploads/svg/frontastic-commercetools-logo-gradient.svg Zoya Ruhe2022-04-04 08:00:402022-03-14 11:52:51Multichannel commerce and why technology matters

Categories

  • Product and Functionalities
  • Company News
  • Tech Talk
  • Partnerships and Integrations
  • Insights
  • Remote Work
  • What others say

Product

  • Why Frontastic
  • Features
  • Product Tour
  • Use Cases
  • Pricing

Partners

  • Agencies
  • Tech partners

Resources

  • Blog
  • Documentation

Company

  • About us
  • Careers
  • Events

Contact

  • Contact sales
  • Support
  • LinkedIn
  • Facebook
  • Twitter
MACH Alliance Logo
Data privacy     Legal     ©2022 Frontastic
Scroll to top
  • Ready to innovate?

    Fill in the details below and we’ll find a personalized plan that works for you.

  • We store your name, your email address, and your message in our CRM ProsperWorks to ensure timely and reliable processing. Without your consent, we won't use your email address for newsletters or similar but to answer your request. We can also delete your data if you want us to. Just let us know!
    If you select this checkbox, we'll regularly send you news. You can unsubscribe at any time using the link in the newsletter.
  • Seeing is Believing

    Fill in the details below to take a personalized guided demo.

  • We store your name, your email address, and your message in our CRM Copper to ensure quick and reliable processing. The data transfer is encrypted. Without your consent, we won’t use your email address for newsletters or similar but just to answer your request. By clicking on “Request demo” you confirm that you’ve also read our data privacy terms and that you consent your data is processed as described.
  • We save your name and email to send you regular news. For this purpose, we use the service Mailchimp, to which we transfer your data. You can always unsubscribe from the newsletter using the link at the end of the newsletter.
  • Let’s get together

    Fill in the details below to join us on our mission to create extraordinary digital customer experiences.

  • We store your name, your email address, and your message in our CRM ProsperWorks to ensure timely and reliable processing. Without your consent, we won't use your email address for newsletters or similar but to answer your request. We can also delete your data if you want us to. Just let us know!
    If you select this checkbox, we'll regularly send you news. You can unsubscribe at any time using the link in the newsletter.