Setup A Ruby on Rails 7 API With React JS

this video is going to cover how to set up a rails 7 api and if you stick around i'll show you how to create a react app that communicates with this api it'll pull a set of books back from the api and display it on a page using the react state it's not a full react application but it should at least give you a starting point if you're planning on using a rails api with a javascript project so we're going to go ahead and we're going to start by creating the api right now so say rails new i'll call this the bookstore and then i'll pass in dash dash api and we do that because that's what tells rails to generate this as an api so it doesn't create the views or any of that other noise you know open up our bookstore rails app in vs code i have my terminal open down here i'll go ahead and close that we then go into our gem file and in our gem file we're using rails 7.0.1 like you can see right here and ruby 3.0.3 uh we'll then add a gem for the uh rack dash cors and this is just what allows us to white list our front end react application so that it can request data from the api but other people can't so it's just a set of security there then go ahead and run bundle actually we'll go ahead and we'll cd into the bookstore and then we'll run bundle which should install the gem for us we can then come into config and we can go into initializers and cores.rb and then in here a full screen visual studio code real quick we're going to uncomment this block right here and we're going to replace this origins example.com you can replace it with just an asterisk which will allow anyone to make a request to the api or you can replace it with like my autocomplete is suggesting here the uh url or the ip address of your front end client in this case react is going to start on port 3001 under localhost which i already know so i'm putting that inside of the origins of course when i move this onto a production server i'm going to have to change this to the actual url of the production server or the ip for it once we have this set up we can go ahead and save and then we'll go ahead and we'll generate our scaffold so for this i'll type oops i'll type rails g scaffold i'll actually full screen this and bump it up a couple times we want to generate a scaffold for the books and each book is going to have a title of type string and a body of type text so we can go ahead and hit enter on that and then wait for that to finish we can then minimize this again and we'll just run a rails db colon migrate command to migrate the database that will set up the back end of our back end the next thing we need to do is create the routes for this for that we can go into config slash routes dot rb and in here all we need to do is set up some name spaces and by convention it's a good idea to say you want a namespace for your api and you also want to version it so that people can access the different versions without you making everything obsolete when you change something so for that we'll say namespace colon api then we put this inside of a do block with an end at the bottom and then we need to do one more namespace for our version so for this we'll say v1 do and we can do an end right here and i'll save this and it'll run the code formatter this just puts our books inside of a scope namespace so that we can access it by going to for example slash api slash v1 slash books that of course isn't working yet because we haven't set up the actual namespace or started the server yet the next thing we want to do here is in the app folder in the controllers folder we need to create a new folder we'll call this api inside of api we'll create another new folder we'll call this v1 so you can already tell this is where our v1 controllers will go inside of our api and then there we actually just need to move our books controller into that folder do you want to move this into v1 yes i do now we open up our v1 book controller and at the top here where it says class blah blah blah we need to actually say capital a lower case p i colon colon capital v 1 colon colon that's just going to put the books controller inside of that namespace which is good and now we'll go ahead and move this back over because i think we're actually done with the back end for now you might have to update some of these redirects when you um do a create or an update action i do have a video on that i'll leave a link in the description for how to create like a full react api um but in this case our full rails api in this case this is good enough for the sake of this tutorial so the next thing we want to do is we want to come back to our console we're inside of our rails application in the console right now and in here we want to create the react app that will talk to this for this i'll type npx create hyphen react hyphen app and i'll just call this i don't know bookable just something to work with that'll go ahead and run the react generator for us okay now we can open this up inside of vs code if we go into our rails app and go down to bookable that will be our react application so inside of this terminal right here i'm going to go ahead and type rails s just to check if the server is working it looks like it is and then i'll try to go to this url and that looks like it's working the next thing i'll do is i'll open up the react app in another terminal window and inside of this other terminal window i will then run npm run start i believe to start the server and it says it's already running on 3000 you want to use another port i'll type yes and then it'll open that up automatically for me but it's going to do that in chrome which i don't want so instead i'm going to come over to my brave and i'll refresh this page and in here we can see that the react app is running it's of course not communicating with our api but it is running and actually now that i'm looking at this let's go ahead and let's create a book real quick in our api so let's open up our rails console and here i'll just type book that looks like it's working so i'll do dot create exclamation mark i'll give it a title that says my first book and a body that says hello world and i'll remove that space that looks like it worked let's change this one to my second book and i'll just say hello everyone in this and that just gives us some data to work with now we can go ahead and start this again and we should be up and running so if i refresh this here's our json data now let's go ahead into our bookable app open up our source and then go into our app.js inside of here i think we're probably going to just get rid of let me make sure we're on the right page get rid of this entire header file and i'll go ahead and minimize this i'll save that that should cause this to refresh and then in here we'll just make a h1 that says hello and that's just so we can see something on the screen the next thing we should do is actually set up our api request um so let's do that real quick let's go over to our node server right here we'll stop it and we'll just type npm i'll bump this up a bit npm i axios which is what we're going to be using for our api requests once that's done we can just type npm run start again and start up the application it'll once again ask us if we want to use a different port and then it'll open up a random window on my other monitor and now we're good to go now what we want to do is we want to import axios from axios so that's grabbing it from our npm you can also get rid of this import for the logo and then below this we actually need to import a different component so let's open this up inside of source i'm going to right click click new folder i'll just call this components and then inside of components i will make the books.js file and then for this i'll just type rfce i'll hit enter and that'll generate our books component i'm going to change this to capital b books if you're wondering how i did that rfce thing if you come down to extensions uh it is this one right here it's the es7 react redux graphql react native snippets extension it just allows you to type like react functional component rfc and hit tab and it auto completes that for you so let me move this back over and then give myself a bit more room over here we have our books here this is just where i want to display the list of books in the future but for right now we can just leave this alone and we have our app right here so our app obviously needs to import books from the components books folder and then inside of our function here or i guess outside of our function we want to declare our api url and if you had a store this would normally live inside of your store like let's say you're using redux you'd probably want to set this in there or something just so it's a bit more reusable but here we're just doing it with the const because it's you know similar to a basic javascript api in a sense so we have this const the next thing we want to do is create a function to actually get the api data for this i'll say git api data and then we'll just return you can see github copilot here is trying to help axios.git api url and then we'll do something like i don't know then response and we'll just do response.data something like that and then once we have that we can then come into our app and i guess we want to create a state for this and it already knows what i'm planning on typing which is fancy but also unsettling and for this it's trying to suggest react.ustate let's instead just use state and come down to this one which will do the import for the use state from react up here and then inside of this let's just initialize it to an empty array next thing we should do is use an effect which is also going to be an import from react so now we have use effect up here and then for the use effect we just want to create a quick function we'll say let mounted equal true get api data dot then and this data here will just say items inside of this if mounted then we want to set the books and then we can actually come down to here and we'll say return and we want to return mounted equals false we i don't think need this actually now if we come down here we can close this and because we only want this to run when the components created we can add in the extra empty brackets now inside of our return this is our actual render here because we have our api call but we need to do our actual render let's go ahead and let's say we have our books and we'll pass in our books as props and we'll just call them books in there we can save that and come over to our books a lot of books going on here very confusing i know i'm sorry for that we need to give our books props and then we can just go ahead and move into our div here let's start by saying h1 these books are from the api and then in here we'll just do props dot books dot map and i want to map each book so just use a high order function here and then we'll say uh let's return a div with the key equal to the book dot id because we know that rails gives it a book id and then we'll give it yep we'll give it a h2 title and it doesn't have an author but i'll accept this anyways and i'll change this to a body and then i'll just close the div for the key and that should be good i believe now if we refresh it should be getting the books from the api if you remember from our initial api over here if i full screen this and i zoom in a bit our initial api had a book with the title of my first book the body of hello world and it had a second title of my second book and hello hello everyone i believe if i come over here to our api and we just create one more just to check we can do a book dot create and we'll say my third book and i'll just change this to thanks for watching we'll go ahead and we'll create that and then we'll start the server again as someone hops onto halo infinite and then we'll refresh our react api and hopefully we'll see my third book thanks for watching if you want to see more of this i do know how to create a little bit more with the react app or we could do the crud actions and add in a store if you'd like that feel free to leave a comment down below but for now thanks for watching and i'll see you in the next tutorial

Channel: Deanin

Views: 40,626

Keywords: deanin, dean, Rails 7, API, Rails 7 API, Ruby on Rails, Ruby on Rails tutorial, Ruby on Rails 2022, Ruby on Rails API, Ruby on Rails 7 API, Ruby on Rails React, Ruby on Rails API React, Ruby on Rails 7 API React, Ruby on Rails 7 React, React with Rails 7, Rails 7 API CORS, API CORS, Setup a Ruby on Rails 7 API, Setup a Ruby on Rails 7 API With React, React JS, Rails 7 React JS, Rails 7 React, React Tutorial, rails api, ruby on rails 7, Rails 2022, Deanin Rails New, ruby

Id: sh4WrNGDvQM

Length: 15min 11sec (911 seconds)

Published: Mon Jan 10 2022