Project: Flagsmith (Observability and Analysis / Feature Flagging)
File: locally-frontend.md

sidebar_label: Frontend title: Flagsmith Frontend sidebar_position: 20 These instructions will get you a copy of the project front end up and running on your local machine for development and testing purposes. See running in production for notes on how to deploy the project on a live system. What things you need to install the software and how to install them. Installing nvm and their bash script will ensure developers are on the same NodeJS version. | Location | Suggested Version | | -- | :: | | <a href="https://nodejs.org/en/">NodeJS</a> | >= 16.0.0 | | <a href="https://nodejs.org/en/">npm</a> | >= 8.0.0 | | <a href="https://github.com/nvm-sh/nvm#installing-and-updating">nvm</a> | >= 0.39.0 | | <a href="https://github.com/nvm-sh/nvm#zsh">nvm zshrc setup</a> | n/a | ```bash cd frontend npm i ``` Hot reloading for client / server ```bash cd frontend npm run dev ``` You can deploy this application on and without making any changes, other than the API URL in '/frontend/env/project_prod.js' Bundles, minifies and cache busts the project to a build folder and runs node in production. This can be used as part of your deployment script. ```bash cd frontend npm run bundle npm start ``` Variables that differ per environment are exported globally to `window.Project in` 'frontend/common/project.js', this file gets replaced by a project.js located in 'frontend/env' by webpack based on what is set to the "ENV" environment variable (e.g. ENV=prod). You can override each variable individually or add more by editing 'frontend/bin/env.js'. Current variables used between 'frontend/environment.js' and 'frontend/common/project.js': `FLAGSMITHAPIURL`: The API to hit for requests. E.g. `https://edge.api.flagsmith.com/api/v1/` `FLAGSMITHONFLAGSMITHAPIKEY`: The flagsmith environment key we use to manage features - . `FLAGSMITHONFLAGSMITHAPIURL`: The API URL which the flagsmith client should communicate with. Flagsmith runs on flagsmith. E.g. `https://edge.api.flagsmith.com/api/v1/`. If you are self hosting and using your own Flagsmith instance to manage its own features, you would generally point this to the same domain name as your own Flagsmith instance. `DISABLEANALYTICSFEATURES`: Disables any in-app analytics-related features: API Usage charts, flag analytics. E.g. `DISABLEANALYTICSFEATURES=1`. `ENABLEFLAGEVALUATION_ANALYTICS`: Determines if the flagsmith sdk should send usage analytics, if you want to enable Flag Analytics, set this. E.g.

`PROXYAPIURL`: Proxies the API via this application. Set this to the hostname of the API being proxied. Proxies `/api/v1/` through to `PROXYAPIURL`. If you are using this, any setting to `FLAGSMITHAPIURL` will be ignored and the browser will use the front end node server to send API requests. Do not prepend `api/v1/` - it will be added automatically. `GOOGLEANALYTICSAPI_KEY`: Google Analytics key to track API usage. `CRISPWEBSITEID`: Crisp Chat widget Website key. `FIRSTPROMOTERID`: First Promoter ID for checkout affiliates. `ALLOWSIGNUPS`: **DEPRECATED in favour of PREVENTSIGNUP Determines whether to prevent manual signups without invites. Set it to any value to allow signups. `PREVENT_SIGNUP`: Determines whether to prevent manual signups without invites. Set it to any value to prevent signups. `PREVENTFORGOTPASSWORD`: Determines whether to prevent forgot password functionality, useful for LDAP/SAML. Set it to any value to prevent forgot password functionality. `ENABLEMAINTENANCEMODE`: Puts the site into maintenance mode. Set it to any value to enable maintenance. `AMPLITUDEAPIKEY`: The Amplitude key to use for behaviour tracking. `MIXPANELAPIKEY`: Mixpanel analytics key to use for behaviour tracking. `SENTRYAPIKEY`: Sentry key for error reporting. `ALBACROSSCLIENTID`: Albacross client ID key for behaviour tracking. `STATICASSETCDN_URL`: Used for replacing local static paths with a cdn, .e.g https://cdn.flagsmith.com. Defaults to `/`, i.e. no CDN. `BASE_URL`: Used for specifying a base url path that's ignored during routing if serving from a subdirectory. `USESECURECOOKIES`: Enable / disable the use of secure cookies. If deploying the FE in a private network without a domain / SSL cert, disable secure cookies to ensure that session token is persisted. Default: true. `COOKIESAMESITE`: Define the value of the samesite attribute for the session token cookie set by the frontend. Further reading on this value is available . Default: 'none'. This project uses for automated end to end testing with Chromedriver. ```bash npm test ``` React Webpack Node We use Flagsmith to manage features we rollout, if you are using your own Flagsmith environment (i.e. by editing project_x.js-> flagsmith) then you will need to have a replica of our flags. A list of the flags and remote config we're currently using in production can be .