Frontastic sandboxes

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

👍

Prerequisites

  • Homebrew installed locally
  • 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 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`. and click Developer

  1. Click Sandboxes
  1. Click the blue add icon
  1. Input a Label (must only contain lowercase letters, numbers, and dashes)
  1. Input the Branch which has the desired backend features you want to work on (it'll default to your master branch if left empty)

📘

The Add public DNS option is automatically selected. You can't disable this.

  1. Select a region where you want the sandbox to be hosted
  1. Click Create

Your sandbox will then be brought up. This can take up to 10 minutes. Once ready, it'll have the status of Running.

See the using Frontastic sandboxes in the Frontastic studio article for more information.

  1. Run the below command to install the latest version of the Frontastic CLI
brew tap frontasticgmbh/tap && brew install frontastic-cli

🚧

If you're using Windows, you'll need to download the latest package from the Frontastic CLI release page. Once downloaded, you'll need to extract the zip folder and move the frontastic.exe file and frontastic-cli-dependencies folder to the root of your repository.

  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 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.
  • Are you using a Frontastic sandbox or a staging server for development? - We're using a sandbox so we'll select Frontastic sandbox
  • Enter the hostname of your Frontastic sandbox - Go to 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`. and copy the Host from your newly created Frontastic sandbox by clicking the copy icon and paste it into the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development.

👍

You can also run frontastic init --sandbox <your-sandbox-name> to make the setup quicker.

  1. Run frontastic install
    To install the required node modules for the project to run.

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


Did this page help you?