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.
You can also run
frontastic init --sandbox <your-sandbox-name>to make the set up quicker.
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 sandboxusing 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
Do you want to compile changes to the frontend locally or should they be synced to the Frontastic sandbox?
Copy changes to the Frontastic sandbox where webpack runsusing 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 sandboxusing 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
You'll also be asked for your local password for sudo (we use this to allow for modification of
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.
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
--mutagenConfig you can also use the shorthand flag
The Frontastic CLI regenerates the
.frontastic/mutagen.ymlif 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.
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:
- SSH into the Frontastic sandbox using
cdinto your project directory (for example,
- Run the corresponding composer command there (see getcomposer.org)
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
If you have any issues, see the filesync troubleshooting article for more information.
Updated over 1 year ago