Project configuration

The Project configuration area of the Frontastic Editor looks like the below:

Empty project configuration

The default configuration is empty so you can add your own schema so that anyone who has access to your project can easily update certain settings. For example, the below setting allows for basic authentication and SEO information:

Project configuration option examples

To add your own schema, you'll need to follow the steps below:

1
Click Developer, then click Schema
Click Developer then click Schemas
2
Click the download icon on the Project Configuration line then open the file
Download project configuration schema
3
Add what you would like to be editable in your schema. In this example, we're adding a prefix and suffix for your page, as well as adding HTTP basic authentication to your configuration:
{
     "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
            	 }
	     ]
	 }
     ]
}

As our default for a prefix is empty and the suffix is " | Made with Frontastic" when a website user clicks on a page their tab would say [node name] | Made with Frontastic. For example:

Project configuration prefix and suffix exampole

4
Click the upload icon on the Project Configuration line and select your updated schema
Click upload and select project configuration schema

If you then go back to the Project Configuration area, you should now have your new fields. They will also be available to anyone who has access to your project in the Editor.

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

Please note, that the project configuration can be changed for each environment separately so if you would like the same settings on each environment, you will 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 Configuration schema:

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

Then you 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)

‹ Back to article list


Still need help? Contact us Contact us