Create a React App with .NET 5 API Backend in VSCode (Entity Framework Core & Postgres)

what's up everybody it's travis here from travis.media today's video goes out to all of you react nerds who always want to build your back end with express in this video i'm going to share with you how to set up a net react project so we're going to use the.net cli to create a net api it's also going to include a react project and we're going to use entity framework core to do all of our scaffolding and orm stuff and we're going to be using postgres as a database so if you love react you're looking for a new project or if you need to do some work with it in a net backend this video is for you now we're not going to be building a full-fledged app i'm just going to be taking you from the initial app that you get by running the net command all the way through hooking up your database and everything to where you're posting and getting and doing all the api calls so it's all you need to take all of your react skills and build out a nice full stack app and reactant.net and as always if you find this video helpful click that like button and consider subscribing let's get started alright so the first thing you want to do is make sure you have dotnet 5.0 sdk on your computer if not just go to dotnet.microsoft.com download click on this download.net sdk make sure you choose 5.0 that will give you the sdk plus the cli tools second let's create our project so i'm going to go to item go to my desktop and i'm going to create a project i'm going to call it react net so to do that you're going to use the.net cli command dotnet new react dash o i guess yes it's like output what folder do you want to output it all in but i'm going to call it react.net and then i'm going to choose auth you don't have to choose auth but a lot of times you want authentication built in this is nets oidc identity packages so dash dash auth and you're going to say individual so that's dot net new react dash o react net or whatever you want to call it your project dash dash off individual individual off hit return and it should create your project so whatever folder you're in it's going to create a new folder called react net once this is done we need to cd into it and we'll get started cd react net whoops cd react net and i'm going to do code dot to open it up in vs code so you'll see here it's just like any other net project api project there's no views but you have your controllers data models pages all that stuff your startup file your app settings and then up here in the top the big difference is you have a client app folder and this is your create react app project so this is going to have your index.js your app.js all of your components there are going to be a few components set up in a folder called api authorization this is your oidc identity that.net adds in when you choose that auth command that we did when we set up the project but we're not going to be able to get into all this in this video if you want me to do that some other time just let me know but you should be familiar with this your components your app your index your package.json so what we want to do now is we we want a cd into that client app folder and we want to run npm install which is what we do with any react project npm install and we'll wait for that to finish once that's done we want to change directory back into our root directory so cd dot dot and we need to run uh dot net run that's how you run a dot net project dot net run this is going to create the app on our local host colon 5001 url so i can just uh hold command and find yeah localhost 5001 and i'm going to open it here and while that's coming up just to take a quick look of course our routes if we go to app.js our routes are controlled via the react router so we see here our home route renders the home component air slash counter renders the counter component the fetch data component is behind an authorized route which you're going to have to use the net identity system to access it so when you go to it it's going to redirect you to the login page so any routes any components that you build things that you want to route will go here and uh you can actually look at the components there's a bunch of stuff they put into this base project to um to kind of teach you how reactant.net work together and here we go so up here you have the home you have counter you have fetch data register and log in so if i go to counter i can see they just set up a basic little react reactive counter i can go home if i go to fetch data it's going to redirect me to the login page which this is actually the backend.net page but we won't get into all that here so the next thing we want to do we want to set up a database for our project i'm going to use postgres because i like postgres um and i'm on a mac they have an app called postgres for mac that's really awesome but whatever you're on postgres is the same everywhere so however you can access it that's great do it and so with this app basically uh here's all my databases i do a lot of just kind of messing around here so i'm going to create a new one and just another side note if i go to server settings you'll see that my port is 5433 make sure yours is 5432. i have a conflict so i just bump that up one but i'm certain that yours is going to be five four three two so to create a new database i go to this uh postgres this parent database double click it and it puts me in the command line the postgres command line so i can say uh create database uh let's call it react net make sure you put the semicolon postgres is funky about that and then uh create user let's do travis with encrypted password travis super safe created role and then finally grant all privileges on database uh what do we call it react net to travis so this is given granting all privileges on react.net to my user that i just created and that's all that's all we got to do if i close this out now uh we should see our database uh where's it at react net there it is so our database is created we can get rid of this postgres is good next in order to talk to postgres we need two things we need to download the package the nuget package and then we need to create the connection string so if i go to nuget i don't know what this is going to bring up yeah there it is top top request i don't know if it was somebody's name or whatever but up here for where you search for packages just type in uh postgres and we're going to choose the npgsql.entityframeworkcore.postgresql because we're doing everything entity framework here and because let me take a look at my project if i go to the project file i want to see what version all of my already installed packages are so 5.05 i like to keep that consistent or as close as i can so i'm going to see if they have a 505 there it is so i'm going to click that and then in this dot net cli tab i'll just copy this command this.net add package command stop my app and paste it here to install this postgres package awesome so you see it's added in my project file now we want to go to the appsettings.development.json and create the connection string so i don't like the way this is formatted yeah there we go all right so i'm going to come up here and connection strings now watch this look at that how did that pop up just a side note i finally got approved for the github copilot access like it's still in testing phase and you can get on the waiting list finally got approved and github copilot is so cool see how it already suggests suggests a connection here so i'm just going to hit tab to accept it and we're going to work through it so server is definitely going to be localhost then we're going to have port equals minus 5433. yours is going to be 5432. and the database name i think we called it react net then we're going to have user id equals travis password equals travis and i'm just going to take this last part out make sure you put semicolons at the end of each one of these and that's all we need we have a connection string called default connection so i'm going to save that file so we've set up our connection to postgres we've created the database now let's go ahead and create a model so i didn't i didn't i don't really have an app that we're building here we're not building like a notetaker app or anything that would be a really long video what i'm doing is i'm getting you all the way set up with net and react so that you can use your react skills to to do all the amazing things you do so i'm going to create a model and i'm just going to call it note like as if we're creating a notes app so if you go to models and if you didn't choose the off when we created this project you're not going to have a models folder so if you don't just right click new folder create one called models i'm going to create a new model called note.cs and i'm just going to copy from this application user so that i don't have to type in the namespace and everything get rid of these that i'm not using and we're going to call this class note and take off this other part all right so what do we want in a note cloud look at that github co-pilot's already suggesting some look at that id title content user id user pretty cool um i think what we want is an id for our notes we want a title and then maybe a description so we have a title for the note and the description is the actual note so um i'm just going to do prop i think this comes with like the c sharp extension or something but you can type prop and it kind of it's kind of a shortcut so public string we don't want string we want int public ant id then i'm going to copy this two more times we want this both of these to be string and we want the first one as a title the second one as a description so we got three parameters here we have the id which is an int we have a title which is a string and a description which is also a string and that's it that's going to be our note model so we'll be able to create notes delete notes all of that stuff so save that next we need to set up our database context now this is what entity framework core uses to scaffold all this neat stuff and do all the great stuff that it does so we need to set up a db context in our data folder um and by the way yeah so delete this migrations folder because they're currently using sql lite um so we don't want these migrations and down here where it says app.db just delete that file that's the database they're using it's kind of the temporary one they set up but if you go back up to data you see that we already have an application db context this is related to the identity so i want to create another one i'm going to call it my db context dot cs and i am going to just copy from the other one again and change this to my db context and it's going to inherit from i think it's db con d lowercase b db context so you want we're going to call it mydb context inherited from db context and look at that i'm going to go ahead and cut get up copilot off for now because i don't need it anymore and in fact i'm just going to erase this i'm going to type this in this is the only actual typing we're going to do here you can google this and get it anywhere it's just standard but i'm going to type it in so public my db context this is just the constructor db context options db context options inherit from the base options and we're going to leave this open nothing goes there and then finally you use this db set so watch this public db set of type note which is their model called notes get set so we have this db set called notes that's of type note and that's all we need to do we do need to put a semicolon after that okay so we have our database set up we have a model and we have a db context now if we go to startup.cs you'll see if you scroll down where all this stuff gets spun up when the app starts you'll see that we have a db context added here called applicationdb context which we know is the other one i'm just gonna um i'm just gonna comment it out because we're not gonna be messing with that uh but i am gonna copy it and just use it for what we're about to do so make a copy of it and change the db context to the one we just created my db context and instead of use sql lite we're using postgres so you should be able to type in use and see all the options npgsql is what we're going to choose and then configuration.getconnectionstring defaultconnection which is what we named our connection string default connection so when our app gets started up it's going to set up this db context service and do all of the magic it does to connect to our database so we're done with that now we're going to use entity framework core to scaffold a few things and it's actually what microsoft calls uh reverse engineering see if i can find that t framework core reverse engineering yeah so reverse engineering is the process of scaffolding entity type classes in a db context class based on a database schema so we're using all of these parts to scaffold stuff and the first thing we're going to do is we're going to scaffold a controller for our notes so we can use our db context in the model that we have and entity framework can actually create the entire controller for us the create the read the update and the delete it's pretty cool and to do that we need a few packages so we're going to have to add a few packages here first we need to install the entity framework cli so to do that just type net tool install global ef so you want to run.net tool install dash global.net ef and if you run that it's going to tell me i already have it cool once that's done we need to install something called net asp.net code generator this is what's going to build things for us so net tool install global.net asp.net code generator so once you have that hit enter and install that which i already have it and to be sure that uh that cli is working just type in net ef good you should get an output like that entity framework with this crazy looking unicorn if you got that you're good next we need to add three more packages this is going to help us do all our scaffolding so just follow along with me so dot net add package microsoft entity framework core dot design version 5.0.5 to keep with their standard so this is called microsoft entity framework core dot design so add that package next you'll want to add and by the way if you didn't know to add these things uh it would totally tell you when you try to run this scaffold or about to do it'll say hey make sure you install the design package these kind of things that's how i knew it but a.net ad package microsoft dot visual studio dot web dot co generation dot design and i'm assuming if you use visual studio instead of vs code you can you can do all the scaffolding like in in a nice gooey way so you can you can check boxes and say i want to pull in this i want to add this but i don't like visual studio it's really bloated and i like to use vs code and i like the dot net cli so we that's probably what this package is all about this is allowing us to do all this scaffolding from vs code but um yeah it's microsoft.visualstudio.web.cogeneration.design the version is 5.0.1 if you go to nuget and type this in there is no 505 so make sure you do 501 and hit enter to install that that's our second package our third package is dotnet add package microsoft dot entity framework core and instead of dot design we're gonna do sql server and then version 5.0.5 so hit return and that's our final package now when you installed that asp.net code generator you also got a command that you can run this is how we scaffold stuff so if i type in dotnet asp.net code generator of course with the dash between those it should run something well in my on my computer it says command not found so yours may yours may have worked yours may not have worked mine doesn't work for some reason it doesn't put that in the path when you install it so we have to type out the full path of course we can put it in the path but since we're only using this like once in a blue moon i'm just going to put in the full path if you have a windows computer you're going to want to put it's going to be in this location um user so whatever your user profile is dot dot net slash tools it'll be somewhere like that if you go to your user profile there'll be a dot dot net folder and then a tools in it so you'll want to prefix your command with that if you're on a mac like i am you just do home and then it's going to be in the dotnet folder and then tools and then you want to run the command so dot net asp.net code generator and by the way you can type in like dotnet asp.net code generator you can type this in and you can go straight to that command and there's a ton of things you can do with it uh it's really informative but if what i'm typing right now is like where is he getting all this stuff from i'm just getting it from here i'm basically just copy and pasting i'm doing a lot of work for you so let's go back and what we're going to do is we're going to scaffold a controller so we're going to take this this note model we're going to create a controller for it and this is going to do all the work for us so we're going to type in this command with the prefix on it and then we want a controller the name of the controller is going to be notes controller remember the controllers the controller is plural and the model is singular so notes controller we want these to be async calls uh they're gonna be it's gonna be an api which means there's not gonna be any views it's not gonna be rendering any views it's gonna be returning json and then we do an m flag which is what model are we referencing and that's note and then dc i'm assuming this is like database context that's my db context remember we added that db set in there and then finally a relative folder path is controllers that's going to put this in the controllers folder so make sure you have all that hit enter and watch this magic and that magic just left me with some errors all right so i found the issue um right here in the mydb context we passed in dbcontext which is wrong we're supposed to pass in my db context not what we're inheriting from but the actual context that we're using so make sure you make that change go back to mydb context and make sure it's of type mydb context not db context all right so change that and let's run this again sorry about that that was my error run this again and it should work fine all right so added controller notes controller so if we come back up here to controllers we see we now have a notes controller based on our note model so here we have a get route this gets all the notes so api slash notes is our get get notes route this gets individual notes which is like slash notes slash whatever note id which is five we have a put to update our notes we have a post to create notes and we have a delete to delete notes awesome that did all the work for us now finally we need to take um we need to take this model and relay it to our database so we need to create a migration and to do that we type dotnet ef migrations add and what do we want to call it let's call it initial create and we have to specify the context see in the data folder we haven't we have two contexts we need to specify which one we're focusing on and so we put dash dash context my db context so dot net ef migrations add initial create which is we can name that whatever dash dash context mydb context hit return and it should create a migrations folder with some migration files in it this takes our context in our model in what we what columns we want in the database and creates the code for that so we can push that code to our database and have it create all of that stuff for us so we have a migrations folder now we see we have an initial create file and if you look at this it goes create table called notes and the columns are going to be id title and description and they have this kind of information so it's going to be an integer nullable false all this other stuff and then if you want to undo this if you want to undo your migration it has a drop table call which is the down call in the up call so pretty cool so we have our migration but that hasn't migrated yet that just created the code for the migration and to do that we need to type net ef database update and then of course let them know what context mydbcontext and that's going to take this latest migration and it's going to create all of these columns it's going to create the table create the columns everything for us every time we do something add something to our database we need to create a migration and we need to update the database and then if we ever decide hey that messed up something we can roll it back it's really neat but if i click this it's going to update our database it's going to create the columns for this node model and essentially entity framework core works is like an orm it just maps our data to the database so build started build succeeded done okay we should be 100 ready to go now so if i open up postman create a new tab here um so let's run our app is our app running oh man hope this still works dot net run it should and we're going to go ahead and type 5001 slash api slash what was it um notes controller let's create a couple of notes first so let's go down to post put post so post is api slash notes api slash notes and we should be able to go to body roll change this to json oops should be able to do um not id we don't need that title my first note and [Music] description [Music] my first description we need to change this to post and we don't have any authorized routes and of course our app is running so uh we should be able to post this and create this new note and by the way if you look at the routes it returns a created at action which is get note and it's so it's going to return the note you just created that's what we should get back so if you hit send boom so it created a note id of one a title description now if we want to create another one let's change this to second my second description hit send and now we have id2 so we just created two notes we can go to get and see if we get those two notes back this gets all notes so hit send we get two notes back let's just get um note one awesome so our api is working and you have a fully functional react.net app now if you go to your project you go to the client app folder source go to your components create some new components build out your app do some api calls to your new routes create notes delete notes whatever you want to do and build out your app with your wonderful wonderful react skills now i'm not going to be building an app at this point that would make for a super long video i just wanted to get you up and running with the database entity framework showing you how to do migrations and ultimately how to work with react with a.net background now if you want to know anything else like the identity or how to do other things with these with reactant.net let me know i can do a future video but for now i think that's sufficient like i said take your react skills and build something beautiful

Channel: Travis Media

Views: 33,301

Keywords: react, reactdeveloper, reactjs, react fullstack, fullstack react, reactjs tutorial, dotnet 5, .NET 5, react and .NET, react and dotnet, react dotnet tutorial, react .NET API, react dotnet API, react and postgres, reactjs and .NET, entity framework core, .NET and postgres, dotnet and postgres, .NET 5 entity framework core, .NET mysql, build a fullstack react js app, .net tutorial for beginners, dotnet react, dotnet new react, .NET identity

Id: 2Ayfi7OJhBI

Length: 30min 12sec (1812 seconds)

Published: Sun Nov 07 2021