Developing with Frontastic

In this guide, you'll learn about the Frontastic developer tooling and set up your project for development.

👍

Prerequisites

The following should be installed locally:

  • Homebrew for macOS or Linux
  • scoop for Windows
  • Node (version 14-16)
  • Yarn (version 1.22+)

Developer tooling

Frontastic provides developers with essential tooling to help them with the development and deployment.

These are two of the essential tool for developers:

  • Frontastic CLI is our commandline interface that you can use for development. You can read the Frontastic CLI quick start guide to learn about it in details.
  • Frontastic sandbox is a virtual machine hosted in the cloud that you can provision from the developer area of the Frontastic studio and use for developing extensions. Read the Frontastic sandbox article to learn more about using them.

Install Frontastic CLI

The Frontastic CLI is the central entry point for Frontastic development. It's possible to run Webpack, which prepares all frontend code directly on your machine and everything else in the cloud.

Run the command below to install the latest version of the Frontastic CLI

brew tap frontasticgmbh/tap && brew install frontastic-cli
scoop bucket add FrontasticGmbH_scoop-bucket https://github.com/FrontasticGmbH/scoop-bucket
scoop install frontastic-cli

Configure the project

Run frontastic init to initialize your project you'll be asked some questions to set up your configuration. Use the arrow keys on your keyboard to choose the desired option.

To get started quickly, use the answers below:

  • Which project do you want to work on? — this will only appear if you have more than 1 project in your folder.
  • Are you using a Frontastic sandbox or a staging server for development? — Choose the staging server to start with.

Install project dependencies

Run frontastic install to install all the dependencies for your projects. The Frontastic CLI installs all the dependencies in the respective folders.

🚧

Do not run yarn install at the root of the repository as it'll not install dependencies in the sub-directories.

Start the project

Run frontastic run to start the project and open http://localhost:3000 in your browser. You should see the default home page as shown below

🎉 You have successfully set up the project locally. You can start the development now.

Start the development


Did this page help you?