Developing your site with Frontastic

For all development with Frontastic, you'll need:

Access to your GitHub customer repository
Homebrew installed locally
Yarn installed locally
Access to your Frontastic studio (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.

Frontend development using staging
Frontend development using a Frontastic sandbox
Backend development using a Frontastic sandbox

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

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

Once you've got the Frontastic CLI 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 components or creating a basic Frontastic component. 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 studio

In these cases, you can log into the Frontastic studio of your project and boot up a Frontastic sandbox. 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 sandbox along with the Frontastic CLI for code synchronization. You can see how to do this in the below articles in the backend development section: