Open sourcing our feature toggle API and UI

---

In our previous post we released our toggle library and showed how to use it in your PHP project, but our goal was to toggle features without the need for a deploy. To accomplish this we created an API with an AngularJS frontend. In this blogpost we’ll show you how the API works and how we use it in combination with the AngularJS frontend.

So how does this API work? Actually pretty simple because we added a (de)serializer to our toggle library. By posting a toggle in JSON to the API it deserializes it and stores it in Redis with a configured prefix.

Getting it to run

After you cloned the repository and ran composer install to install the dependencies, you point your web server to the web directory. In this post we will just use PHP's internal web server.

$ php -S 127.0.0.1:8000 -t web

Now, let's create our first toggle! A toggle that lets specific users see our new feature called 'search_beta'. A curl request for creating that feature looks like this:

$ curl -XPUT 127.0.0.1:8000/toggles/search_beta -d '{
  "name" : "search_beta",
  "status" : "conditionally-active",
  "conditions" : [
     {
        "name" : "operator-condition",
        "key" : "user_id",
        "operator" : {
           "name" : "in-set",
           "values" : [42, 1337]
        }
     }
  ]
}'

Hooray! We created our first toggle. You can retrieve the available toggles by a simple GET on /toggles.

Adding a frontend

Although some people enjoy writing curl commands all day, we wanted to make it even easier by adding a frontend. The frontend shows all the toggles, allowing you to adjust toggles and create new toggles.

Above example shows the toggle we created via curl, with a single condition. You can change the toggle status to always active or disabled, add or remove conditions or delete the whole toggle. Creating new toggles is possible with the ADD Toggle button.

For a list of all possible operators, check our previous post.

Installation

After you cloned the repository, you need to create your config file:

$ cp app/js/config.js.dist app/js/config.js
# Configure your endpoint URL (in this example: 127.0.0.1:8000)
$ vim app/js/config.js

Point your webserver to the app directory to expose the frontend.

The app uses XHR to communicate with the API. Therefor you need to make sure the API allows requests from that origin. By default only requests from 127.0.0.1 are allowed. If you expose the frontend on 127.0.0.1:80, it should work out of the box, otherwise you should configure the origin in the API configuration.

Check out the code at github.com/qandidate-labs/qandidate-toggle-api and github.com/qandidate-labs/qandidate-toggle-ui.