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

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 localcomputer/frontastic/project

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 Frontastic Machine

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 my-new-machine-demo.frontastic.dev

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  /etc/hosts.

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

Next steps

Commands

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:

1. SSH into the Frontastic Machine using ssh vagrant@<your-machine-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 are working with frontend code remotely, the procedure is the same using yarn.

Next article ›

Where to put your code