Bringing up a Frontastic Machine
To work on the Backend-for-Frontend of your project, you'll need a Frontastic Machine and you'll also need to set up code synchronization.
Before we start
Firstly, make sure you've got your credentials to your Frontastic account.
Then, you'll need a local checkout of your Frontastic project on GitHub. This needs to be a fresh checkout, otherwise, you might run into issues.
And lastly, you need to make sure you have installed the Frontastic CLI.
Once you've done that, you're now ready to bring up a Frontastic Machine.
Bringing up a Frontastic Machine for the first time
masterbranch, then click Create
Your machine might take as long as 20 minutes to boot for the first time. You'll see the initial information but you won't have the SSH data included at this stage.
Note: The Branch is only used for initial provisioning and doesn't have any subsequent effects. You can safely switch branches while in filesync. We also don't use the branch for any subsequent boots.
Once finished, you can inspect essential details about your Frontastic Machine using the copy icon or use the eye icon to reveal the password:
This runs you through some questions that will then generate the appropriate configuration for you. For example:
Questions you'll be asked and what to answer when using a Frontastic Machine
Please enter the full path to the project root – you'll need to input where your project root is on your local machine, for example
On which project do you want to work? – you'll only be asked this question if you have multiple questions within your project root and you can select which one you want to use from the list
Will you use a Frontastic Machine or a staging server as remote for development? – You'll need to answer
Please enter the Frontastic Machine hostname – copy the Host from your newly created Frontastic Machine. If our new machine had the configuration like the image below, for this question we would enter
Do you want to compile changes to the frontend locally or should they be synced to the frontastic machine? – Select
Copy changes to the Frontastic Machine where webpack runs.
Do you want changes to the backend (PHP) be synced to the Frontastic Machine? – If you're only working on the frontend, select
Do not sync backend files, otherwise, select
Copy backend changes to the Frontastic Machine
Once you see that the settings have been written to the configuration file, you can now access the new machine by using SSH. For the hostname and password, you'll need to use what is in your Frontastic Machine configuration. If we continue with the previous example, our hostname is
my-new-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 will also be asked for your local password for sudo (we use this to allow for modification of
Then you can run
frontastic filesync to continuously synchronize your local changes to the Frontastic Machine.
You can also use
frontastic run if you want to have frontend development locally and backend code synchronized to remote.
Halting a Frontastic Machine
You can then Halt or Destroy your machine when you're done using it just by clicking the corresponding buttons:
If you halt it, you can bring it up again when you want to just by clicking the Bring up button:
Please note: You should regularly Destroy your machine and then create a new one. It's actually a good idea to destroy the machine when you finish work and create a new one the next day.
Running the frontend
To just run the frontend, please use Frontastic CLI as explained in this article.
Dependency management (Composer) with filesync
Synchronizing code between your localhost and the remote Frontastic Machine is a non-trivial task. To make it as simple and therefore resilient as possible we decided to synchronize one-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 Machine 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 are working with frontend code remotely, the procedure is the same using
‹ Back to article list