Sapper Tutorial #7 - Server Routes

Key Takeaways

all right then so normally when we're working with data in a website we'd have api endpoints to interact with that data for example we have a dummy job site right here so we'd have job data and then we'd also have an api endpoint to get that job data so we'd have an api endpoint to add data want to edit it want to create new data etc so typically the api endpoint urls would look something like this we might have an endpoint which is forward slash jobs and that would be to handle a get request to get all of the job data we might also have an end point which is again forward slash jobs but this time the server would respond to post requests to that endpoint and that would be to add a new job to the data we might also have a get request handler to forward slash jobs forward slash id where id is a changeable route parameter and that could be for example one two three and that would be to get a single job based on the id so if this was one two three we would look on the server for a job with the id of one two three and send that back and the data would be sent back to the front end in json format so for example if we wanted to send a request from the front end to the server route endpoint to get all of the jobs we would use a fetch request to mysite.com forward slash jobs which is this one right here the server route would handle that request and send back the json data that we need so the way we create server routes in supper is just by creating javascript files inside our routes folder then inside those we export functions which run on the server when requests are sent to them so let's have a try at setting up a server route in our application so then i want to create some server routes for the jobs right here and we're going to be grabbing the data from this index file right here so what i'm going to do is create a new file and remember to create server routes we just create javascript files now i'm going to call this index dot js now the way sapper works if i was now to send a request to forward slash jobs then this would react to that because remember index is for the root level of whatever folder we're in now there is a problem with this because if we're sending a request to forward slash jobs then this right here this is also a get request to get the actual page data and now these two kind of conflict because we have one for server routes and we also have one for just getting the page so the way to combat this is to rename this to index.json so dot json.js and now the request would be to forward slash jobs dot json all right i hope that makes sense so now what i could do is send a request here to forward slash jobs dot json and that would trigger this server route right here now the way we handle the request to the server route is by exporting different functions inside this file so i could for example say export function and we use specially named functions now if i want to respond to a get request which is what this is we want to send a get request ultimately to get some job data then i use a method or function rather called get and when we send this request sapper is going to look for the get handler on this server file on the server route and it's going to fire this get handler now inside this get handler we can pass in a few different arguments the first one is the request object second is the response and third is next so if you've ever used node and express before then this is very much like that this represents the request object and it has information about the request which we'll use later on this is the response object and it's what we use to send a response to the user and this is the next function which we call if we want to ever go to the next bit of middleware in the stack so we're primarily going to be using these things right here so say i want to send a response which is a json string of all of the jobs well i can do that by saying response which is the response object we get right here and then use a method called end so dot end that ends the response and it sends something back to the user and we can send the json data back here inside this method now we don't have any data yet so let me first of all create some data in a separate file so ultimately if you're creating an application you would probably reach out to a database and grab that data but i don't want to over complicate things at the minute so what i'm going to do is just store all of the data on the server itself now i'm going to create a new file and i'm going to call this data dot js so it's a javascript file not a json file or anything like that and i'm just going to paste in some data in a minute but before i do that there is a problem with this this right here is also creating now a server route and that server out is forward slash jobs forward slash data now i don't want this to be a route i just want this to be a javascript file which is going to store some data for me so remember if we don't want something to be a route we can place an underscore in front of it so i can rename this to underscore data.javascript and now this is not going to be used as a server route so what i'm going to do first of all before i paste in the data is i'm going to install a package called lorem ipsum and that's just going to help me generate some lorem ipsum for the different documents i'm using or for the different objects inside the data i'm going to use so let me open up a new terminal and i'm going to say npm install and it's just called lorem hyphen ipsum like so and this allows us to basically use methods to create some lorem ipsum dummy text that's it so i'm going to import that first of all inside this data file so import and we want to import lorem ipsum and that's going to be from the package we just installed so lorem hyphen ipsum now the way we use this is by setting up a new constant which i'm going to call lorem and setting that equal to a new lorem ipsum like so and then if we want to generate some lorem ipsum we can do things like say lorem which is the constant i just created dot generate either paragraphs sentences words so i'm going to do that inside the data i create now i'm just going to paste this in so i don't waste your time and we have an object or rather an array right here called jobs which we're exporting so we can import it into another file in a minute and inside that array we have three objects each one has an id a title of the job a salary and details and the details is where we use the laura generator so all i'm doing is generating some dummy text right here using this package so three paragraphs all right for the details so we don't have to write it all out manually right here okay so we have that data inside this file and now i want to export this data well i've already exported it but i want to import it into this file so i can send it back as a response so let me do that i'm going to say import and we want the jobs and that is from and we need to go into dot forward slash underscore data dot js all right so now we've imported that we can send it back as the response but first of all we need to convert it into a json string now the way we do that is just by saying json.stringify and then passing in the jobs all right and that's all there is to it so now if we send a request from the frontend to forward slash jobs.json then it's going to look at this file and it's going to fire this get request handler we're going to get the jobs and we're going to stringify that into json and we're going to send it back to the client so now that is going to be stored in here so this is no longer to do's it's jobs so let's replace that right there and also here and then down here we want the jobs as well and let's log those to the console jobs all right so fingers crossed and let's hope this all works i'm going to inspect over here so we can go to the console and we can see straight away we've got an array of three items and each one of those jobs are inside that array awesome so that is working so the next thing we want to do is actually output this data to the screen so let me go back to the jobs component and all we're going to do is get rid of that log and down here underneath the h2 we'll do a ul and inside that we want to output an li tag for each job so in in a swelt component the way we cycle through something is by using this each keyword after the hash so i'm going to say each jobs because that's what we're cycling through oops not just sob jobs and then we say as job now this can be named whatever you want you can name it a if you want i'm naming it the singular of whatever was cycling through so this then cycles through the jobs and we can do something for each job now what we want to do is output an li tag for each job and inside that we're gonna do an anchor tag the href we can leave as just a forward slash for now and then we want to output the job dot title that's all i'm outputting right now the title of the job so now i can close off this each by doing curly braces forward slash each that's how we closed each loop so if i save this now and come over to the browser hopefully we'll see all of those jobs right there pretty good right so now we have those we've managed to get the data using this preload function at the top and we're handling this request right here on a server route now inside this get handler so the next thing i'd like to do is add new data from the front end so for example have a web form where a user can fill it in send it we handle that post request over here on the server route to add new data so we'll start that process by adding a web form and a new route over here for that web form in the next video