Frontastic CLI and Frontastic sandbox

Once you're Frontastic sandbox is running (see the bringing up a Frontastic sandbox article for how to do this), you can open the root folder of your project checkout, and then run the command frontastic init (make sure you've got the latest version of the Frontastic CLI installed). The Frontastic CLI will then take you through some questions to generate the appropriate configuration for you.

👍

Tip

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

For example:

When you're using the Frontastic CLI with a Frontastic sandbox, you'll need to set up the configuration like below:

• Which project do you want to work on?
  You'll only be asked this question if you have multiple projects within your project root. Select which one you want to work on using the up and down arrow keys and then press enter.

• Are you using a Frontastic sandbox or a staging server for development?
  Here, you'll need to select Frontastic sandbox using the up and down arrow keys and then press enter.

• Enter the hostname of your Frontastic sandbox
  Go to the Frontastic studio and copy the Host from your newly created Frontastic sandbox. For example, if our new sandbox had the configuration like the image below, for this question we would click the copy icon on the Host line or enter sanjas-machine-demo.frontastic.dev.

• Do you want to compile changes to the frontend locally or should they be synced to the Frontastic sandbox?
  Select Copy changes to the Frontastic sandbox where webpack runs using the up and down arrow keys and then press enter.

• Do you want to sync backend (PHP) changes to the Frontastic sandbox?
  If you're only working on the frontend, select Don't sync backend files, otherwise, select Copy backend changes to the Frontastic sandbox using the up and down arrow keys and then press enter.

Once you see that the settings have been written to the configuration file, you can now access the new sandbox by using SSH. For the hostname and password, you'll need to use what is in your Frontastic sandbox configuration. If we continue with the previous example, our hostname is sanjas-machine-demo.frontastic.dev and we would copy the SSH-Password using the copy icon:

If you prefer, you can use your browser by looking up hostnames in /etc/hosts.

You'll also be asked for your local password for sudo (we use this to allow for modification of /etc/hosts).

You then need to set up file synchronization. To do this, run the command frontastic run. This will continuously synchronize your local changes to the Frontastic sandbox as well as having frontend development locally and backend code synchronized to remote.

After you've run frontastic run, you'll see a dashboard in the Frontastic CLI. This will keep you updated on the status of the filesync:

The dashboard will update if the CLI finds any errors with filesync:

You can then press f to see the list of issues. You can use the filesync troubleshooting article to find out more information and how to fix the error.

Custom filesync config

If you need to modify how files are synchronized between your local machine and a Frontastic sandbox, you can provide your own Mutagen configuration instead of the one generated by Frontastic CLI.

You can find the Mutagen configuration file format in the Mutagen documentation.

Instead of writing your own configuration file from scratch, you can modify the configuration file generated by the Frontastic CLI. To access the file, you'll need to run the Frontastic CLI with the activated file synchronization once and then you'll find the generated configuration at .frontastic/mutagen.yml. Copy this file, for example to custom-mutagen.yml, and make the changes you want to.

To use the modified configuration, start the Frontastic CLI with the --mutagenConfig flag, passing the path to the configuration file, for example:

frontastic run --mutagenConfig ./custom-mutagen.yml

Instead of --mutagenConfig you can also use the shorthand flag -m.

🚧

The Frontastic CLI regenerates the .frontastic/mutagen.yml if you change the configuration of the Frontastic CLI. This won't be done with your custom configuration. You'll have to modify it yourself, for example, if you change the hostname of your sandbox.

​

Dependency management (Composer) with filesync

To make synchronizing code between your localhost and the remote Frontastic sandbox as simple (and therefore resilient as possible) we decided to synchronize 1-way as much as possible. Therefore, dependencies must be managed on the remote host.

To install or remove PHP packages do the following:

1. SSH into the Frontastic sandbox using ssh [email protected]<your-sandbox-host>
2. cd into your project directory (for example, cd demo_english)
3. Run the corresponding composer command there (see getcomposer.org)

The composer.json and composer.lock files will then be synchronized downstream to your code checkout so that you can commit any changes.

If you're working with frontend code remotely, the procedure is the same using yarn.

If you have any issues, see the filesync troubleshooting article for more information.