Developing your site with Frontastic

❗️

Looking for our documentation for PHP? Use the dropdown on the navigation bar and select V1.1.

👍

Prerequisites

  • Node installed locally (version 14+)
  • Yarn installed locally (version 1.22+)
  • Frontastic CLI installed
  • Access to your GitHub customer repository
  • Access to your Frontastic studio (https://<customer>.frontastic.io)

First, you need to clone the GitHub repository your Frontastic project code lives in. Then, to install the required package dependencies, you should run frontastic install from the command line in the checkout root to get all required dependencies up and running.

Depending on which area of the project code you want to use, there are 2 slightly different setups:

  1. Development using staging as the backend
  2. Development using a Frontastic sandbox

The first setup is faster to get running, but you can't test changes to Frontastic extensions. If you need to work on those or test a newer version of them as deployed to your staging environment, you need to use the 2nd option (which is only a tiny bit more effort).

1. Development using staging as the backend

The easiest and fastest way to get development kickstarted with Frontastic is to use the staging environment of your project as the backend.

🚧

Select "Staging" in Frontastic studio

If you decide to use staging as your backend, you need to work in the Staging environment in Frontastic studio instead of the Development environment. Otherwise, you won't be able to see the corresponding data rendered.

Open a command line and switch to the root directory of your GitHub checkout. In there, run frontastic init. You'll be asked if you want to use the staging server or a sandbox. Choose the staging server. Then, you can perform frontastic run. Once finished, it'll tell you that you can look at your locally rendered Frontastic page on http://localhost:3000. You can now open your IDE and get coding.

To find your way around, we recommend reading Frontastic coding guide which also tells you where to put your code.

2. Development using a Frontastic sandbox

You might not want to use staging as a backend for your development.

For example, when:

  • You're working on Frontastic extension code
  • There's a newer Frontastic extension version available that's still under development (and not on staging yet), but you need it for your component work
  • You need to look into Frontastic extension 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, see the Frontastic sandboxes article. You'll need to run frontastic init again and select the sandbox option. The Frontastic CLI will then ask you for the hostname of your sandbox, which you can find in Frontastic studio, once the Frontastic sandbox has come up successfully.

When you now perform frontastic run, the Frontastic CLI won't only compile the Frontastic extension code for you but also upload the compiled version to your Frontastic sandbox in the background.

You're now ready to get your IDE started to develop Frontastic components and extensions.


Did this page help you?