Full Stack React & LoopBack

[Music] hey guys welcome to a brand new web development series in this series we're gonna build a full stack application

with react and loopback so loopback is an ojs API framework used to create REST API s and it makes things a hundred times easier on the backend by giving us a command line tool to generate all of

our models and routes it also comes prepackaged with back-end authentication now we're not going to implement the authentication part just yet we will build an app where we can

create read update and delete meetups through our react application and once we get to that stage I'll then look into continuing the series with with user authentication alright so this is the

app here this is the front end it's the react app we're using materialized CSS for our framework and you can see we're listing our meetups here and we can click on a meet-up and it'll take us to

the details page we can edit it we can delete it we can click down here to add a new Meetup let's say J s meetup and city now we're gonna add an address field as well because just the city

doesn't make much sense but we can go ahead and add that we have our little side menu here that pops out now it's on the surface it's very simple but of course whenever you're building a

full-stack application a lot goes into it ok not just the code on the back end in the front end but also meshing the two together ok so notice on this tab we have the loopback API Explorer running

and you can see we have our meetups we have all of our routes now if you have no idea what loopback is I would suggest going back and watching the video I did it on it a couple weeks ago where we

actually built this the same type of thing we built a REST API for meetups and the Explorer is really nice it's basically a client that allows you to fetch your your items for instance right

here if we go to get meetups and we click the button there try it out you'll see it'll fetch all of our meetups including the one we just created we can make post requests put require

also down here you can see we have a user model with all of our routes for authentication we have a login route logout and our back-end authentication is already set okay but like I said

later on when we get to this point here I will look into adding authentication on the front-end alright but it's basically already set up on the back end so loopback is gonna be the the easy

part of this series the hard part the the most of the coding we're going to be doing is in react alright and then I'm going to show you of course how we can have them both running on the same port

now during development they're gonna run on separate ports we'll have our back end on three thousand and we'll have the react application on on three thousand and one and then once we you know once

we're ready we'll go ahead and we'll compile the static assets into the client folder on the server okay into loop backs client folder and then we'll be able to run it as one application

alright and if you watch my mean stack front-to-back series then you know what I'm talking about we're gonna basically do that same kind of thing we're gonna make it so that we can just run a simple

command and it'll all get compiled into into the client folder from the source alright so that's what we'll be doing guys now I don't want this to be too many videos I don't want this to be a

you know a 20 video series so the videos will be kind of long I'm guessing maybe a half hour to 40 minutes or so per video so what we're gonna do now that I've given you an introduction we're

gonna go ahead and set up our back-end we're gonna set up our loopback API and like I said that's that's pretty much the easy part because it gives us a really nice CLI to work with we're going

to generate our meetups model we're gonna implement MongoDB meaning we're gonna install the connector so that it works with Mongo and then we're gonna go from there alright now like I said if

you don't know anything about loopback I would suggest watching that first video I will put a link in the description and I think it's only about 20 minutes or so alright so let's go ahead and get

started alright guys so we're going to be starting from absolute scratch I'm using vs code for my text editor and using the integrated terminal down here and I'll even though I'm using Linux

Ubuntu this is a cross-platform series you can follow along on Windows or Mac ok the two things that you need to have installed though before doing anything is no js' if you don't have that just go

to node.js or download and install it second thing you need is MongoDB alright if you're on Windows or Mac you can just download and install it I do have a video called MongoDB in 30 minutes where

I show you exactly how to install it on Windows if you're on a Windows machine if you're on a bun - this is a really good document right here to follow to install it you basically just run a

couple commands and then make sure you start up your server with sudo service Mongo dee start in fact I'm gonna go ahead and run that just to make sure that it's running alright so what I have

here is just an empty folder called meetups this is who we're gonna build our application so first thing we'll do is install loopback loopback has a global CLI utility a command line

interface and that's what we used to create our models and routes and that's how we integrate our data source or MongoDB in our case you can use loopback with many different databases but we're

going to be using Mongo alright so first thing we'll do is that will say sudo since I'm on Linux I need to say sudo and then I'm gonna do NPM install - JEE because we want to install it globally

so that we could access it from anywhere and then loopback - CLI all right that'll install it globally on our machine and then we can use the elbe command now one thing I

want to mention is if you're on Windows and you're using git bash instead of you know PowerShell or whatever you may have an issue when it asks you some questions with him you know when you have to use

the arrow buttons to go up and down if that happens just just use the Windows command prompt - when you run the elbe command alright so now that that's installed we're going to go ahead and

we're going to run lb so it's gonna ask us the name of our application meetups is good I'm gonna hit enter we want version three which is the latest version and then this is what

I was talking about on Windows get bash it might this might not work but you want the first option anyway which is API server it's a loopback API server with local

user authentication so we're gonna hit enter and it's gonna create all the folders and files inside of our meetups directory alright so now that that's

done you can see up here if we want to create a model we can do lb model and to run the server or run the app we can do no dot I think we can do NPM start as well actually let's take a look at the

package Jason yeah see there is a start script and if we look at the dependencies there's just a few things from loopback we have cores so that's so that we can use this with other domains

some dev dependencies es lint so not too much let's go ahead and run the server so we'll say node dot okay so it's gonna open it up on localhost 3000 now if we just go to localhost 3000 we're just

gonna see this object it just has the uptime this isn't what we want this is where our application will live our react application but right now we want to go to slash Explorer and that'll give

us the loopback API Explorer now any resources or models that we create will show up in this Explorer and it'll show us all of our routes now by default we have a user model that has all these

different routes so we can get users and add users and all that we can login we can get an access token so the backend authentication stuff is is is already there for us with loopback

and this would take forever to create with you know something like node and in Passport but like I said we're not getting into authentication just yet I still have to

look into that we just want to build an application where we can basically create read update and delete meetups and then we'll look into authentication so what we want to do now is we want to

generate a new resource for meetups all right so we can we can have all these routes and we can get them and in post and put in all that and that's really simple all

we have to do is run l lb model and that'll create it but before we do that we need to create the MongoDB data source all right so what I'm gonna do is just minimize this a little bit and

let's take a look at our files here so client this is where our react application will go but that's not going to be for awhile server if we look in here and we look in

this data sources JSON file you'll see that we have a data source called DB and this actually is just memory it's just using memory there's no database or anything like that and obviously that's

not what we want we want to use MongoDB so we need to add a new data source so we're gonna what we're gonna do is install something called the Mongo connector all right so to do that we can

just go to our command line let's stop the server with ctrl C and we're gonna do an NPM install - - save and this is called loopback - connector - MongoDB all right now well

that will get saved to our dependencies as well all right so now that we did that we need to set up the data source with that connector so we need to do LV and we

need to say data source and then we need to name it I'm just gonna call it Mongo DS or Mongo DS for a data source and then we're going to add the flag - - connector and then we want to put in

Mongo DB and enter all right so it's going to ask the data source name which is Mongo des by default let's click enter and then this part is really important you want to make sure

you go down to Mongo DB because you can use multiple different types of databases with loopback you can use MySQL postgrads or Redis Cassandra all these IBM databases

we're gonna choose MongoDB so for this here could this connection string URL I'm just gonna hit enter to skip that and then we're gonna manually fill in some of this stuff so host will be

localhost port is going to be the default Mongo port which is two seven zero one seven and then user and password and I'm just gonna skip and then database let's call this C will

just call this meetups - app alright and now notice that the data source JSON file now has all that stuff in it alright now one thing I want to do here is I'm gonna change the Mongo

des this is this was temporary here or at least this part two DB and then I'm gonna get rid of this DB okay and the reason I'm doing that is because this is referenced in a few different places

around the server and I don't want to go and change all that so I'm just gonna change this to DB because we're not using that memory anyway so let's save that and just to show you if we go to

model config you'll see that that DB is referenced in a few places so as far as the other files on the server once we create a model for our meetups we'll see the the resource for that but this stuff

we have a config file where we can change the port and stuff like that the route right now it's gonna be slash API where we make our request - for instance it'll be slash API slash meet-ups then

we just have some middleware stuff and our model config alright so let's go ahead and create a new model called meetups so we're gonna go down here let's clear this out and to create a

model all we have to do is say lb model and it'll ask us some questions the model name we're gonna call meetups and we're gonna select our datasource notice how MongoDB is already there for us

that's because we already installed it and set it up so we're going to choose that we're going to choose persisted model it's gonna ask if we want to expose the

Meetup the meetups resource to the rest api we want to say yes or why enter custom plural form so if we wanted to put something else for the resource name for the plural form we could do that I'm

just gonna hit enter and then calm in our server we're gonna choose common and it's gonna ask us for our properties so we know that with our meetups we want them to have a name a city and an

address so let's go ahead and add name it's gonna ask the type it's gonna be a string so I'm gonna hit enter required I'll say yes and enter ok the default value leave blank for none so that's

what we want blank so we'll click enter and then it's gonna ask us for the next one which is gonna be City same stuff string required yes blank yes the next one will be address which will be a

string I'm gonna make the address not required so we'll put an N and enter ok once we have all the properties we want we can just hit enter and it'll take us out of that screen all right so now if

we go over and we look at our server folder we should have enough server folder our common folder we now have models and we have meetups Jason ok this is where all the the fields that we just

created reside you can see we have our name city and address and the types and stuff alright so this is kind of like kind of like a mongoose schema if you've ever worked with mongoose now any any

any access control that we set for instance if we want to say that you know only authenticated users can read or write to meetups and stuff like that that's gonna go in this array right here

this ACLs but like I said we're not gonna get into that just yet so if you are interested in seeing how to add permissions and stuff like that I would suggest watching that other loopback

video all right but we're not going to get into that in this in this series just yet so let's go ahead and close that up and then if we restart our server so we can

either do NPM start or node dot and then we go back to our Explorer and reload now we have a meetups resource so if I click on that you'll see that we have all these routes for our meetups we

didn't have to do anything to create these we have get route so we can fetch them we have a post to add them put in patch to update we have a delete so we can get counts and there's a lot of

different routes that were created so if we were to go to the get right here you'll see it has all the fields and we were to click try it out that'll actually fetch all the meetups in the

database okay it's gonna make a request to this URL right here and you can see the response is just an empty array which obviously is that's correct because we haven't added anything now we

actually can add meetups through this interface so let's go to post meetups and then down here where it says data we're just gonna put in some curly braces and we're gonna put some jason so

we'll say name make sure you wrap the keys and the values in double quotes so we'll call this angular meetup all right so we know we have a name we have a city so for city I'll just say Miami and then

we also have address so for address I'll just say 40 Main Street all right once we have that data in there we'll go ahead and click try it out and makes the post requests and we get our 200

response which is good and now there's a meetup in our database alright so if we were to go up to get and click this again let's try it out you'll see we'll get our angular meetup alright let's go

ahead and add one more so we'll go back down to post meetups and we'll change this to react meetup and let's change up this info will say this is in Boston and we'll say I don't know let's say to

Albany Street alright so that went ahead and added it now if we go back up to our get and click on is I get yeah and click on try it out we get our two meetups

all right we can also go to localhost for three thousand slash API slash meet-ups and there they are so this is the URL that we're gonna make our request to

from our front-end react application okay and notice that an ID is also created automatically now just to show you that this stuff is definitely in our MongoDB database I'm gonna go ahead and

open up the Mongo shell you guys don't have to do this I'm just showing you and then we'll say show DBS and we have nevermind the meetups that's the first one I created we're looking at this

meetups app so let's say use meetup stash app and again you guys don't have to do this and then we'll say show collections we have a meetups collection so we'll do DB dot meetups dot find and

there they are there's our angular and react meetup so we know the stuff is getting stored in Mongo so let's ctrl C get out of that and I'll close this up

alright so believe it or not our back end is done that's how that's how easy loop back is to work with all right even just just to create these routes for the meetups if we were using you know just

node and Express it would take quite a while we need to implement something like Mongoose we would need to create our models we would need to create our schema we'd need to create all of the

routes and and connect the model to each route and make our queries and and we'd have to do a lot of different stuff but loop at make makes that really easy alright so now that we have our back-end

set up in the next video we're gonna go ahead and we're gonna start to setup react hey guys if you've been watching my videos for a while and you really like

what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for

discounts for you to me courses personal support and more so check out the patreon link in the description below for more info