Managing project settings

Within 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`., you can access your project settings and make changes as you'd like to.

When you click Project on the dashboard for the 1st time, you'll notice that it's empty, like the below:

This is so you can adapt it easily to your needs and add the fields you want to be configurable for this particular environment and particular project. This can be SEO, basic authentication, default settings, or anything else you'd like to add to be easily changed by members of your team.

The below example shows a basic authentication where password protection can be added as well as some SEO fields:

Adding a project schema

To add your own fields so that your team can easily update certain project settings, you need to edit the project schema.

In this example, we'll set up our project for basic auth and SEO.

  1. Click Developer, then click Schemas
  1. Click the download icon on the project line, then open the file
  1. Add what you would like to be editable in your schema

In this example, we're adding a prefix and suffix for our page, as well as adding HTTP basic authentication

{
    "schema": [
        {
            "name": "Page",
              "fields": [
                {
                    "label": "Title Prefix",
                        "field": "frontasticPageTitlePrefix",
                        "type": "string",
                        "translatable": true,
                        "default": ""
                    },
                {
                    "label": "Title Suffix",
                        "field": "frontasticPageTitleSuffix",
                        "type": "string",
                        "translatable": true,
                        "default": " | Made with Frontastic"
                    }
            ]
        },
        {
            "name": "Basic Authentication",
              "fields": [
                    {
                        "label": "Username",
                        "field": "frontasticBasicAuthUsername",
                        "type": "string",
                        "translatable": false,
                        "default": "frontastic"
                    },
                    {
                        "label": "Password (leave empty to disable basic auth)",
                        "field": "frontasticBasicAuthPassword",
                        "type": "string",
                        "translatable": false,
                        "default": ""
                    },
                    {
                        "label": "Realm",
                        "field": "frontasticBasicAuthRealm",
                        "type": "string",
                        "translatable": false,
                        "default": "Access denied"
                    },
                    {
                        "label": "IP/IP-Range Whitelist",
                        "field": "frontasticBasicAuthIpWhitelist",
                        "type": "group",
                    "min": 0,
                        "fields": [{
                    "label": "IP/IP-Range",
                        "field": "ipRange",
                        "type": "string",
                        "translatable": false
                    }, 
                    {
                        "label": "Comment",
                        "field": "comment",
                        "type": "string",
                        "translatable": false
                }
              ]
          }
    ]
}

We're setting our default prefix as empty and the suffix as | Made with Frontastic so when a customer clicks on a page their tab would say | Made with Frontastic. For example:

  1. Click the upload icon on the project and select your updated schema

If you then go back to Project, you should now have your new fields. They'll also be available to anyone who has access to your project in 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`..

You can then access the configured values from the code in the context.

🚧

The project settings can be changed for each environment separately so if you would like the same settings on each environment, you'll need to add the same schema to each environment separately.

Access the data in the frontend

For example, if we look at the page suffix and prefix, we can use this data in the node/title.jsx file. You need to add them in as constants as we've written them in our project schema:

const TITLE_PREFIX_FIELD = 'frontasticPageTitlePrefix'
const TITLE_SUFFIX_FIELD = 'frontasticPageTitleSuffix'

Then you'll need to return them as a part of getTitle

getTitle = () => {
        const projectSchema = new ConfigurationSchema(
            this.props.context.projectConfigurationSchema,
            this.props.context.projectConfiguration)

        return this.getSchemaValue(projectSchema, TITLE_PREFIX_FIELD, DEFAULT_TITLE_PREFIX) +
            generateTitle(this.props.node, this.props.context) +
            this.getSchemaValue(projectSchema, TITLE_SUFFIX_FIELD, DEFAULT_TITLE_SUFFIX)
    }

So a full title.jsx file could look like the below:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { Helmet } from 'react-helmet'
import { ConfigurationSchema } from 'frontastic-common'

import ComponentInjector from '../app/injector'
import generateTitle from './generateTitle'
import getTranslation from '../getTranslation'

const TITLE_PREFIX_FIELD = 'frontasticPageTitlePrefix'
const TITLE_SUFFIX_FIELD = 'frontasticPageTitleSuffix'

/*
 * These defaults are only used if the corresponding fields are missing from the schema. If the fields are defined in
 * the schema, the defaults from the schema will be used.
 */
const DEFAULT_TITLE_PREFIX = ''
const DEFAULT_TITLE_SUFFIX = ' | Made with Frontastic'

class Title extends Component {
    getSchemaValue = (projectSchema, field, defaultValue) => {
        if (!projectSchema.has(field)) {
            return defaultValue
        }

        return getTranslation(
            projectSchema.get(field),
            this.props.context.locale,
            this.props.context.project.defaultLanguage
        ).text
    }

    getTitle = () => {
        const projectSchema = new ConfigurationSchema(
            this.props.context.projectConfigurationSchema,
            this.props.context.projectConfiguration)

        return this.getSchemaValue(projectSchema, TITLE_PREFIX_FIELD, DEFAULT_TITLE_PREFIX) +
            generateTitle(this.props.node, this.props.context) +
            this.getSchemaValue(projectSchema, TITLE_SUFFIX_FIELD, DEFAULT_TITLE_SUFFIX)
    }

    render () {
        return (<Helmet>
            <title>{this.getTitle()}</title>
        </Helmet>)
    }
}

Title.propTypes = {
    node: PropTypes.object.isRequired,
    context: PropTypes.object.isRequired,
}

Title.defaultProps = {}

export default ComponentInjector.return('Node.Meta.Title', Title)

You can update it as often as you'd like and adapt the fields to suit your project.


Read next
Did this page help you?