{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/ftw-env/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"FTW Environment configuration variables","slug":"ftw-env","updated":"2021-01-21T00:00:00.000Z","category":"ftw-configuration","ingress":"Reference documentation for environment variables in Flex Template for Web (FTW).","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following configuration variables can be set to control the Flex\ntemplate app behaviour. Most of them have defaults that work for a\ndevelopment environment. For production deploys most should be set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"variables","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#variables","ariaLabel":"variables permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Variables"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_MAPBOX_ACCESS_TOKEN"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-set-up-mapbox-for-ftw/"},"children":[{"type":"text","value":"How to set up Mapbox for FTW"}]},{"type":"text","value":"\nguide for more information."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_GOOGLE_MAPS_API_KEY"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-use-google-maps-in-ftw/"},"children":[{"type":"text","value":"How to use Google Maps in FTW"}]},{"type":"text","value":"\nguide for more information."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_SHARETRIBE_SDK_CLIENT_ID"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Your application's client ID. You can get this from\n"},{"type":"element","tagName":"a","properties":{"href":"https://flex-console.sharetribe.com/applications","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Flex Console"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SHARETRIBE_SDK_CLIENT_SECRET"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Your application's client secret. It's related to client ID and used\nfor privileged transitions from server side. You can get this from\n"},{"type":"element","tagName":"a","properties":{"href":"https://flex-console.sharetribe.com/applications","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Flex Console"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_STRIPE_PUBLISHABLE_KEY"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Stripe publishable API key for generating tokens with Stripe API. Use\ntest key (prefix "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pk_test_"}]},{"type":"text","value":") for development. The secret key needs to\nbe added to Flex Console."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The currency used in the Marketplace as ISO 4217 currency code. For\nexample: USD, EUR, CAD, AUD, etc."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_CANONICAL_ROOT_URL"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Canonical root url of the marketplace. Needed for social media\nsharing, SEO optimization, and social logins. Note, that the value\nshould not include a trailing slash."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"NODE_ENV"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Node env. Use 'development' for development and 'production' for\nproduction."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"PORT"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Port for server to accept connections."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_ENV"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A more fine grained env definition than NODE_ENV. Is used for example\nto differentiate envs in logging."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_SHARETRIBE_USING_SSL"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Redirect HTTP to HTTPS?"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SERVER_SHARETRIBE_TRUST_PROXY"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set when running the app behind a reverse proxy, e.g. in Heroku or\nRender."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_SENTRY_DSN"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-set-up-sentry/"},"children":[{"type":"text","value":"How to set up Sentry to log errors in FTW"}]},{"type":"text","value":"\nguide for more information."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_CSP"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-set-up-csp-for-ftw/"},"children":[{"type":"text","value":"How to set up Content Security Policy (CSP) for FTW"}]},{"type":"text","value":"\nguide for more information."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"BASIC_AUTH_USERNAME"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set to enable HTTP Basic Auth."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"BASIC_AUTH_PASSWORD"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set to enable HTTP Basic Auth."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_GOOGLE_ANALYTICS_ID"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-set-up-analytics-for-ftw/"},"children":[{"type":"text","value":"How to set up Analytics for FTW"}]},{"type":"text","value":"\nguide for more information."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_AVAILABILITY_ENABLED"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Enables availability calendar for listings."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_DEFAULT_SEARCHES_ENABLED"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Enables default search suggestions in location autocomplete search\ninput."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_SHARETRIBE_SDK_BASE_URL"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The base url to access the Sharetribe Flex Marketplace API. FTW uses\nthe correct one by default so no need to set this."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_FACEBOOK_APP_ID"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"App ID of a Facebook App when Facebook login is used."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"FACEBOOK_APP_SECRET"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"App secret of a Facebook App when Facebook login is used."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NOTE"}]},{"type":"text","value":": FTW templates are built on top of Create React App (CRA).\nCRA uses WebpackDevServer for providing Hot Module Reloading feature.\nIn some environments, WebpackDevServer might need some extra\nconfigurations. You should also check CRA's advanced configurations if\nyou experience problems with socket ports.\n"},{"type":"element","tagName":"a","properties":{"href":"https://create-react-app.dev/docs/advanced-configuration","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://create-react-app.dev/docs/advanced-configuration"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"defining-configuration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#defining-configuration","ariaLabel":"defining configuration permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Defining configuration"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the app is started locally with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yarn run dev"}]},{"type":"text","value":" or\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yarn run dev-server"}]},{"type":"text","value":", you can set environment variables by using the\n(gitignored) "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. You can edit the basic variables via\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yarn run config"}]},{"type":"text","value":" or by editing directly the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. Some variables\ncan be edited only in the .env file. The repository contains a template\nfile "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".env-template"}]},{"type":"text","value":" with default configuration."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In production, it's recommended that you set the configuration via env\nvariables and do not deploy an "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. The client application will\nonly be packaged with env variables that start with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP"}]},{"type":"text","value":". This\nway server secrets don't end up in client bundles."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"With deploys note that the configuration options are bundled in the\nclient package at build time."}]},{"type":"text","value":" The configuration of the build\nenvironment must match run environment for things to work consistently.\nTo apply changes to configuration values client bundle must be rebuilt.\nJust restarting the server is not enough."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Variables","depth":2},{"value":"Defining configuration","depth":2}]}},"pageContext":{"slug":"ftw-env","category":"ftw-configuration"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}