Full Stack React & LoopBack

Full Stack React & LoopBack [5] – Front & Back End Integration

alright guys so we have our react application complete for now we have a crud application that is working with our loopback back-end but they're

completely separate right now you can see that the front end is on 3001 the back ends on 3000 what we want to do is combine the two so there's a few things that we need to do a few steps we need

to take so this is this is where we left off in the last video we have the react server running here I have the loopback server running here so what I'm gonna do is stop the react server control see

we're still in the client source and then we're going to go into our package Jason for the react app okay make sure it looks like this and basically when we run when we run NPM build which is going

to call this script right here it's gonna call react scripts build whoops don't want to do that we call that it's going to take our source code and it's going to compile it into static assets

that basically we could just upload to a server okay it's gonna just create our client files now what we want is instead of just putting it into a folder called build which is what it will do by

default we want it to go into the let me just show you right here we wanted to go into this client folder which is part of loopback that's the client side of loopback alright we wanted to go from

here into there instead of just a build folder inside of here which will happen by default so we're just going to add on to this build script right here so we'll say react scripts build and we want to

just put in right here double ampersand and we're going to put in the CP command which is the copy command we want it to be recursive okay we want to take everything and we want

to copy it from build slash everything so everything that's in that build folder all the static assets that it compiles we want to copy it to dot dot slash client slash

okay it's gonna go outside of the client CLI into the client folder that's in the loopback server okay so hopefully that's clear again it's gonna take the build folder that it that it creates it's

gonna copy it into the client folder so let's just make sure it looks exactly like this and then we'll save this alright and then we should be all set we'll go ahead and close that up and now

down here we're gonna run NPM build all right now make sure when you run NPM build you're inside of the client source folder all right it wouldn't work anywhere else anyways but just make sure

you're in there and hopefully with what should happen is it'll put everything into that client folder and loop back so let's go ahead and run this I'm sorry it's NPM run build all right so it's

creating an optimized production build I'm not sure why that happened it's kind of weird maybe I should have ran it in the terminal alright so I'm just gonna guess that let's let's check

the files so if we go to meetups and clients or so it created the build this is what the static assets looks like you can see there's a folder called static and now let's check in meetups inside

the loopback client folder and there it is everything got copied alright I'm not exactly sure why vias code just went blank like that but it did move the files so I'm gonna go ahead and just

close up vyas code I guess and hopefully that worked now if we let's restart the server here if we restart the loopback server and we go to localhost 3000 not it not the Explorer

but just localhost 3000 we're still gonna get this screen okay and that's completely normal there's a couple things we have to do on the loopback side so what we'll do is

open up vs code again and instead of being in the client source folder I want to open up just the the the root folder so let's say open file open folder actually and we want to open just

meetups ok not this client source but meetups itself alright and you can see that the client folder now has all of our static assets in there from react and there's a couple things that we want

to change so first of all we want to go into server boot and then root j/s and right here where we have this router get slash we just want to get rid of this server loopback status that's that's

what's displaying this right here the status so we can just completely get rid of that and get rid of that comma so it's just nothing it's just the get slash

so that's the first thing and then we want to go into the middleware middleware JSON file and go down to files okay right here files it's just an empty object and we want to add to this

loop back actually should be in quotes double quotes so this is going to be loopback let's see hash static and then we want to set that to an object and we want to say params again should be in

double quotes so params and then here we want to put in money sign exclamation dot dot slash client okay so basically what we're saying is that the static page for this loopback server should be

the client folder which is this right here that we compiled all our react stuff – all right and that has the index.html file in it that we want to load so let's go ahead and save this and

let's go ahead and restart the server all right let's cross our fingers and let's reload localhost 3000 and there's our application all right we're no longer running anything that's in the C

at this the client source folder this is all coming from this the client folder on the loopback server alright so now what we want to do is test everything so you can see that the details page works

let's try to edit something so we'll say angular meetup we'll change it to let's say 41 Main Street save go to angular meetup 41 Main Street let's add something here we'll say PHP meetup and

that's going to be in let's say I don't know Sacramento and address 33 Brook Ave and save and there we go PHP Meetup alright let's make sure we can delete so now we

have a complete full stack react and loopback application now you're not going to want to edit anything in this client folder what you're gonna do is use your client source folder that's

here that's your dev environment okay so if you make any if you want to make any changes you'll obviously you know go into your components and do whatever you need to do and then you're just gonna

run again NPM run build from the client source folder and it'll build it into the client folder alright that's gonna be your workflow now like I said we're not

going to get into authentication just yet I'm pretty new to loopback I've built full I've built full stack applications with react and node node and Express I imagine that the

authentication with loopback all we really need to do is make a request to get an access token and then we can store that access token and we can use that to then make requests to

authenticated routes and and off making routes protected in loopback is really easy if you watch that other loopback video I was telling you about you'll see how we can do that alright so we'll

probably make it so that you can see the meetups publicly but you'll be you'll have to log in to add them alright and there's no promises when I'm gonna make that video I do have some other things I

need to get to including my next course since and some other YouTube stuff that I have planned but hopefully this gives you guys somewhat of an idea on how to mix react and loopback

at least in one way I mean you know people do different things in different ways but this is just one way so hopefully you liked it and if you want to go ahead and you want to try the

authentication yourself or you want to add to this application I'm gonna put the link in the description to the github repository so feel free to clone it fork it do what you want with it

and you know leave comments or whatever so please like if you liked this video subscribe if you're not and thanks for watching 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

In this video we will compile our client side source code (React) to the client folder in on the LoopBack server and combine the front and back end

CODE: Full app code
https://github.com/bradtraversy/meetupz

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia