Developing your site with Frontastic

For all development with Frontastic, you'll need:

  • Access to your GitHub customer repositoryGitHub customer repository - Where your code lives in GitHub for all your projects, you can have many project folders within your customer repository.
  • Homebrew installed locally
  • Yarn installed locally
  • Access to 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`. (https://<customer>.frontastic.io)

Then, depending on which area of the project code you want to use, there are different ways of approaching the code.

  1. Frontend development using staging
  2. Frontend development using a Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio.
  3. Backend development using a Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio.

1. Frontend development using staging

The easiest and fastest way for frontend development with Frontastic is to use the staging environment of your project as the backend. You'll need to install the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development..

Follow the instructions on the Frontastic CLI to get started with development in no time.

Once you've got the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. running, you can open the URL for your project locally and you'll be able to see the very 1st version of your site. Your URL should be <project>_<customer>.frontastic.io.local, for example, myfirstproject_bestcustomer.frontastic.io.local.

Then you can start developing locally on your preferred IDE. What you start with is totally up to you but it may be easiest to start with our starter componentsstarter components - Frontastic components that come with each Frontastic project can be copied into your own project to use. Known in code as `boost theme`. or creating a basic Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. See the Using Frontastic starter components and the Using Frontastic components for get started.

We recommend reading the below articles if you haven't already to get to know the folder structure and where you can put your code:
Codebase structure
Frontastic coding guide

2. Frontend development using a Frontastic sandbox

There are cases when you don't want to use staging as a backend for frontend development.

Examples for such cases are:

  • There's a new backend feature available that's still under development (and therefore not on staging, yet) but you need it for your frontend work
  • You need to look into backend logs or debug backend code while working on the frontend
  • You need to work on something brand new which isn't allowed to be exposed to the staging data set 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`.

In these cases, you can log into 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`. of your project and boot up a Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio.. To do this, follow the steps in the bringing up a Frontastic sandbox article. You'll then need to sync the code from your project repository, open your favorite IDE, and get coding.

3. Backend development (using a Frontastic sandbox)

If you need to work on the backend-for-frontend of your project, you'll also need a Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio. along with the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. for code synchronization. You can see how to do this in the below articles in the backend development section:


Did this page help you?