Hackathon and onboarding set up

If you've booked a hackathon session or you're getting ready for an onboarding session, you'll need to follow the steps below ahead of the session.

📘

If you have any issues during these steps, reply to the email you received from the host of your session.

Apart from the email from your host, you should've also received 2 invitation emails:

  • One for GitHub — https://github.com/frontastic-developers/<customer>-<name>
  • One for our Frontastic studio — https://<name>.frontastic.io

1. Create a Frontastic sandbox

  1. Click the link on the email from 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 set up a password
  2. Log in to the studio
  3. Click the Developer icon and then Sandboxes
  4. Click the blue add icon, input a name, and click create

When the status is Running, it's ready to use (this could take up to 10 minutes the first time). In the meantime, you can keep following the steps below.

To find out more about Frontastic sandboxes and how to use them, see the below articles:

2. Clone the GitHub repository

  1. Click the link in the email from GitHub

📘

If you don't have access, reply to the email you received from the host of your session.

  1. Clone the repository to your local (run git clone <your-repository>)

For more information on cloning a repository from GitHub, see their documentation:

3. Set up the Frontastic CLI

For macOS or Linux users:

  1. Install Homebrew
  2. Run brew tap frontasticgmbh/tap && brew install frontastic-cli
  3. Run brew install yarn

For Windows users

  1. Open the Frontastic CLI release page
  2. Download the latest package
  3. Extract the zip folder and move the frontastic.exe file and frontastic-cli-dependencies folder to the root of your repository (the one you cloned from GitHub)
  4. Install yarn for Windows

For more information, see the articles below:

Sync the Frontastic CLI with the Frontastic sandbox

  1. Go back 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 check the sandbox you created in step 1 has a status of Running
  1. Copy the hostname of your sandbox (click the copy icon next to the hostname in the Frontastic studio)
  1. Open a terminal in the root folder of your repository checkout (the one you cloned from GitHub)
  2. Run frontastic init --sandbox <paste your sandbox hostname from step 2>
    The Frontastic CLI will then ask you some questions, and you'll need to answer as below:
  • 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?
    Select Copy backend changes to the Frontastic sandbox using the up and down arrow keys and then press enter.

  1. Run frontastic run
    You might be asked for the password of your sandbox which you can find in the Frontastic studio (click the copy icon in the SSH-Password line then paste into your terminal).

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

Once the run has finished, you should see a dashboard like below:

For more information, see the articles below:

SSH into the sandbox

To SSH into the sandbox, run frontastic ssh in your terminal.

If the dashboard on your Frontastic CLI has minimal errors (you'll have 1 or 2 ahead of the session), you're now ready for the session!

If you have any issues, reply to the email you received from the host of your session.


Did this page help you?