project.yml

Each project has a project.yml within your config/ (<customer>_<project>/config/) folder and the Frontastic team takes care of any changes to your project setup here.

In this article, we'll look at what's in your project.yml and how you can access the data within your code.

In the project.yml

The below is what all projects should have in their project.yml and most of them are set when we create your first project. In most cases (unless mentioned in this documentation), you shouldn't need to update this file.

❗️

Be extremely careful with anything described as Frontastic internal. Changes to these settings might cause your application to break!

projectId: # your Frontastic internal project identifier
customer: # your Frontastic internal customer identifier, usually your company name
apiKey: # a shared key for Frontastic internal data communication
previewUrl: # Frontastic internal URL where your project is previewed
webpackPort: # Frontastic internal association of your project with a port number for webpack, don't change this!
ssrPort: # Frontastic internal association of your project with a port number for Server Side Rendering, don't change this!

configuration: # this section is where you configure your API providers, what they're used for, and how the Frontastic API hub accesses them. For example:
    account: # account API credentials, the structure depends on the chosen provider (engine)
        engine: commercetools
    commercetools:
        clientId: uniqueClientId
        clientSecret: uniqueClientSecret
        projectKey: uniqueProjectKey
    github: # Frontastic internal information on where your project code is stored
        url: "https://github.com/frontastic-developers/customer-demo"
    # ... much more ...

data: # additional configuration that's used by optional addon-components
    layout:
        breakpoints: # breakpoints globally to JavsScript and CSS — see read next section
        theme: # theme configuration for Frontastic starter components — see read next section

languages: # locales supported by your projects, must be strictly kept in sync with Frontastic studio
    - [email protected]
    - [email protected]
defaultLanguage: [email protected] # the default language of your project which is used as a fallback

endpoints: # Frontastic internal data synchronization settings, don't change!
    # Endpoint config

projectSpecific: # Frontastic internal synchronization settings
   # Data synchronization settings

❗️

Never change the webpackPort once its been defined.

You typically only apply changes to parts of the configuration or data keys.

🚧

If you change the project.yml

Whenever you do so, also send a reference to the corresponding commit on GitHub to our Support team so that we can bring our internal version of this file in sync with your changes.

If you need to store project-specific configuration that doesn't need to be changed by a non-technical user through Frontastic studio but needs to be accessible in code: Add a custom sub-key to the data key and store all relevant information there. In the next section, we'll show how you can access this data in code.

Accessing project configuration

In the frontend, you can use context to access all the information about your project, as well as the information within the project.yml (except for the secrets). You can use connect.context as a part of tastify to do this, see the Tastify article for more information.

On the server-side, you can get the project object directly, which represents the information from the project.yml. Simply configure it to be injected as a parameter to your service using the service.xml:

<argument type="service" id="Frontastic\Common\ReplicatorBundle\Domain\Project" />

If the Project isn't sufficient but you need the entire context, it's a little bit more complex. Because the context might not be fully determined in the early stages of code execution on the server.

So, you'll need to add the below to your service.xml to get the ContextService:

<argument type="service" id="Frontastic\Catwalk\ApiCoreBundle\Domain\ContextService" />

Then, you'll need to use the below in your in the PHP code:

$contextService->createContextFromRequest(…)

❗️

Don't use $contextService->getContext()! This method is deprecated and should never be used outside of console scripts.