hello everyone today we're going to be starting a small little series on using react with rails rails will be the API back end react will be communicating with it through the API as the front end now the usual disclaimer applies here although you may think that you shouldn't use react because the flavor of the month with rails is hot wire or whatever we're talking about businesses do hire for this and I do get requests for people to cover this because they need to know it for like interviews that they're doing at companies or their new tech stack that they're trying to get familiar with so although it's not what you would personally use it is what you know companies out there are using this will sort of be an evolving thing I'll be you know adding more with each episode whenever I feel like doing this so whatever's here might not be the final product but this is what we have right now and this is what we'll sort of be building towards in the first couple videos that should be up on the channel so what we have here is just a quick little post crud app we have a bunch of posts here we can create a new post the form's not styled so let me zoom in so you can actually see it but we'll cover that later or you can say something hello world this is posted from the uh I don't know client right and before I click create here we can take a look at the terminal so this is the rails terminal right here as soon as I click create you'll see that we get a post to our oops or post to our rails terminal here it inserts into the database and then it just renders the slash post again because we're back onto the slash post page so this looks just like a regular uh like rails apps crud interface would look with a scaffold now of course because you're communicating from one app to another there's going to be a lot of overhead here and generally companies you know they consider that trade-off then they say it's still worth it because we have like a bunch of maybe we have like a bunch of react designers that are really good with react a lot of react devs we don't have anyone that like does the front end aspect for like a rails Tech stack and there might be like one or two full stack devs that think that they can do the front end but at the end of the day they can't they can't do it the same way that the front end devs can so the company makes that trade-off and then they say all right this is you know this is something that we can do and then we just have like the reactives working on this and they have to communicate with so it requires a bit more setup because you have to like make the react app and then every one of these like things that updates the page or the pages has to go through some kind of service that does like the API call to the rails app and that's fine you know it's just one of those things you have to deal with but we have like what I've tried to do is create something that looks similar to what you would see with a scaffold so that you can like mentally connect okay this is the edit functionality this takes me to the edit page just like rails would and then when I change this this will then take me to the update action in my rails app so if I come in here and enter a little bit and click update post you'll see this goes to our post controller update action I then have like the delete action right here that we can do so let's let's go back to the post list and for like this one two three I'll click delete you can see this goes to the post controller delete action so this is all running off of like a rails scaffold here but the react app is running off the API and it's trying to communicate with this which means that the react code is structured and a little bit of a strange way compared to how you might see it but at the end of the day it's a Javascript app they don't have standards if they did they'd be using like a real framework um don't tell the JavaScript those I made that joke uh but okay so how do we do this well in this video we're just going to focus on setting up the rails that because as usual that is the easy part that we can do very quickly so to do this I'm going to go ahead and CD out of my rails app and I'm going to do a rails new video space dash dash API so this API flag is just going to generate like our controllers and our models for us it's going to set up some API stuff for us but you're not like going to have the views inside of it so if we CD into our video and run a code dot to open this up in vs code we can then hopefully see if I move this over that we have like a traditional rails app structure here but we're going to be missing some stuff so like if I open up our app in our views you'll see that we only have the mailers in here because we're still going to have to send like emails or whatever but we don't have like our application layout and we won't have like when we generate our post scaffold we won't have our post views in here because that's all done through the API we'll come down here to our config real quick and we can take a look at our routes.rb again we don't have any routes in here right now what we'll do with this is we'll set up like a versioning thing for our routes to hopefully make that work better but the first thing I want to do is come into our gem file because we do to set this up a little bit differently one of the things is on like line 37 there's usually the rack slash cores gem which we're going to have to uncomment and then we're gonna have to run our bundle install command the reason why we do this is we use cores for cross origin resource sharing this is uh it's kind of Infamous this is usually the thing that's going to give you a problem if you're trying to work with an API so you uncomment the gem and then you're gonna have to come into your config initializers and your cores.rb and then here you're going to have to uncomment this block in here you can kind of ignore this first bit but the keys in here are the origins this is like where uh where your request comes from right so we could say like uh EG uh your react apps uh uh I don't know IP address right or URL so in this case because we're going to be running a v app I already know what the URL is going to be I can come over here it's just going to be this which you'll just have to trust me for now this is going to be coming from like 127.0.0.1 colon 5173 so this is one option but then you might also like maybe you're not gonna do that maybe you're serving this to everyone so you might want to say like your Origins are just asterisk so anyone can access your API in this case you've got to be careful because if anyone can access it just about everyone will and then you'll get a bunch of traffic that'll you know blow through any sort of bandwidth you might have so in this case we're just going to use like our the API of our Dev server and then maybe when we go to deploy this later we do like an Origins four hour I don't know like https colon slash super Dash cool Dash domain.com right something like that but in this case uh we're just going to keep it with our our Dev servers AP or Dev servers um IP address then in your headers down here this is something you might want to watch out for depending on your rails version it may or may not include the delete of course if you're going to be deleting resources you're going to want to use this delete right then we can come over to our rails apps directory again and then in here we can do a rails G scaffold because we're going to generate our post scaffold so we're going to have posts we're going to each post a title and a body of type text now implicitly rails gives the uh things without anything a type of string we can see in here it once again generates our test for us that's good our models and our migrations you're going to notice down here we only have like our routes and our controllers we don't have anything for our view so if we come over here because we'd use that dash dash API flag our views still don't have a post views in it right we do have our controllers our post controller and here we can change this however we would like to but this is going to pretty much be a one-to-one translation for how we're going to do things in our react app then in our models in our post.rb we don't have anything right now we can worry about that later but the last thing I want to do now is I want to come into our gem file and I want to say in our Dev and our test environments let's just add the faker gem because we're going to be using that and then we can go ahead and we can come into well let's do a bundle first sorry we can do a DB and then a seeds.rb and here we can do a uh post uh destroy all if we do end up seating and then we can do a uh I don't know let's say like create 20 posts so we'll just like GitHub copilot do this for us it'll do a post dot create with a title from Faker with a lorem sentence of you know three word count titles similar to what we have here and then a sentence count of three which means we're gonna have three sentences in the body for example we can then do a rails DB colon migrate because we created that scaffold we now need a migrated database then we can do a DB colon seed to seed our database and this will then set us up so now if we come into a rail C we can do a post.all and we can see all the different posts in here that have just some nonsense in the title in the body that we can then work with right the final thing we're going to want to do here as we go to create this we're going to start creating posts I'm going to go to the Post index page when we do we're probably not going to do a post dot all where we get them in like the order they were created in we probably want to do this in like reverse so I'm going to say order created at and then desc so that we can get these in the right order so now and then we can do a post dot order by created at the ESC you'll see that the first thing at the bottom here is going to be your oldest post and then our technically newest post which is the 20th one will be at the top here and then this will be the first one that we get in this list when we go to display it okay so that's pretty much it for the rails API portion here if you want to set up like your tests you're more than welcome to you can run your rails test command those should all pass out of the box with the API flag you come into your tests and like your controllers and your post controller and you come in here and you can make sure that whatever this is doing is what you would expect so maybe you want to say like test um should display posts in uh yeah descending order sure and you want to get the post URL and then you want to assert that the post dot order is is the same as your assigns uh posts right so if we do this then we can run another rails test we can just check if this is working and you'll see here that we have the no method error assigns has been extracted to a gem to continue using it add the gem rails uh controller testing to your gem file we can do that real quick we can just copy this right here and we can do a bundle add for this gem not the best practice to add it like this but that's fine it's just quick so we can show you how to do this we add it then we can do a rails test again to see if this test passes and now this test is passing so now we can check if we ever change this let's say we go back to post.all instead for some reason we have like a Epiphany where we think that's the right way to do things we do that we run our tests and we can see that we are no longer displaying the posts in descending order right so that's just one of the ways you can do this now the final thing I want to do here for this video is do a git add dot get commit Dash M and we'll say this is our init commit and I want to come over to github.new because I want to create a repository that we can commit to this so we can do this properly so we'll come in here and we'll just say this is our rails react app right so we'll probably have to put all of our code in here but that's fine we'll go ahead we'll click create repository and then we can come in here and we can copy the line at the bottom here this section right here this block because we already have an existing repos we just copy this we right click to paste hit enter and then we're good to go if we now come up here and we refresh should have everything set up for our rails react app so that's going to do it for part one of this mini series or whatever this turns into uh hopefully you got something out of this hopefully this is you know interesting for you if your rails reactive and hopefully this stops so many people from asking me to cover this because I've covered it like four times before but this time we'll do it properly we'll do the whole thing uh until you know you're you're ready and willing to do your your intern interviews or whatever you guys have going on but yeah it's gonna do it for me thank you so much for watching and hopefully I will see you in the next one