Fullstack app NuxtJS (VueJS), NestJS (ExpressJS) RESTful API, AstraDB NoSQL serverless (DataStax)

in this tutorial you will learn how to build a full stack app using nuxjs a view framework for the front end nest js framework which is built on top of express.js for the api and the back end and datastax's astrodb for the nosql cloud database and of course we'll be using github copilot as our ai pair programming partner the features will build your seal behind me we'll probably build list members create members with a form and if we get time search members as well and you should see how straightforward it is to do this and how much fun it is at the same time this type of functionality underpins everything you want to do job platform blog platform ecommerce platform it's kind of the same thing and just added with more functionality we might make it look slightly differently because i'm using beautify for the first time so we might change it slightly and look a bit different to what i have behind me to make the most out of this tutorial make sure you have no js installed with a version 12 or above and also you will need a free data stacks to account for the database as a link in description below although i'll be demonstrating github co-pilot in a tutorial it is not required you can still do everything that you'll see here let me give a brief explanation of the tools we're going to be using we're going to be using nuxjs it's an intuitive view framework an open source framework making web development simple and powerful it has a really great wizard when you start and creating an application it asks you if you want to use yarn on npm if you want to use bootstrap material beautify other ui frameworks tailwind etc and also what testing frameworks you want to use such a great way to start an application we'll also be using nest js and it's a framework build efficiency scalability on node for server-side applications it uses progresses javascript and fully supports typescript which is what we'll be using today but we'll be keeping it very javascript-esque so don't worry about the typestrip side and you can use ooh you can use functional you can use functional reactive programming so many things you can do in nest and if you like a deep dive into that do let me know because under the hood nest makes use out of express and it can also be configured with fastify as well if you prefer although it gives it a great abstraction above these tools it doesn't limit what you can do next js exposes all the apis underneath the framework for example express or fastify as well as giving you lots of its own awesome api and functionality so what is data stacks datastax built an api gateway called into astra to give developers a natural data api stack which meshes with the jam stack or any other javascript framework that you like astra is built with a rock solid database nosql engine apache cassandra which powers netflix instagram yelp icon so many other apps that we use every day it's all open source no surprise this is me here and what i love is there's multiple ways to connect in this tutorial we're going to be connecting via the javascript sdk which goes over their document api but they have a fully functional rest api graphql and cassandra ql so many things that we can do links to all of these below and github co-pilot is introduced in june 2021 it's an ai pair programming partner it gives you not only suggestions but whole line suggestions entire function suggestions documentation and so much more it works with vs code and code spaces it is currently at the time of making this video mid july 2021 in technical preview which means you can sign up to get early access and there's a waiting list sooner you sign up the sooner you'll get access have a go and let me know what you think so the first thing we're going to do is probably create the front end in a basic way and then we'll add the api in a basic way and then we'll add the database and we're going to all work in the still thread working front to back at the full stack and then we'll add more fidelity let's see how we get on this is my plan things might change as you work together on this and when you're building your app remember try and build something slightly differently so you can remember it and also challenge yourself in a slightly different way if you want to build it in a different way that's also fine sometimes you're feeling a bit creative sometimes you want to dig into deep logic see what works for you and what mood you're in and what goes with the flow so let's get started so i'm in the repos directory on my laptop and i'm going to make a directory i want to call it nuxjs nest js copilot create that folder and i want to put the front and then the back end in the same folders a mono repo style and you could do that or you could have it as separate repos as well i am quite keen having separate repos but for simplicity now i'm going to have it in one well i say for simplicity some things are easier some things are harder but for this demo it's going to make things simpler i think i think let's see how we get on i'm going to go into the new folder i've created and it's completely empty so the first thing we're going to do is go to the nux documentation and click get started and it's going to help us it's going to ask if you want yarn mpx or npm i'm gonna go for npm and you use this command so it's npm init nux app and the name of your project i'm gonna call the name of the project ui so therefore it creates a ui folder in our repo project name ui i'm happy with that we are going to use javascript for the front end although i am a big typescript fan we'll use npm definitely an npm fan i haven't used vue to fight before i mean this works with tailwind and so many others that i haven't even heard of but i'm going to go with futurify let's see how we get on with that and we will use axios for http and i would recommend turning on the linter and prettier but for now to keep things simple i'm not i also recommend using cyprus for testing the front end but for now i'm not going to have any testing framework and we'll go for a single page app and we'll do node hosting and we will select jsconfig because it's recommended for vs code when you're not using typescript and what's my gear username that is correct we will choose no github repo because i am putting it in a monorepo and i don't want sub repos in there so i'm going to select none if you do select a git repo you can actually delete the github folder in the subdirectory and you will lose that history in that repo style and we're going to have to do that with nest because nest doesn't give us the option to create a project without having it set up nux is done it says navigate into the ui directory and then run npm run dev okay let's see let's see how the project looks okay it's building it the first time it's a little bit longer okay it's done it's now recommending that we go to localhost that's a weird number port already in use and so now it's just in this port the port shouldn't be in use it is in use on my other screen my bad so let's stop that again so if you get that don't be scared read the error that comes back and then you can fix it okay now it's listening on 3000 which is a normal port it should listen on and this is what the app will look like default created by nux i think it looks great um okay so what we want to do next is let's change this page let's hard code a list of what we kind of want it to look like so let's uh have a look let's open uh vs code i don't think we've opened that yet so what we can do is open a new terminal we're in the ui directory let's go up one so therefore we'll be able to have the ui api within vs code together so let's open vs code we've got the ui folder okay let's have a look at this so this is the assets folder this is where you're going to want to put your scss files before they're compiled and they'll end up in the static directory where you put your public files like favicon or images etc and so on and then you have a components directory this is where you put your view components we won't be using this today to keep things super super simple but i recommend that you do use it and maybe you want to make some improvements to my project and put it into components the layout is the bit that goes around your pages that's consistent it can change but it's usually consistent between multiple pages we'll leave that for default for now node modules i'm sure you you're familiar with and pages this is where we'll be so if i open index.view we will see welcome to beautify plus next.js templates if i go back to the browser that is what we see here so let's just rename that make sure it all works welcome to eddie harp save it just automatically reload without me doing anything and you can say it says welcome to eddie hub okay brilliant that's looking good okay so let's delete all this out i think will be a good idea and let's have an empty page so i've deleted that hit save reload nothing there apart from the layout as you'll see the layout at the top has all staged we're leaving that alone for now so i want to create a list so what we can do is you can do standard html so we could go ul an unordered list and we could create a list co-pilot to give suggestions already but i just want something hard coded and we can say member one and then we can duplicate that three times oh no that's one that's two no not eleven okay and that's three and then let's end the unordered list save that and we'll see that in the page we've got members one two and three that doesn't look very nice so let's go over to beautify let's have a quick look at what the examples they've got so i have beautify here open and let's go to getting started and let's have a look at their components so we don't have to do the installation because nux is taking care of that for us which is amazing so we can actually go straight to the uh components and we can have a look at what they've got so i'm interested in the list so let's have a look at this list you can't have it in a card okay that's quite interesting and you can always click on code and have a look how it looks pretty good a lot of information i don't think we're to have that much information but we could reduce it maybe we'll try that let's give that a go we can always change it so it's saying v card and it's saying that it's going to have margin auto which just enters it and it's going to max width of 400 and it's going to be tiled let's let's have a look so you know what let's grab the whole example oh in fact you've got a copy button here thank you very much it will have template so let's remove all of that paste and let's just save it and have a look see how it looks okay i like that um it's got a bit too much information so let's remove some of these i don't think we need the third line do we we can ditch the third one and let's give it a save let's reload i think that looks better because what we could have up here is the person's name so we could have their name and then we could have their github username so this would be lowercase name and then this would be their location if i save that how does that look now that looks quite nice so now actually what we want to do this is actually the list item so we want to actually remove the first list item and have a two line item because it'll be name and location and gabby's name we can add later if we want so now let's duplicate this one so we should have two of them so we could say name one location one name two location two a bit like before let's just check it all works okay we now have two items on the list but we don't want to hard code this we want it to be dynamic within the html to make the html a lot less and also then we can replace it with the api so next thing we're going to do is create a script section and we're going to hit enter and it's also completed some of these but we're going to use make this a lot simpler we're just going to have export default and we're going to have data to start off with data is going to need to return there's going to return an object this is the data available within our component and we're going to have items and let's have that as an empty array let's see what copilot does so let's create the first item it's saying create the beginning of an object perfect and it's saying name name one okay i like that location location one code pilot saving me a lot of typing liking this let's see if it does a second one for us see when it comes up in grey i just hit tab and it auto completes this is brilliant okay perfect so we've got that so we've got data but this is actually duplicated so let's delete this and we have if we save it we will see only one but there is data available within the page so let's see what we can do next so if we go to the list we can have a look at actually some other examples this is a great way to to learn how people do things so you can see it's got a v4 so view for loop items i in items and it's going to create the key using the key from the array so i think we can we can do the same so let's grab that and it looks looks good so we're going to want to loop over this let's make it all on one line so here we're going for items that's the name of our data here perfect and we're going to loop over it okay brilliant so if i save that now we should see two on the page and we do but the data is repeated because we're not actually using the data in the array so next we can change the data so let's see how they did it and they're using this property of v-text let's do the same in our so we can say here let's remove this and put v text and the value of v text is going to be item dot location and we're going to do the same up here for the name as well v text equals item dot name so now after i save it we should see those change to be one and then the second one to be two so let me hit save and it reload and you can see the second one's changed to two so if we want to add a third one we could use copilot to do it for us or i could just duplicate it like this as well put three hit save and you can see there'll be three in the list but the html is still really consistent so that's really nice yes this hard coded data is growing but we're gonna replace that with the api in a moment so i'm really happy with that i like that let's leave that for the moment let's jump into the api i'm sure you're all excited to get into the api so let's go to the nes js docs and go to their documentation it's gonna be very similar to the nux so we're going to say nest new project i've already have it as a global install in my npm packages so i'm just going to use nest new and the name of the project so let me go here let me open a new tab i'll do that in a minute so we have the ui so i want to say nest new and i'm going to create it as an api folder so here we go and it's saying do you want npm yarn i want to choose npm we'll let it do its magic but as i mentioned before it will create a git folder so it'll be a git repo which we don't want because we want the parent to have both of them so we can just delete the dot git folder if you're having them separate repos then do keep it and don't delete it okay so it's done that so as i mentioned i want to delete in the api folder dot git folder so therefore it doesn't have the history there and we can actually go into the api and we can run it and it says cd into api then do npm run start but i want to use run start dev so it automatically reloads so now the api is booting up let's go to the browser and let's have a look it's going to be running on 3000 with conflicts with the nuxjs project so we actually in the api need to do one thing and change it the main.ts and to change it to 3001. so let me run it again and now it's going to run on port 3001 we go back to the browser and if i refresh this oh not with members refresh it it says hello world so our api is working and let's just double check that so in the api directory let's go to where it all kicks off so it goes into the source directory it goes into app controller and here you can see it's got a get so that's going to be the api get but with because it's got no parameters it's going to be on the root of the project as you saw it said localhost 3000 and then it goes into the get hello service let's change this sub hello world whether it's to say hello eddie hub if i save that go back to the browser and refresh it it says hello edithups we know the api is working on port 3001. so we want to do next is actually let's get some json out and we want it to match what we had in the front end here so actually what we could do is we'll hard code it in the api and then connect the front end to it that way the front end thinks it's real data and then we'll go back to the api and then we'll change it to connect to the database and the ui won't need to be changed at all because if it's hard coded in the api or reading to a database the ui will know no different so what we're going to do is in the api go to the app controller and we're going to make another get but this time we're going to pass it the parameter of members so you have to go to localhost 3001 forward members and then we're going to say get members well thank you very much copilot but no it's not going to be a string it's going to be an array but i want to leave the typescript off now to keep things simple for everybody and yes we are going to want to return from the app service get members this is great it is red because we haven't created yet so let's create that next so get members no parameters um and uh it's saying return members we want to return an array so let's go back to the frontend file and grab this array copy it and actually let's delete it so when i save it in the front end there'll be no list on the front end it's gone now and if we go back to the backend file and paste this in so we're going to return an array so it's the same data we had in the front end but as you can see the front end is no longer showing the data because it hasn't got it and then we're going to save this if we refresh this it'll be no difference but if we go to forward slash members you can see now it works name one two and three that's what we have in the app service in our api so we've got an api working straight away but even though it is working we go to our front end we refresh it no data that's because we've deleted the data in view and we haven't connected it to the api so until we connected api it's so straightforward i think people shouldn't get hung up on all this terminology just get started let your hands dance as danny thompson would say and just practice and if you get stuck ask for help people want to help okay so the next thing we want to do if you want to create a fetch method going to have no parameters and let's see what github co-pilot says it says return not quite what we want we don't return it we want to save it to the items in this component and then we're going to want to do an await on a fetch so let's do a fetch it's come up with a temporary url but that's not the one we're going to need we mustn't forget this needs to be async as well so let's fetch http localhost 3001 and then we want members and we mustn't forget that we actually then want to have the response returned as json oh we can see co-pilots also completing that for us perfect thank you very much we don't need these extra brackets though save that so what's going to happen the page is going to load it's going to load immediately with no data but then immediately the fetch will fire on the component and it will call this data and populate the array so if we look back at the data we get an error and that's because our api and ui are running different ports you've probably heard of calls before as you can see this error is saying it has a cause error so the api is blocking it which is fine really easy fix do not stress we're not the first people to solve this we go to the main.js where we change the port but now we just say app dot enable cause and we're going to pass no parameters in we're keeping it default and it should then reload and if we go back to the ui and refresh it now you can see name one two and three coming from the api but if you don't believe me come over to the network tab in the developer tools click on members and we see three there that have come from the api but let's prove it let's go to the api and change it so let's add a fourth member this copilot going to help us yes it is perfect thank you co-pilot i'm going to save that uh the ui wouldn't have refreshed because it doesn't know the api has changed but let's go to the api let's refresh the api and you can see four has appeared so let's go back to the ui and refresh and we should see a fourth so now we've got a full stack app working end-to-end but we've hard-coded data in the api so shall we replace the hard-coded data in the api with real data from the database next you want to go over to sign up to data taxes astra it's free and you can sign in directly with your github let me show you that now i hit sign in and we're straight away in and you can see i've got some databases and some data already and you can see they give you 25 per month of credit i think i've got more this month not sure why but thank you very much and i've used less than two dollars and i've been using it a lot so it's an amazing free tier and you can just connect using rest which is just awesome so what you need to do if it's the first time you use it is create a database and then once you create the database it will open and the next thing you want to do is create a key space and a key space is like a namespace so imagine you have different clients in your database or different they're different clients or different customers usually you'd have a field in if it's a sql database a column for example or if it was no sql like you would then have a field that would have the client's identifier so every time you perform a search you would then make sure you need to filter for that client and you could forget that what i really like about data stacks is astra is the key space you can split out the data so there's no mistake you don't accidentally get data from one client and serve it to another client is divided so all the documents in a collection in that key space are specifically for that project that client that customer however you do it so it's really good to create that i've called it next.js that's what we had on our live stream i know we're using nuxgs but i've got data in there from our live stream so i'm going to just keep using that as well so next thing we want to do is we want to replace this with real data from our database what you'll see is in the dashboard on astra is they have a connects tab and then you can choose where you want to connect document api graph api rest api and they've actually got examples so here you go you've got node you can download example projects it is really good i'll let you have a play what i'm going to do is go straight to the javascript javascript sdk as it says you will need to create a token so you can connect the api and you can create it here it's really simple you just give it a name it gives you a token and then you just use that in your application but treat it like a password though it is private so i want to use the astrojs collection so i've gone to their documentation and i'm just going to install it for api so let's go to our api let me open a new tab or it has it open the right direction so let's go downloads repositories what do we call the project again nux js nest js copilot okay and so let's go into the api directory make sure we install in the right place and let's install astrojs collections the next it says you need these environment variables and these you'll get from your dashboard so i'm going to set these off screen so you don't see my private keys well you know what i can set them on screen and in video editing we can blur them out and then this is how you connect so what nest js recommend is you use their config module which is really straightforward to get started we go to their technique section and go to configuration we need to then install also the config module so let's install that in the api as well and you're going to see how straightforward it is to get started all you need is to add this to your module directory so let's do that while it's installing so let's go to app module and on imports we're going to import the config module or we mustn't forget to add it to the top there we go so now that's done now what we can do in the api directory is create a dot n file and this is where we put the environment variables and this should be in the get ignore folder so you can't accidentally commit your private keys so let's have a look do you see dot m i have it as a global ignore but just in case you don't do put dot m make sure you don't commit this and what we're going to do in the m just like they suggest astro.js documentation we're going to need these fields so let's have a look so in here i'm going to put the tokens the astra application token database id and the region and now that's done we can actually close the module we don't need that anymore we can go straight to our service so in the service what we're going to want to do is create a client so it's as easy as this so we can include this in there so we're going to want to include the client at the top he's willing to make this an async function as well so what this does is it creates a client for us connecting to astra db and these properties will be populated via rn file so you've got astrodb id astrodb region astrodb application token do we name them the same or we name them slightly differently okay that could have been a bug but let's fix that now so we have the token and then we have the database id which will be this one and then we have the region which will be this one so that will then create a client for us to connect and to get this data you're going to see how straightforward it is so the next thing we're going to do let's look at the documentation what does it say it says you need to collect get the namespace and then the collection that we want okay sounds good so let's oh it's kind of autocomplete for us so we say const and we will say collection and we will want to use the astra client collection we need namespace first extra client namespace next.js to have existing data and then we want the collection members okay perfect after that it says we can just say get and we can use a get for a specific id we could use a query for an equals or we could just have an empty object to get all of them which is what we're going to want to do now so in here on this return let's have const members and we're going to say it's going to be an await and it's autocompleted for us i don't think we need the two array so we're going to save that there and then let's just replace all this hard-coded data with members save it and let's have a look at the browser and the api and it works as you can see this is real data coming out of the database okay but one thing you'll notice is the id is not in the object the id is in the key which is great sometimes because you can then grab out the collection really fast but that's not how our ui will work so either we need to remap the data in the ui when we grab it or we remap it in the api i prefer to remap it in the api so to remap this in the api what we can do is we can grab the keys from the object and then we could do a map on it and the map will be a key i was auto completing for us and it's going to want to return the members out of the key that is correct however we want to add the id as well so what we could do is we can spread the members but also add the property id which will be the key so now if i save that let's have a look at the api so this should no longer be an object but should be an array and then there'll be no key because it's an array and the actual value here of the id will be a field called id let's refresh it and find out there you go see it's changed to an array now the same unique id is still there but instead of being the key it is now under the field id perfect so could we go to the front end and just refresh would that work and that should change the data we see here we have name we have location we have id we're not doing anything with github at the moment but that's fine refresh there you go edie portugal knox js test maya israel let's have a look eddie test2 maya it looks correct so now we've got a fully end to end from the front end from the browser all the way to an api layer all the way to a real database that's in the cloud and we didn't have to do any schemas anything complicated i mean you can do that with astra if you want to extra performance you want some extra features you can do that but you don't have to worry about that to get started which is brilliant so we've got that so that looks pretty pretty good i did say we were going to do a form so we can save some data so let's uh let's give that a go so let's do the go back to the front end for now and then we'll add it to the back end afterwards so in here we're going to want to add a form so i suggest we go to the beautify docks and have a look at their forms this form looks nice i'm happy with this don't need anything that complicated let's have a look what have we got okay so let's grab the form out and we'll talk through it as we go we will need to wrap this in a div so therefore there is a kind of single within the template a single parent so let's do that as a div and then now up here don't worry it will automatically tell you view is very good at giving you good errors and good feedback this is getting quite along this page you'd want to move this to another component again for simplicity i'm not going to do that right now although for simplicity moving into a component will make it a lot easier so here we go we've got a form we're going to validate it i want to remove the validation we don't want that we've got a container we've got a row we've got a column okay i like those dimensions first name we'll change that to name because that's what we want we don't want any rules is there a counter on duration let's leave that in i'll show you what that does that's pretty pretty cool and we're just going to have name and is it required yeah it's required and the second one we should have as location to be the model that's where we're going to get the data i'll show you that in a moment we're not going to have any rules we can have a limit of 15. and what we'll see on the label what is displayed on the table on the page is location and it's required and we can add the github if we wanted it again it's going to have no rules it will say github and it's required so we actually need to create these properties so in the data function we just have items so we actually do need to create the other ones so we're going to create name thank you very much co-pilot oh location yes and github co-pilot you just saved me typing that out and making typos okay that's pretty good so hit save we should see that on the page my uh vs code has reformatted that thank you very much and now we see a form we've made this a bit smaller so we can see on the page we've got name location and github oh no button we do need a button so we will add another column and we will keep it the same 12 4 thank you and we're not adding a field to that no we are going to put in a button which is um we're going to remove the validation check we can have it as a color as success and click validate no we're going to want to submit it but we will leave that off for now and that won't let me comment it out but you know what let's put that back in and it's our validate let's have safe and then we can match that with a function below so if we come down to here let's just create another function called safe and we're going to have the event and uh let's have a look prevent default yes please we are definitely going to want to prevent the default and no that's it for now so save and we can do a console log so we could do console log of the data so let's console log the the name so let's have a look oh it needs to be this name because it's in this component when you refer to any of these they need to be this okay so save that let's have a look ah i made a mistake i actually need to put save under methods their co-pilot has suggested already thank you co-pilot suggested earlier though okay now there won't be an error it will find the the function and if we just say this is a live test for the name or it's gonna be too long you can see it's already saying it's 12 out of 10. it's too long so just say live demo there we go and validate we should change that to save you can see now in the console log when you make that a bit bigger it says live demo so it works okay great so let's change the name of that from validate to save and what we want to do is we want to send this to the api so what we want to do is not just have name we're going to want location in github and we're going to want to make a post request to the api let's just prove it all works which i haven't made any other mistakes so we'll say location and we'll say github okay so i save that run it again and if we just go one one one one one two two two two two three three three three three that's what we should see in the console yes we do one one one one two two two two three two three down there okay perfect so we're getting the data from the form and now we need to post it to the api but the api doesn't deal with posts yet so we'll need to add that as well and then save that to the database but it's literally going to be only a few lines of code you're going to love it so let's jump back to the api and we're going to go to the controller and we're going to add a post so we'll say a post and it's going to go to members still so yes thank you very much co-pilot and it's going to be post member okay that sounds good perfect and we're going to call the service post member or we could say a save member maybe save memo rather than post member you choose i'll leave this post for now and it's red because in the service doesn't have that yet so now we need to make the post members service so this is no longer red and passes the data and we can actually save it but we're not going to want to copy and paste these lines again for the other method so we want to make that reusable so what we can do is we can go async get client and then we could put these in there so we grab those and put them here and then we could return the collection so here we can say return and then that way in here we can do something like this where we can say this get client and there's different ways that it can be done you could do it as a class variable there's different ways so actually let's separate these and make it simpler in multiple multiple lines so let's say const collection equals get client we've got that and that should still work so you know what if we make any more changes let me save this i won't save the app controller because that's still red i want to make sure that it still works on the api as it did before so hit refresh still works no errors brilliant okay so that's really good always check every little step as you go along which is why i love automated testing more than happy to do more videos automated testing if that's useful to you let me know okay so now that works we can then do another function which is async and it's going to be post members or save members and we're going to save it to astronaut it's going to be so simple you're going to love it so let's get the collection again and it's going to be get client and let's have a look at the documentation co-pilot is suggesting it but i have a feeling it's not insane i'm feeling it's safe let's have a look it's create okay perfect so what we need to do is actually you can pass the id but if you don't want to you can just do the create and we don't have the id so we just want to do the do the create so next up we want to say uh const result equals collection dot create and we want to create member but to give ourselves a little bit of protection we don't know what people are going to pass in through the ui we should actually define what fields you want saved it's actually good practice and also validation is even better practice and filtering out any bad data but we could do stuff like this so we say id is member no we don't have an id so we could say name is member dot name and if we're using typescript properly we would be having a definition like a dto data transfer object with the types interfaces which makes this a lot easier so we don't have email we have location remember.location and then we do have github and its member github perfect and we want to return the response we probably want to return the actual id that is created so we could actually just return the id but we could also return the object data with the id so let's have a look so we could say return and we want it to be an object and we're going to want an id but it's not going to be dot id it's going to be document id that's what comes back from astra and then let's have the rest of the data yes so we will um spread it with the data that they actually sent in so the data they sent in with the id if you want to be belt and braces you could do another fetch to get the data using the id to make sure it was safe but having the id means it got saved so we go back to the controller post member is read why is post member it read post members and it should be singular i typed it wrong post member now is no longer read and we should be able to save it and we could test this by doing postman or i have a rest client installed here but you know for simplicity actually it's not simpler but let's just test it i want to see if we can run before we can walk and let's see if we can get this to work straight away in the ui let's have a look so in the save we've got the console log we'll leave that there for now if you wish and we need to do another fetch like we did before so let's have a look so we could do an await and it's a fetch and it's going to be to the same url so let's copy that to save time but we actually don't want to make a get so by default makes a get we need to make a post so what we can do is we can pass an object with some parameters and the method's going to be post yes thank you we are going to want headers and then we are going to want it to be a content type of application json perfect finish that off brilliant and then next we are going to want a body so we're going to want to send the data to have a body and we're going to want to stringify it and then the data we're going to want to send is name from this dot name and the component location yes and github perfect copilot really making it faster then after that we will do like we did before and we will put a then and we will return the json and then off that we could console log it we could then add it to the page there are a few things we could do so let's just counter log it and check it works then we can make it even nicer so if we go back to here we have an error we need to make this async now that's the error we've got save it reloads looking better okay brilliant so we should see the id in the console log on the bottom right and then we're going to get it to add to the page so here we can say real database oh it's gone over so let's just put astra db location in the cloud and the github we could just say astrodb all lowercase hit save and we get an error what is the error oops i put the then on the wrong part so i need to put the then not on the string of phi but on the fetch so that's my mistake and so reading the error messages is important if we refresh the page and let's try again so we were saying astrodb we're saying it's in the cloud and the github was actually hit save and we have a 500 error which is fine it means it sent the data so we could actually look here in the network tab and it says that they got sent so we can look at headers and we scroll down we should see it have a body and it's the body that we want and it went to the right url with a post but let's have a look on the console for the api and see what it says cannot read property name of undefined okay so let's have a look what went wrong with the api this is where it automated test like really really helpful so it came in here so we could put a contour log in here and make sure member comes in so let's uh let's have a look let's do that and console.log member and remember this member remember this will be on this console log so it's reloaded so let's just send this again yes we'll get the 500. and let's have a look it says undefined this is correct because it doesn't come in like that in the data we actually need to tell nest js where this data is coming from and we do this by saying it's coming from the body because it's a post so now this will look a lot better trust me let me do a save again as you can see this is what got sent and let's see what in the console on the terminal what the api thing's got yes so it thinks it got that great that's brilliant okay and that's looking a lot better so it came through to there so we can remove that console log now and then in here it should have come here and actually saved the data so let's have a look if we go to members here we can see the response so this is what was sent we know that response you can see it's got an id with the data we sent and the id okay brilliant let's add it to the page so it is working and let me prove to you it's working by refreshing the api so here we have how many we've got eddie myers is going to be we are looking for it to say astra db and if i search the page astrodb is not in the page if i hit refresh and i search the page you can see it's astradb and this id will match what we had in the browser as well okay so now we're going rapid speed let's um have a look at adding it straight into the browser so what we could do we could add another then if i put this to the next line we could say then we've got the json and we could add it to the bottom of the items array so let's try that so here we could say this items and we could say push on the on the response and actually we could all do that on one line which would look a lot nicer and so it should get added to the bottom without us refreshing the page so at the bottom we have manually inserting data so let's say test number two location i'm currently in portugal and my github we all know is this hit save okay if i scroll to the bottom is it added test number two portugal so as you can see i didn't ever refresh the page it is persisted it is now at the top because we haven't sorted the data we're getting back from the apis the data order could change but you can see that has worked and saved it in the cloud if you cloned this project and had my tokens you would get this data and again i can refresh to show you the data is persistent database so we have get and all the way working from the back end all the way to the front end and we have save working all the way from the front end going all the way to the back end and coming back again in the get you get the idea it's a lot gets so now you know how to get data from the database and send data to the database what i suggest you do next is create another form it has a search keyword and when it's submitted it brings back the data from the database and it filters the results so maybe if someone's searching for eddie it brings back all the ones that are called eddie and that's the way you will learn so much is by actually doing and trying and making mistakes and if you have any questions leave a comment below and let me know what you build i do live streams every friday where i review your open source projects if you build something let me know i'd love to see it to see what you're building and we are going to do an amazing swag giveaway live streams and we need to look at your projects see what you build so go play with any front-end framework you want any back-end api you want but use astrodb so i get to see what you use it for don't forget to join us in our discord so you can chat to me and the community between live streams and video link in description below in this tutorial you will learn how to build a full stack application using nuxgs a view framework for the front end next.js sjs not next terrible start come over to your network tab in the dev developer look right h video lucky

Channel: Eddie Jaoude

Views: 555

Rating: 5 out of 5

Keywords: open source, tech, code, webdev, developer, coder, fullstack, javascript, typescript, node, firebase, opensource, machine learning, github, web developer, cypress, ci, cd, circleci, DevOps, PDD, Pipeline Driven Development, devlife, digital nomad, interview, branding, mentoring, dashboardhub, react, angular, react vs angular, strengths, weakness, business, startup, startup life, meetup, devrel, mermaid, diagrams, documentation, developer advocate

Id: TbUpYeLn6SI

Length: 45min 39sec (2739 seconds)

Published: Wed Jul 21 2021