Giter Club home page Giter Club logo

flagsmith-frontend's Introduction

Feature Flag, Remote Config and A/B Testing platform, Flagsmith

Stars Docker Pulls Docker Image Size Join the Discord chat Coverage Built with Depot

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service. Use our hosted API, deploy to your own private cloud, or run on-premise.

Flagsmith

Flagsmith makes it easy to create and manage features flags across web, mobile, and server side applications. Just wrap a section of code with a flag, and then use Flagsmith to toggle that feature on or off for different environments, users or user segments.

Get up and running in less than a minute:

curl -o docker-compose.yml https://raw.githubusercontent.com/Flagsmith/flagsmith/main/docker-compose.yml
docker-compose -f docker-compose.yml up

The application will bootstrap an admin user, organisation, and project for you. You'll find a link to set your password in your Compose logs:

Superuser "[email protected]" created successfully.
Please go to the following page and choose a password: https://localhost:8000/password-reset/confirm/.../...

Flagsmith Screenshot

Features

  • Feature flags. Release features with confidence through phased roll-outs.
  • Remote config. Easily toggle individual features on and off, and make changes without deploying new code.
  • A/B and Multivariate Testing. Use segments to run A/B and multivariate tests on new features. With segments, you can also introduce beta programs to get early user feedback.
  • Organization Management. Organizations, projects, and roles for team members help keep your deployment organized.
  • Integrations. Easily enhance Flagsmith with your favourite tools.

Trying Flagsmith

Flagsmith hosted SaaS

You can try our hosted version for free at https://flagsmith.com/

Flagsmith Open Source

The Flagsmith API is built using Python 3, Django 2, and DjangoRestFramework 3. You can try the application out using:

We also have options for deploying to AWS, GCP, Azure and On-Premise. If you need help getting up and running, please get in touch!

Overview

This repository is formed of 2 core components, the REST API (found in /api) and the web-based administrator dashboard (found in /frontend) that you can use to manage Flagsmith. Technical documentation for each component can be found at the API and Frontend pages within our Documentation

These two components run as separate applications. The web-based dashboard is a single page app that communicates via REST calls to the API.

Resources

flagsmith-frontend's People

Contributors

amammay avatar andymoffatt avatar brookemitchell avatar dabeeeenster avatar dependabot[bot] avatar granjow avatar javlund avatar kyle-ssg avatar lukefanning avatar matthewelwell avatar niall-quinn avatar nitz14 avatar sahanar11 avatar twstuart avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

flagsmith-frontend's Issues

Self hosted frontend still try to connect api.bullet-train.io/api/v1/flags/

Hi bullet-train developers, it is a great project.

I am try to run bullet-train-api and bullet-train-frontend locally, and I edited the file env/project_dev.js api to my local server in bullet-train-frontend and run it using npm run dev.

Most of the functions seem working fine, except I found it keep calling https://api.bullet-train.io/api/v1/flags/ to retrieve feature flags. May I know which part of the config I am missing, so that it can get the flags from my local server?

Support run in docker

As today more and more services offer dockerized deployment we would like to have this ability also in the frontend server.

Support for serving in subdirectory/path

Currently, we are implementing flagsmith behind a gateway in a k8s cluster. For the frontend specifically, we have set the ASSET_URL to the appropriate path. E.g. http://localhost:4200/flags-admin/

In the webpack config, using url.resolve(), this ultimately translates to http://localhost:4200/flags-admin/static/

However, there are several issues when doing this. For example, the app attempts to load images and fonts at /images/ and /fonts/. This is easily resolved by adding matching routes to the gateway proxy.

The main issue is that the app is rewriting the browser history, under the assumption that it lives at the root of the domain, and typical user behavior causes it to fail (such as refreshing a page, etc). Additionally, accessing the primary login screen is also a challenge. The app will not render the login screen despite all requests coming back 200. You can "trick" the app to render the screen by setting t cookie with a bad value, or by navigating to any of the paths defined here. This will force the app to render the screen and add a redirect query param. This however does not resolve the usability issue as the app could easily fail should a user manually refresh or click a bookmarked link, etc.

It would make the most sense to refactor the routing system to respect the ASSET_URL across the codebase. This would
then allow support for "/" as easily as "/custom-path".

Node version in Docker image

Hi guys, is there a reason you're using the "regular" 300+ MB node Docker image instead of the ~36 MB node alpine image? Otherwise I think that would be a better choice. And perhaps upgrade to node 12 or 13 at the same time.

I'd love to make a PR if you want me to.

Using production instructions in Dockerfile doesn't work

Hi,

In the Dockerfile it is instructed to use
RUN npm ci --only=production
instead of
RUN npm install
if we are building for production.

When I do this (API in project_prod.js configured to be a local deployment of the API service) I get the following error:

> [email protected] dev /usr/src/app
> cross-env npm run env && node_modules/.bin/nodemon --watch server --ignore server/config/config.json --watch webpack --exec node ./server


> [email protected] env /usr/src/app
> node ./bin/env.js

Using project_dev.js
sh: 1: node_modules/.bin/nodemon: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] dev: `cross-env npm run env && node_modules/.bin/nodemon --watch server --ignore server/config/config.json --watch webpack --exec node ./server`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-11-05T20_45_49_276Z-debug.log

Split Bullet Train web page from feature management panel

At the moment, this repository contains both the official Bulet Train web site and the feature management panel.

I suggest to split the repository into two separate projects, web page and feature panel, for several reasons.

  • Logical separation: The official appearance of the project and management of the features are not influenced by each other.
  • Self-hosting only needs the feature management panel but no YouTube video, Pricing, Project Description, …
  • Side effects: Introducing a bug in the panel code could bring down the whole web site
  • etc. (I think I do not need to elaborate more because it is probably clear anyway)

In the same run, the API keys from production config files can be moved to environment variables, for example. No commits required anymore when an API key changes. And they are not public anymore …

What is your opinion on that? And is this possible in near future?

Feature Request: Audit log for a specific feature flag

Currently, there is audit log capability - which can all logs across feature flags.
Also, there is a search box, which can help filter audit logs for a specific feature flag.

But, it would be nice to have audit logs accessible against each feature flag, for easy access. This can help debug issues - to see when and who enabled a specific feature flag.

image

Running behind reverse proxy with path rewrite

I tried to run the frontend behind a reverse proxy with some URL prefix.
Routes being served kind of like this:

  • /flagsmith/ui/ to the flagsmith frontend address
  • /flagsmith/api/ to the flagsmith api address
  • /something/else/ to somewhere else

The prefix is always trimmed in the request to the actual backend.

Unfortunately, this causes problems for the frontend. For example, in the page HTML, there are references to images starting with /images/... which tells the browser to query /images/... instead of /flagsmith/ui/images, which fails.

I could not find instructions to set a certain base url or base path to use, like some projects do.
Is there anything that I missed? Maybe serving flagsmith on its own domain a better idea either way?

Show description in features list page

Value proposition

As a Bullet Train user, I want to see descriptions in the feature list so that I can gain more context around what the feature flag represents

Context

We use the Jira ticket ID as the feature name so we can automate our feature addition/removal flow (webhooks are fired when stories are transitioned into development and transitioned into feature flag removed states).

We use the description to add a link to the ticket itself, so Jira can be our source of truth for all feature flag work. It's a small hassle to click on each feature when we want to gain access to the link.

make integration with google analitycs optional

frontend breaks and does not start if the GOOGLE_SERVICE_ACCOUNT integration code is not provided.

It only worked after commenting on the bullet-train-api / src / analytics / query.py integration in the get_events_for_organisation method and forcing return 0

I suggest making integration with google analitycs optional.

use docker multistage build for building frontend

when building the frontend the build process installs npm packages, which comes with the chromium for testing, resulting in a 491 mb image, I suggest using the build process to generate static files and use the nginx or apache image that will be reduced in size and optimized for production use

for that purpose I also suggest using multistage build which would also optimize the build phase.

see: https://docs.docker.com/develop/develop-images/multistage-build/

Demo app - Problem when trying to disable a feature override for specific user

Hi folks! First of all, thank you for this product! My team is evaluating using Bullet Train as our main feature flagging/rollout tool.

We loved all we saw so far, only one thing we found out was when trying to disable a specific feature flag override, when we click in the toggle option, the feature flag modal just closes.

We tested on the demo app, so, if you want to try it out, here's the link: https://app.bullet-train.io/project/1016/environment/E6Mf24wZHMVwPr5Rqtnh9M/users/879489#

(don't know if it expires).

Also, here goes a gif showing what I mean:

Gif showing the problem

In this GIF (in specific user settings screen):

  1. Open feature details inside user screen
  2. Go to "Identity Overrides" setting
  3. Try to click on toggle to disable override
  4. The modal just closes

Don't know if it helps, but I've seen the following error on my console:

TypeError: e.props.router is undefined CreateFlag.js:270:52
    onClick CreateFlag.js:270
    React 14
    Sn self-hosted:920
    a helpers.ts:77
    (Async: EventListener.handleEvent)
    wrapEventTarget trycatch.ts:123
    React 15
    <anonymous> main.js:64
    a helpers.ts:77
    (Async: setTimeout handler)
    wrapTimeFunction trycatch.ts:32
    <anonymous> main.js:50
    <anonymous> main.js:44
    Webpack 3

Thank you!

Cannot update a feature

Steps to reproduce

  1. Open a feature for editing
  2. Change the description (or any field, potentially)
  3. Attempt to update the feature

Expected behaviour

The feature is updated.

Actual behaviour

The POST request to /api/v1/projects/{projectId}/features/{featureId}/ results in the following 400 response:

{"project":["This field is required."]}

Self hosting error: Uncaught ReferenceError: Loader is not defined

I'm trying to setup and configure a standalone instance of this to run on Heroku and am running into some issues that I can't seem to resolve. I've done my best to configure everything the way the README says to, but when I try to run it in my browser, I get the following error:

Uncaught ReferenceError: Loader is not defined
    at Object.<anonymous> (AppLoader.js:12)
    at n (bootstrap:19)
    at Object.<anonymous> (AccountProvider.js:3)
    at n (bootstrap:19)
    at Object.<anonymous> (project-components.js:20)
    at Object.<anonymous> (project-components.js:94)
    at n (bootstrap:19)
    at Object.<anonymous> (main.js:4)
    at n (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

image

We have an instance of the API running and it seems to be working as expected, and I've setup the following environment variables on Heroku as well:

API_URL = https://features-api.theartofeducation.edu/api/v1/
ASSET_URL = /static/

Any ideas what I'm missing or what I need to do differently?

Feature Request : Add categories for features

We currently get around this missing feature by defining convention like:

  • show_new_grid_a
  • show_new_grid_b
  • show_new_grid_c

Would be nice to put them all in a category for quick visualization

  • New_grid_transition
    • show_new_grid_a
    • show_new_grid_b
    • show_new_grid_c

But it would be nice to be able to create category to quickly see without doing a search.

I don't think category should be something related to the API, it should only be used for classification help.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.