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 repositoryGitHub customer repository - Where your code lives in GitHub for all your projects, you can have many project folders within your customer repository.
  • 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)

First, you need to clone the GitHub repository your Frontastic project code lives in. Then, to install the required package dependencies, you should run yarn 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 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.

The first setup is faster to get running, but you can't test changes to Frontastic extensionsextensions - Data connectors that you add specifically to your project.. 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 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, 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., 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 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. in the background.

You're now ready to get your IDE started to develop Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and extensionsextensions - Data connectors that you add specifically to your project..


Did this page help you?