Managing project settings

Within the Frontastic studio, 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.

Click Developer

Click Schemas

Select Project schema, this opens the right-hand drawer

Click Edit schema, this opens the schema builder

Add what you'd 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, copy the below schema and paste into your schema editor if you want to follow this example.

{
    "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:

Click Validate to ensure your JSON has no errors

Click Publish to save your changes

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 studio.

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'd like the same settings on each environment, you'll need to add the same settings to each environment in the studio.

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.