Elixir Tutorial Part 5 (Plug and Cowboy)

Key Takeaways

hi guys welcome to extra tutorial part 5 my name is tensor from the tensor programming blog and today we're going to set up a simple web server using elixir we're going to be using a module called plug and a module called cowboy now plug is basically a specification that allows different frameworks to talk to different web servers inside of the Erlang virtual machine if you're familiar with Ruby for example plug is similar to rake so understanding plug is very important because when we get into the Phoenix framework or any other web framework on elixir really all of them are going to be using plug all right so let's set up our project we're going to say mix new and we're just going to call it log underscore ax so now let's open this up in sublime text so here's our project and let's clean this out we're going to use this criterion to add plug and kowboy to our dependencies here so both of them are version 1 all right so we've put plug in cowboy in our dependencies and we need to define them up here in our extra application to do that all we do is simply just put them in as atoms as you can see here so plug is our specification for handling routes and cowboy is our server you can think of plug is sort of a piece of code that takes a data structure more specifically that data structure is our connection and then transforms that data structure and then returns the data structure so in this case we are taking in a connection and the connection of course represents everything that comes with an HTTP request so all the plugs inside a plug receive and return connections and this makes them extremely composable so we can take multiple plugs and put them together alright so we're going to create a new file let's call it router DX and our module will be called pluggy X star router and inside of this we want to say use plug dot router and this will allow us to specifically use some of the functions inside of plug Li we want to say plug match plugs catch so match and despatch allows us to basically match our route then dispatch a piece of code back so for example you can think of this module as a pattern matching module so say we want to get a get request at the route route we put in get and then the route route and then we say do and in this case we're going to send a response back so we're going to use this function called send response we're going to put in the connection which is comm and the number that we want to send back so in this case a 200 so then we'll put in a string the way this is working is when we run our server it will look at the connection and it will match the route so if we're at the end at the route route it will automatically shoot back hello there so we can actually add another plug-in here say we want to match everything else let's make it a single line function it will send a response back and this will take in the connection and it will send back a 404 error not sound so you can think of these like pattern matching cases orders of course important if we were to put this above this then this would never run because this would always match first so let's set up our supervisor and then get our application running so inside of our children block here we need to define what we want so we're going to take plug adapters cowboy then we're going to use a function called child spec we're going to say that this is going to be an HTTP server and then we're going to put in our router so plug X router and we will put in the arguments so in this case no arguments and we need to put in the port the port here we want is 8,000 and there we go so this will run on port 8000 now we just need to set it up inside of our mix that exf so now we just need to set up our application to run automatically so we come in here we put in mod and then the application name that we want to run in this case plug dot e X and then of course we want to pass in an empty list so before we run this we need to get the dependencies so we can say mix do get get and compile this world both compile our dependencies and our application as well as getting the dependencies so now that our dependencies and our application are compiled we can run it so to run it we want to say Mick's run - tez no halt so we specified in here that we wanted lager to come back with app started when the application has started and as you can see here it says here app started so now if we go in here we can go localhost and say we're going to 8,000 right and this is the route and as you can see it shoots back hello there now if we put in any other route currently so say we put in example this will just go to a 404 error not sound we can put in anything really and it will automatically match it for us so say we want to now serve a piece of HTML in here we want to serve a piece of static HTML so we have to add a plug here and we want to add this plug after our match and dispatch so that our pattern matching here will continue to work so then we specify the module that we want so we're specifying plug dot static and we're saying this is going to happen at this route so at the home route and then we're going to say that the file is coming from the server so now we need to make another plug case for home all right so here's our route as you can see we get home we're going to put this after our index and then we need to modify our connections so that it's ready to get a piece of HTML so we're going to use this function get response content type and this will define the type as HTML and then we're going to send the file so instead of starting a response send the file and we're going to put in the connection and I put in 200 and then we're going to identify the file that we want to serve so in this case we put the index file that we want to serve inside of the web here so we just write live back slash index now this index file is actually our edit FPA that we compiled from Elm so this is actually an elm HTML file the reason why I put this in here is just to show you that we can serve really any piece of HTML that we want so let's rerun our program so now if we go to index it's the same as always but if we go to home as you can see here we're now in our reddit s.p.a this will work as it worked before and this will work as normal so as you can see I can just type in a subreddit I want to go to and it will fetch all this stuff so let's say you just had a bunch of HTML that you just wanted to serve maybe just a bunch of static HTML you can set it up like this very easily and just have a bunch of routes where you're serving static files from of course Phoenix allows us to do a lot of more dynamic things but this is mainly what we can do with plug and if we wanted to we could add dynamic things as well so for example if we want a dynamic route in here we could create one so we could say about and let's put in a variable so we're just going to call this user so if we get about it's going to match the next part of it with this variable and here we go so if we go to about we can send in the user name and then it will reply with hello username now let's rerun our program so now if we go a bell and say jack this will say hello jack so you can see how this could be interesting we could of course create different dynamic routes in here very easily with this so if we go back into our application so our main entry point here you notice that our port is sort of hard-coded in here if we go back into our mix TXS file it's kind of important to go in here and set up an environment so if we put a and V and then in here we want to specify this as the cowboy pork and we're just going to put in the port that we want in here so in this case we want point 8000 and then we can go back into our clog dot exe file and we can come up here above children we can create a port variable and we can match it with applications get environment inside of here we'll just put in plug ix so the name of the application then will put in cowboy pork and then a fallback port number so in this case 8,000 so we can replace this now which is port and all this work and if we wanted to change the port inside of the mixed ID XS we could do that and if the port failed then it would fall back to 8,000 automatically it's also worth noting that these get keywords just correspond with get requests in HTML so for example if we wanted to have a put request we could say put and then we could use the index for example and we could have a put request on here as well however I'd rather cover that when we get into Phoenix alright guys so I hope you enjoyed this quick tutorial on plug-in on cowboy if you enjoyed this video please feel free to subscribe and like if you have any questions or comments feel free to leave any in the comment section and if you dislike the video then go ahead and hit the download as much as you want I hope you guys have a good day