Part 7. Writing your first Webserver to expose the key-value store to the web — Elixir/OTP

Photo by NASA on Unsplash

This is the final part of the 7 part series. Please read the previous articles to catch up on the topic.

Till the previous article, we have completed everything in our list to make our key-value store application robust, scalable and fault-tolerant. Now the only thing that is remaining is to expose the app to the world of the web by using a webserver.

Writing a webserver in Elixir is so easy that you would only have to add one file to your system and since every module is decoupled you would not need to do anything differently.

In this post, we would also learn about some other dependencies that we would need to spin up a webserver.

Let’s get started 🏎️

First, create a mix project by typing

mix new ex7_keyval_on_web

This command should create your project structure like this

folder structure

Delete all the files in the lib folder and create a file with name web.ex. Also, copy the other files from the 6th exercise into the lib folder i.e. manager. ex, server.ex, database.ex,app.ex, registry.ex, db_worker.ex and store.ex.

Before beginning with the exercise you would need to add these two functions into your mix.exs file and type a command for the app to download the dependencies.

dependencies and startup block

We are using two dependencies here.

1. jason : It is used to convert the request body that we are receiving to a Map data structure.
2. plug_cowboy : It is a web server that provides Elixir all the essentials tools to deal with request-response using friendly APIs.

Type in the command below to get the dependencies installed.

mix deps.get

Show me some code 👨‍💻

Now here comes the main file where you will be handling all the request and response stuff of your app.

Remember all you need here in the app is to expose functionality such that you need not have to change your key-value store app. The web part should be only an extension of your existing app. So you would need to only map the key-value store functionality to a request route on your webserver.

web.ex

The above two images show the web.ex file that is all the code for our webserver.

The first 7 lines are just function calls that are doing the setup of the server. The first line is setting up some basic routing mechanism for the webserver.

Each Plug.Router has a plug pipeline, defined by Plug.Builder, and by default it requires two plugs: :match and :dispatch. :match is responsible for finding a matching route which is then forwarded to :dispatch. This means users can easily hook into the router mechanism and add behaviour before a match, before dispatch, or after both.

Handling request data can be done through the Plug.Parsers plug. It provides support for parsing URL-encoded, form-data, and JSON data as well as providing a behaviour that others parsers can adopt.

For all our 4 functionalities(create_store, get, put, del) we have created 4 different routes.

Each route receives a conn variable containing a Plug.Conn struct and it needs to return a connection, as per the Plug spec. A catch-all match is recommended to be defined as in the example above, otherwise routing fails with a function clause error.

In the route function body what we are doing is that we are mapping the post body of the request to our data structures and then we are forwarding the extracted data to the key-value store app that we created in the 6th exercise. And whatever response we are receiving from the server we are giving it back as a response to the request we received thereby completing the request-response cycle.

In the end, we have specified what would be the scheme of our web server and at what port we would like it to run on.

Now as we know that our web server is also a process it should be run under a supervisor. So we will put it under our system supervisor like this.

system.ex

This completes our whole exercise code for the webserver to work.

The final run 📟

To start the whole system, we first initiate an elixir session
by typing

iex -S mix

Now open any app or interface from where you can make a post request and try out by sending the post request to our server.

creating a store

putting value in the store

get value from the store

As you can see that all our requests were fulfilled by the webserver without any hassle.

So this is how you set up a simple webserver in Elixir.

I hope this post has helped you get a little bit better understanding of the whole process.

The complete source code of all the parts is here.

In the 🔚

Finally, the series is over and if you have been following it I am sure you would have learned a lot from it. In these series of articles, I have tried to put out all that I have learned about Elixir in the form of simple examples.

Elixir has a lot to offer to developers. It is a complete paradigm shift in the way we think of approaching a program. I find the code simpler and self-explanatory. Also, the ecosystem built around Erlang offers the developer to think more about the problem statement rather than the tooling that he has to maintain when the codebase increases.

All in all, I loved the language and it was fun learning something new and completely different language which was out of my comfort zone.

References 📝

1. Elixir in Action. 2nd Edition.
2. GenServer behaviour docs.