Configuration webapplication: manifest.json

manifest.json

src/manifest.json is the application’s configuration file, inside the src folder. It has the folowing structure:

{
    "port": 3001,
    "socketServer": {
        "enabled": true,
        "port": 4001,
        "proxy-port": 4002
    },
    "debug": false,
    "gracefullyShutDown": 10,
    "pageNotFoundView": "not-found",
    "showOffline": false,
    "showEnvironment": false,
    "ddos-prevention": {
        "enabled": true,
        "maxItemsOnPage": 150,
        "testmode": false,
        "silent": true,
        "silentStart": true
    },
    "metatags": [
        {
            "name": "keywords",
            "content": "webpage"
        }
    ],
    "links": [
    ],
    "app-authentication": {
        "enabled": false,
        "onlySsl": true,
        "session-cookie": false,
        "ttl-sec": 1800,
        "loginView": "login",
        "strategies": [
            {
                "strategy": "general",
                "loginView": "login"
            },
            {
                "strategy": "general2",
                "validateFunc": "src/authentication/validate"
            }
        ]
    },
    "cookies": {
        "body-data-attr": {
            "enabled": true,
            "onlySsl": false,
            "ttl-sec": 31536000
        },
        "not-exposed": {
            "enabled": true,
            "onlySsl": false,
            "ttl-sec": 31536000
        },
        "props": {
            "enabled": true,
            "onlySsl": false,
            "ttl-sec": 31536000
        }
    },
    "client-props": {
    },
    "url-loader-limit": "1",
    "external-modules": [
        {
            "module": "react",
            "ref": "React",
            "file": "react/dist/react.min.js"
        },
        {
            "module": "react-dom",
            "ref": "ReactDOM",
            "file": "react-dom/dist/react-dom.min.js"
        },
        {
            "module": "react-dom/server",
            "ref": "ReactDOMServer",
            "file": "react-dom/dist/react-dom-server.min.js"
        }
    ],
    "static-components-dir": [
    ],
    "cdn": {
        "enabled": false,
        "cleanupPrevious": false,
        "url": "",
        "apiVersion": "",
        "accessKeyId": "",
        "secretAccessKey": "",
        "bucket": ""
    },
    "babel-polyfill": true,
    "service-workers": {
        "enabled": true,
        "cacheAuthenticatedCode": true
    },
    "inline-pagecss": true,
    "page-description": "my awesome page",
    "google-analytics": "",
    "meta-viewport": {
        "desktop": "width=device-width, initial-scale=1.0",
        "phone": "user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui",
        "tablet": "user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui"
    },
    "languages": {
        "en": "default"
    },
    "databases": {
        "db1": {
            "host": "xxx.xxx.xxx.xxx",
            "port": "3306",
            "database": "db1",
            "user": "my_username",
            "password": "my_password"
        }
    },
    "environments": {
        "local": {
            "device": "",
            "socketServer": {
                "port": 4001,
                "proxy-port": 4001
            },
            "service-workers": {
                "enabled": false
            },
            "app-authentication": {
                "onlySsl": false
            },
            "cookies": {
                "body-data-attr": {
                    "onlySsl": false
                },
                "not-exposed": {
                    "onlySsl": false
                },
                "props": {
                    "onlySsl": false
                }
            },
            "external-modules": [
                {
                    "module": "react",
                    "ref": "React",
                    "file": "react/dist/react.js"
                },
                {
                    "module": "react-dom",
                    "ref": "ReactDOM",
                    "file": "react-dom/dist/react-dom.js"
                },
                {
                    "module": "react-dom/server",
                    "ref": "ReactDOMServer",
                    "file": "react-dom/dist/react-dom-server.js"
                }
            ]
        },
        "test": {
            "socketServer": {
                "port": 4001,
                "proxy-port": 4001
            },
            "service-workers": {
                "enabled": false
            },
            "app-authentication": {
                "onlySsl": false
            },
            "cookies": {
                "body-data-attr": {
                    "onlySsl": false
                },
                "not-exposed": {
                    "onlySsl": false
                },
                "props": {
                    "onlySsl": false
                }
            }
        },
        "development": {
            "debug": true,
            "service-workers": {
                "enabled": true
            },
            "external-modules": [
                {
                    "module": "react",
                    "ref": "React",
                    "file": "react/dist/react.js"
                },
                {
                    "module": "react-dom",
                    "ref": "ReactDOM",
                    "file": "react-dom/dist/react-dom.js"
                },
                {
                    "module": "react-dom/server",
                    "ref": "ReactDOMServer",
                    "file": "react-dom/dist/react-dom-server.js"
                }
            ]
        }
    }
}

Explanation properties

  • port --> the port on which the webapp will be started
  • url-loader-limit --> limit where required url-images will be created as inline images (to decrease requests). See webpack/url-loader. When set to 0, all images will be created inline.
  • debug --> whether debugging is on or off (console messages)
  • inlinecss --> whether the css should be inline (recomended), or with an external file
  • page-description --> the description inside the html-head
  • google-analytics --> when set, this id will be used to update google-analytics
  • cookies[‘body-data-attr’] --> cookies that will appear as body[data-cookiename="cookievalue"] which is very handy for serverside rendering client specific properties like zoom-factor
  • cookies[‘not-exposed’] --> cookies that the server can read, but will not be part of this.props
  • cookies.props --> cookies that will be part of this.props as: this.props.__appProps.cookies
  • languages --> the languages this application is using. Only languages set to true are activated and **there should always be one default language
  • client-props --> any props defined here, will be available at the client through this.props.__appProps.clientConfig
  • databases --> to specify access to your databases. This is just plain data without functionality by itsa-server itself. However, if you include database-modules, then they should retrieve their data from this entry-point.
  • external-modules --> modules that appear as a separate download in the header (link or script). You can refer to any module inside node_modules, or define one yourself inside the special externals folder
    ** pageNotFoundView** --> the view that should be rendered when the visitor visits a non-existing page
  • service-workers --> completely automatic service workers
  • ddos-prevention --> to prevent overload from ddos. Make sure you don’t set maxItemsOnPage to small, or it will block regular users from downloading content
  • cdn --> settings voor CDN, optimized for AWS-S3. In case of a different CDN, the root-files cdn-deploy and cdn-cleanup should be adjusted
  • environments --> to specify different environments.
OFFLINE