Elm front-end for Rust API (Part 1)

Key Takeaways

hey guys welcome back to our Elm rust dual project API series my name is tensor today we're going to start looking at how we can build out a front-end in the Elm programming language for our rust API to get started we want to create an app directory inside of this we want to create another directory called Elm and another directory called Jas our um directory will have all of our Elm project files inside of it and our Jas directory will have a small JavaScript file that we will use to link to the HTML that we are serving over our REST API let's build that piece first so first we want to create an app dot J's file inside of our JavaScript folder and inside of this file we want to import from Elm main so in our Elm folder we're gonna have a module called main and that's what we're doing here we're importing the actual elm code into our JavaScript then we want to use document query selector to get our elm container which we're gonna add to our public index dot HTML file and we're gonna have an if block if we have an elm div then we want to take our Elm and embed it in our alt div inside of our index that HTML we want to replace it with a div with an ID of elm container that way we can actually grab this did with our query selector from the app dodge a s and we also want to reference a script that will be in our JavaScript folder inside of this public folder so the basic concept is that we will be able to embed our Elm application into this piece of HTML and then serve it on our rust server we want to open up our command line inside of our app folder and run the npm init command to generate our package.json file I'll call our package name API and I'll leave all this other stuff as default for now this will generate a basic package JSON file now I'm going to use the package manager called yarn to add these dependencies to our dev dependencies in our package JSON so I'm going to get auto reload brunch babble brunch brunch clean CSS brunch CSS brunch umm elm brunch no damn compiler and ugly Phi J s brunch so the reason why I'm using yarn instead of NPM in this case is because it's simply faster okay so now I have all the dependencies if you want to do this thing with NPM you use NPM install - save - dev so this is equivalent to doing yarn ad - - dev okay so now that we have brunch we want to build a brunch configuration file and this file will be called brunch - config jsh is what is going to allow us to compile our elm and our JavaScript modules and then package them all into one file which we can then reference with our HTML first we want to export the config module we'll set up our files field this will have our Java scripts so we're going to join JSF KS and then for our style sheets we want to join to CSS app dot CSS and this is just in case we had any style sheets now this application will not have any style sheets outside of the Elm styling so you could remove this block if you'd wanted to then we want to add in our conventions and our assets and this will be for any static files we want to get them out of a static folder and then we have our paths we want to point to where we want to watch our paths specifically that we want to watch our JavaScript folder and our elm folder so these are the two that you really want to focus on the jas and the elm and then our other path our output path will be in dot dot backslash public which is this folder here now this is the most important part of this file so we set up our plugins we want to set up Babel and then we want to set up elm brunch so we put in our elm folder which is just called elm our main module will be called main elm and then we want to put in the output folder which is dot dot jf we also want to make sure that we auto require our j-s back slash app digest and this configuration is all that we really need to do to compile our javascript in our elm and then package it into a JS file inside of our public j/s and then serve it with our HTML inside of our package JSON file we want our main file to be this brunch - config dot J's file and then we want to add three different scripts into our scripts area so we have a start script this will run brunch build then it will run CD dot and then it will run cargo run this will compile our elm and our JavaScript and then it will go into the folder where our rust project resides and run cargo to launch the server alright so now that we have all of that finished we want to actually go into our app Elm folder and we want to install a few album packages to get our elm modules set up specifically we want to get the core libraries and we want to install elm Lang back slash HTTP this will come back and say I would like to add the following dependency and we want to hit Y which is yes and then it will also tell us that it's installing core HTML HTTP and virtual gum and we want to hit yes for that as well and then it will download all of it and put it into our our elm package JSON and now we can create our main Dom file we want to start this out by exposing the main module and then we want to import HTML HTML attributes HTML events HTTP Jason decode as JSON and JSON encode as in code the HTML package will allow us to create HTML elements as well as access the entry point function our HTML attributes will allow us to add attributes to our HTML HTML events will allow us to manipulate the events on our HTML elements our HTTP library will allow us to make different HTTP requests like get hosts delete etc and then our JSON libraries will help us encode and decode our JSON respectively we want to first set up a type alias for our book type this will have our title which will be a string our author which will also be a string and our published which will be a boolean then we want to set up our model for now we're just going to have a books field which will have a list of books we just want this books field so that we'll be able to get our books from our JSON and then put them inside of our model then we want to create an initialization function we're just going to set up our model with an empty list and then we're gonna pass back command none for our message Union type we want to have two types right now the first one is a get books type which has a results a HTTP error and a list of book type and then we have a request books type this will be the message that we use to connect our button to our get request and then the get books type will be the message that we use to actually fire off that get request next we want to write our update function this will take in a message and a model and output model and command message and then it will run case message of soy powder matching up message and for our get brookes message we'll have two different cases one where we get back in okay and we get back jason and the other one where we get back an error and an error and then our request books message will have one single case for our first get books case we just want to set the field inside of our models called books equal to our json then for our error case we just want to call debug log and then to string on the error itself and we want to pass back our model and command nun our request brooks message will just pass back the model as it is and then it will run a function called get books which will be a command type and here's our get books function we have get books which is a command message and this function just takes a let binding and it binds our URL which is localhost 8080 i version 1 books and then the request that we want which is HTTP GET URL and then another function called decode books which will allow us to decode our json and then we put this into an HTTP dot send with yet books the get books message here and then our request our decode books function is fairly basic this just returns a json decoder with list a book inside of it and we decode our books by con jason pets and if you remember what our jason looks like we have a result and then we have a big list of our books after it so we want to read the jason after that result we call jason dot list on book decoder which is another function our book decoder function will just return a jason decoder of type book and we'll just call jason map three so we want to map three different fields inside of our json into our book type and we call Jason at on title author and published and then we specify the types that we want back for title we're getting a string so we want a string for author we're also getting a string and then for published we're getting a boolean so we want a boolean alright so this is all the logic that we actually need to just create a simple get request and then decode our JSON now we just need to create a view so that we can see the jason that we've decoded and order it inside of our HTML file our view will take in on model and it will out an HTML message our basic view skeleton will be a div with a div inside of it in which we map a book view function with our model books inside of it and then we'll have a button which on click will call our request books message and this button will just have text that says get books our book View function will just take in a book and it will output HTML and a message and then our book view will just be an unordered list with a bunch of list items inside of it and each list item will have one in the fields of our book so the first one will have a book title the second one will have booked out author and then the third one will take our book top published will pipe it into the to string function and then we'll pipe it into our text function and this is because book table published is a boolean and not a string to actually finish up this application we just need to set up our subscriptions function this will just take in our model and output a subscription message and because we have no subscriptions in this application we're just going to pass back sub none and then our main function will call HTML dot program we're puttin in it for init update for update view for view and subscriptions for subscriptions if we go back into our projects rust API app folder we can now run NPM start and this should compile our Elm application and then go into our rust application and run the server you can see here that it compiled our Elm to j/s back slash main dot Jas and then it compiled 66 files and put them into a pas and then it launched rocket on localhost 8080 you can see here that now we have this app dot J's file and it's fairly large because it has all of our Elm as well as all the modules that we downloaded compiled inside of it if we go to localhost 8080 bit so we have our Pale Fire book and then we have gravity's rainbow and both of these are being pulled from our API alright guys well I hope you enjoyed this tutorial in the next tutorial we're actually at our post request or at our delete request and we'll add our update request to our Elm application if you enjoyed this tutorial feel free to subscribe and like if you have any questions or comments feel free to leave them in the box below and if you dislike this video then by all means download it as much as you like have a good night