Developing your site
Prerequisites
- Node installed locally (version 14+)
- Yarn installed locally (version 1.22+)
- CLI installed
- Access to your GitHub customer repository
- Access to your studio (
https://<customer>.frontastic.io)
First, you need to clone the GitHub repository your project code lives in. Then, to install the required package dependencies, you should run frontastic install from the command line in the checkout root to get all required dependencies up and running.
Depending on which area of the project code you want to use, there are 2 slightly different setups:
- Development using staging as the backend
- Development using a sandbox
The first setup is faster to get running, but you can't test changes to extensions. If you need to work on those or test a newer version of them as deployed to your staging environment, you need to use the 2nd option (which is only a tiny bit more effort).
1. Development using staging as the backend
The easiest and fastest way to get development kickstarted is to use the staging environment of your project as the backend.
If you decide to use staging as your backend, you need to work in the Staging environment in studio instead of the Development environment. Otherwise, you won't be able to see the corresponding data rendered.
Open a command line and switch to the root directory of your GitHub checkout. In there, run frontastic init. You'll be asked if you want to use the staging server or a sandbox. Choose the staging server. Then, you can perform frontastic run. Once finished, it'll tell you that you can look at your locally rendered page on http://localhost:3000. You can now open your IDE and get coding.
To find your way around, we recommend reading coding guide which also tells you where to put your code.
2. Development using a sandbox
You might not want to use staging as a backend for your development.
For example, when:
- You're working on extension code
- There's a newer extension version available that's still under development (and not on staging yet), but you need it for your component work
- You need to look into extension logs or debug backend code while working on the frontend
- You need to work on something brand new which isn't allowed to be exposed to the staging data set in the studio
In these cases, you can log into the studio of your project and boot up a sandbox. To do this, see the sandboxes article. You'll need to run frontastic init again and select the sandbox option. The CLI will then ask you for the hostname of your sandbox, which you can find in studio, once the sandbox has come up successfully.
When you now perform frontastic run, the CLI won't only compile the extension code for you but also upload the compiled version to your sandbox in the background.
You're now ready to get your IDE started to develop Frontend components and extensions.