Sapper Tutorial #2 - Setup & Starter Project

Key Takeaways

all right then gang so the easiest way to create a new sapper project is by using digits or deget or dkit i still don't know how to pronounce that package but either way to use that package to get a sap starter project from github so make sure you have digit installed first and you can do that on your computer by tapping npm install hyphen g to install this globally and then digit all right so once you've done that we can go ahead and create a starter project by using this command npx digit and then this thing right here svelt js forward slash supper hyphen template hash roll up and then we want the name of our project so i'm going to call this job hyphen ninja and then press enter all right so now we have that starter project i'm going to cd into it by saying cd job hyphen ninja and then i'm going to open this up in visual studio code by saying code and then dot to open up the current directory so press enter and this has opened over here woohoo so here we go this is the starter project so the first thing we need to do here is install all of our dependencies that are currently listed inside package.js so to do that let's open up a terminal and i'm going to type in here npm install and that's going to install everything for us all right so now we can run this command by typing npm run dev and that's going to spin up a local server for us and we're going to see that right here so we can open that up like so and if now i just minimize this we should see over here we do let me just make this full screen like that and this is the starter project great success so let's just take a little look around this site we have a few different links at the top about and blog and then some individual blogs as well and notice how all of this is very quick to load each different page this is a single page application and now all of the routing and all of the rendering of these different components is happening straight away in the browser it's only the initial request to the server that results in a pre-rendered page so that's when we first opened up the dev server and opened this in a browser so now we've done that let's have a little look through all of these different folders and files over here so if this is your first time creating a sapper project and you're looking at all of these different folders and files then it can be a little bit overwhelming because it's not always immediately obvious what everything is for so let's take a look at the different things we've got first of all inside the source this is where we're going to write all of our code okay and we have a few different folders and files the first one is this routes folder here now inside here we have different svelte components for example we've got index and we've got about they are both swell components and they are rendered as pages to the browser when we go to either forward slash about like this so we go to forward slash about and it renders the about felt component so that's this thing right here same for index only we don't go to forward slash index for the index component we just go to forward slash and then sapper looks for the index component to render if we wanted another page like forward slash contact we would just create a new route called contact.felt sapper would automatically create that route for us that endpoint and when we went to forward slash contact it would look for the contact default component and render that so that's a dead easy way to create components as routes now we also have these two things right here these are still both several components underscore error and underscore layout but they are not routes and these are special types of components which we'll come to later again we have some more components inside the blog folder and they basically create more routes only this time we'd go to forward slash blog and then whatever these are called so if there was one called about inside here then we go to forward slash blog forward slash about to render that component we'll come back to these different things later on so don't worry too much about those for now okay so down here we have the server file and this is the node server file where we're setting up a poker app this is a bit like express and you can use express if you prefer but it essentially is going to do the same thing we're using some middleware and inside that stack of middleware we have this serve function and this basically creates a static folder for us down here and all of our public files which are going to be accessible from the browser so things like images we use in our components or global css all of that stuff is going to live inside that static folder we're also using this sap middleware as well so that zapper can do all its magic on the server all right so that's the server file we don't really need to do too much in there for now we also have a clients file and that's this thing over here and all that is basically doing is kick starting our app in the browser so it's looking for something in the dom to inject all of our dynamic content into so all of our different develop components and this thing right here this id of sapper is found inside the template right here so all of our content is being dynamically injected into this now this template thing right here this is the html file that sappy uses on the server to dynamically inject content into so if we go to forward slash about for example all of the content is going to get dumped and rendered inside this div right here all of that stuff is rendered on the server and then the resulting html file is sent to the browser okay so i hope that makes sense and then once we have the html page in the browser for any further route we go to when we click on these links it's all handled inside the browser itself so it just dynamically changes the contents inside that thing right there alright so that's the html template next up we have this components folder right here and this is for reusable components that are not used as routes so for example we have a nav right here and this nav could be dropped into other components we use down here does that make sense or even the layer and we're going to see that later on so any reusable components goes inside this folder there beyond that there is a cyprus or cypress folder for testing purposes and the zapper folder as well at the top which is where compiled output files live now when we run the dev command to run the server the output files are going to live inside the dev folder which we can see over there on the right if we were to run the build command a build folder would appear inside that folder too so finally we have things like a package.json file down here to list our dependencies and we also have a rollup config file a rollup is just a module bundler and does a similar job for us here as webpack would do so again this all seems a lot to remember at first but as we create components and routes and flesh out the app i think it is going to sink in so i think the best way to get to grips with this folder structure is just to dive in and start playing around with the code and creating some new routes or changing the code inside the current components so let's just jump in and change one of the components let's go with the about one to begin with so all i'm gonna do is change this to about job oops not up job ninja and then down here let me do some lorem ipsum instead of this so lorem and 30 words tab and i'll duplicate that as well so we've got two lines of that okay so now if we go over here we can see that the about page has updated all right so that's how simple it is to update a page we just edit the components so let's do another one let's do the home page which is index and if i scroll right down here what i'm going to do is get rid of all of this stuff here we don't want the picture there and we'll keep great success oh by the way you see this thing right here svelte head this is a dynamic part of the content so this stuff right here gets injected into where the head is right here the sap ahead okay so because your head might change for different pages we don't want to hard code it in the template so we can place whatever we want to go there inside this felt head section and we have that and the about component as well over here we see this svelte head all right we'll keep that as the same for the about component but let's change it over here so i'm just going to say job ninja okay so now the content itself let's do first of all let's get rid of that and let's do a div and then inside that div we'll do an h1 and that's going to say jobs for ninjas and then below that we'll do a p and then find your next assignment right here okay and then after that we'll do a link so anchor tag and the href is going to go to jobs we don't have this page or route yet but later we'll create it so don't worry that we don't have that yet and then inside here we'll just say view jobs like so all right so i'm going to give this a class of btn and we're going to style this later on we don't need to style this right now but let's take a look at that so far if we go home we can see jobs for ninjas find your next assignment right here all right so also what i want to do is place an image above this so let me go to my folders and i'm just going to drag in this no text logo into the static folder so remember all of our static files are going to go in here so i'm going to use this now above the h1 so let me say image and then the source is going to be no hyphen text hyphen logo.png so notice we don't have to say something like you know static first of all forward slash the file name we don't need to say the name of the folder because automatically everything is made accessible at root level inside this static folder so let me get rid of that we don't need that and if i save it now we should see that over in the browser there we go awesome so let's just style this up a little bit make it look a bit nicer i'm going to delete all of the stars we currently have because most of them we don't need and start again i am going to keep this for the media query though so that the font size right here is increased for larger screens and down here what i want to do is say first of all h1 and p and we're going to align each of those to the center so text align is going to be center and then after that i'm going to say margin 0 auto okay so after that i'm going to say the h1 will have a font size of two m's i remember that's for slightly smaller screens because this is the font size for larger screens all right and then after that i'm going to say text transform is uppercase and then i'm going to say the font weight is going to be 700 and then the margin is going to be 0 not point five m's at the bottom and then zero to the left all right so after that i'm gonna start the image and the image is gonna have a width of 200 pixels and the margin is zero top and bottom auto left and right meaning it's going to centralize and then i'm going to display this as block as well and then after that i'm going to do the anchor tag that's the link at the bottom we just added right here all right now we'll start the button later for now let's just say margin hyphen top is going to be 40 pixels just to give it some breathing room and then after that we'll do a div and that will say margin top is going to be 60 pixels i remember the div is this thing that surrounds the whole thing and then we'll say text align center now to be honest these styles are not necessary i just want to make it look a bit better this isn't a css course and i'm not going to be writing loads of styles throughout this course this is probably the most i'm going to be doing at any one point but i just wanted to make it look a bit better and i think that does now okay so now we've changed the home page we've changed the about page what if we want to create a new page all right so let's do that let's say new file and i want to create a contact page so we'll say contact dot svelt and that's all there is to it we've now created a contact page and if we went to forward slash contact now then we would see this component rendered to the dom now i'm just going to go to the about component i'm going to copy all of that and i'm going to paste it right here and i'm going to change this to contact at the top and i'm going to change this to contact job ninja now save that and we don't have a link there at the top but we'll put that in later for now all i'm going to do is go to forward slash contact to see if this works and yes it does we get now a contact page awesome so there we go my friends that is the starter project up and running we will edit all of this to create our own project as we go forward but to begin with i want to talk a little bit more about routes layouts and errors of these two things over here in the next video