Frontastic CLI

Quick start guide to working with the Frontastic CLI and a staging server.

The Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. is the central entry point for frontend development with Frontastic. It's possible to run webpack, which prepares all frontend code, directly on your local machine and everything else in the cloud.

👍

Prerequisites

  • Homebrew installed locally for macOS or Linux
  • scoop installed locally for Windows
  • Node installed locally (version 14-16)
  • Yarn installed locally (version 1.22+)
  • Access to your company's GitHub project repositoryGitHub project repository - Where your code lives in GitHub for your company's projects. You can have 1 project folder within it, or you can have many project folders.
  • Access to your company's project 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`.
  • Your favorite IDE
  1. Clone your company's GitHub project repositoryGitHub project repository - Where your code lives in GitHub for your company's projects. You can have 1 project folder within it, or you can have many project folders. to your local machine
  2. Open a shell in the root folder of that repository and run yarn install
  3. Run the below command 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
  1. Run frontastic init
    You'll be asked some questions to set up your configuration. To get started quickly, you can 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? - We're using a staging server in this example so we'll select Staging server
  1. Run frontastic run
    Once you see the dashboard (example below) and everything has been set up successfully, you're ready to start creating your commerce site.

Commands and hotkeys

Commands
Use the tabs below to see the different commands for the Frontastic CLI:

brew tap frontasticgmbh/tap && brew upgrade frontastic-cli
frontastic run

// It may ask you for your `sudo` password, this is needed as the CLI updates your `/etc/hosts` file and that needs superuser rights.
frontastic help
frontastic init
frontastic init --sandbox <your-sandbox-name>
frontastic ssh
frontastic xdebug
frontastic pull

//Manually trigger replication of changes made in the studio to the sandbox. This is the same as opening a SSH connection to the sandbox and calling paas/replicator/bin/pull there.
frontastic install

We're always making improvements to the CLI. We recommend you run the update version command at least once a week. You can also visit our Frontastic CLI changelog to see the latest updates.

Flags
frontastic --version - The version flag outputs the version number of the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. that you're using
frontastic [command] --help - Use the help flag on any command to get information on what that command does

Hotkeys
When you run frontastic run, you'll see our dashboard.

Here, you can see the current status of the processes it's running as you're using the CLI, so you can easily see when a process stops working or a connection is lost.

The error section will highlight the number of unread errors for Next.js, backend build, and sandbox. To see the error, you can use the hotkeys to go to the window where the error is occurring to find out more information. When you go back to the dashboard, the unread errors will be reset.

The startup checks section shows you the initial setup of the CLI processes.

When you're on the dashboard, you can use the below hotkeys:
d – dashboard
n – Next.js error log
b - backend build log
f - filesync issues
s - sandbox log
p - filesync pause
t – opens your test URL in a browser
ctrl-c – Exits the CLI (if using Windows, you might need to type exit instead)

When you're in the logs, you can use the below hotkeys to navigate through the logs:
h or left arrow – move left
l or right arrow – move right
j or down arrow – move down
k or up arrow – move up
g or home – moves to the top of the page
G or end – moves to the bottom of the page
ctrl-f or page down – moves down 1 page
ctrl-b or page up – moves up 1 page
ctrl-l – saves the current log window to CSV file
ctrl-m - add a marker to the end of the log to make identifying new messages easier

In the sandbox log view (s), you can filter messages by a search term (press / and type the term) or by regular expression (press r and type the regular expression, an invalid or incomplete expression will turn red). Messages from our internal API hub are filtered out by default. To change that, press a. To see additional details for the selected log message, press Enter.


Did this page help you?