Let's build a CRUD app with Ruby on Rails and React.js - Part 1
VloĆŸit
- Äas pĆidĂĄn 30. 05. 2024
- đ All of the code from this video is available here: github.com/zayneio/open-flights
đ Github: github.com/zayneio
I realized after recording this that I was using the built-in computer mic the entire time instead of my mic đ€Š -- sorry for the poor audio quality/loud keyboard noises!
== Overview ==
Let's build a CRUD app with ruby on rails and react.js! In this short video series, we are going to build an airline reviews website using rails, react, and webpacker. We'll also be using some interesting technologies and tools like fast_jsonapi to build out our api, styled-components to add styling on the front end, react-router, axios, and more!
In this first video, we will be building out all of the back end functionality needed for our rails api. This will include setting up our models, controllers, routes, and serializers from scratch. At the end of this video, we will test out the API we built using an HTTP client tool (Insomnia, Postman, etc.). In the next video, we will start building out the front end portion of our app using react!
Timestamps
0:00 Intro
1:47 Creating our new rails app with webpacker and react
4:05 Creating models and database tables for our app
10:00 Creating seed data for our app
12:15 Using fast_jsonapi to build out our API
17:07 Routing
19:15 Creating our API controllers
29:30 Testing our API with Insomnia
Part 2: czcams.com/video/F0xErjOtJAQ/video.html
This video series came just at the right time, I needed it. The content is really great and taught very efficiently.
This is great! No side talk, fast and easy explained. Just what I needed
I love it! Thanks for showing us how to include the associated objects in the API
This series came just in time. Looking forward to the next ep.
Amazing tutorial! Can't wait for part 2. Hopefully coming really soon. Thanks đ
Thanks you for this! Starting a new position with RoR and have never used it, come from an Express background. This gives me a nice overview of the ways Rails does things.
You are literally the only person who knows how to teach. Thank you for this. I was able to re-create this app, thank you so much. I am now Rails-CRUD!
Hi, Zayne. Commenting just to thank you for sharing more about RoR.
Your way to explain is very clear. This is one of the few channels out there that has very high quality Ruby on Rails content. đ
Dude, i love your videos! great jog telling us how to do! Me and my friends from Brazil always watch your videos
Nice to see you're back doing tutorials đđđ
So here it goes a little tip:
If you throw the Rails' version around, in this case "Rails 6", it might help you get extra views/attention - because you deserve it đđ
Thanks for this! I understand the basics of rails and was looking for neat little projects to help further my understanding.
Thanks so much for this! The serializer is a freaking cool find!
Oh just started watching this. Have a class project to build a CRUD app with Rails/React. Perfect! Good Ruby content is hard to find on youtube!
Excellent tutorial zayne.. waiting for part 2.
Wow.. Excellent tutorial ! Thanks a lot for going through the whole process again in details in the README file, it's great !
âïžâïžâïžâïžâïž
Great tutorial. Learned a lot and waiting for the part 2
awesome tutorial ! i'm pretty new to rails and you're helping me a lot
thank you, the recording is still fine and was timely for my learning.
shared and saved!
Basically a really great tutorial that basically taught me all I needed to know about this kind of setup. Something that basically I can really use! Thanks!
basically.
excellent video my brother .... thank you for sharing your knowledge and teaching in such a clear way. Greetings from Colombia
16:04 thanks for the tip on using the fast_jsonapi gem. It's super convenient and I've been starting to incorporate that into my projects as well, saves a lot of boilerplate!
a lot informations about api serializers and api configurations that i didnÂŽt know yet! tks a lot.
Wow, awesome tutorial. Thank you so much đ
Great video, waiting for part 2 :D
Excellent tutorial building a CRUD app with ruby on rails and React.js
It really helped me a lot, thank you!
If your keyboard has eyes, it would have cried for sure!đ
Though
Nice Tutorial â€ïžâ€ïž
Its so good content, i learn much from this, thanks.
Awesome, easy and fast , waiting more , hope some thing about activeadmin
You are a hidden Gem Sir
This was very well done and incredibly helpful. Also I took a drink every time Zayne said "actually" and "basically".
I died.
Just messing with ya, thanks again for this!
Great tutorial, thank you đ
I'm from .net and .net core developer, but I going to change to RoR, thanks my friend!!! you have my like!!!! and my subscription
When is part 2 of this tutorial coming up ? PLEASE make it fast this one really helped me.
đPart 2 will be up this weekend.
Thanks for this lecture.
Great tutorial! But I think you should've made the slug field as an index since you are searching by it!
Awesome video, and very helpful. Thank you.
Only to address a DRY code, in Rails, we can use before_action to `set_airline` for example, replacing the `find_by` in every action we need it, with an only callback method, and defining in the top, `before_action :set_airline, only: %i(show update destroy)`.
Thanks for this hint. At first I didn't get exactly what you meant but after watching another video it became very clear. Using filters is very handy and really cleans the code. :)
Perfect tutorial! I haven't touched RoR for over a year and this is a nice and quick catchup! Just wondering what color theme do you use in VS code for RoR?
amazing. great. brilliant. thank you!
Thank you man. Teach ua ruby on rails, i really want this.
PERFECT! thank you.
You are changing my life
Ah man that's very cool to hear, thank you Danny! I just recently created a patreon account and excited to try it out as an experiment: patreon.com/zayne_ (Nothing there yet, but going to start adding extra code & videos to it going forward)
@@zayneio Alright, is this working for ya?
Nice tutorial! When you update the name of an airline, I think the slug for the airline doesn't get updated and stays the same as before.
Looks like the Airline.slug doesn't get updated when you update the Airline. Looking forward to the next tutorial!!
I think adding before_update :slugify in your airline model should help :)
zayne can you teach us about a simple ecommerce with safe payment gateway or something related.
cool. But aren't you missing "Update" from CRUD?
awsome tutorial. Can I ask if is this consider as a Single page app?
should I use the now unsupported fast_jsonapi from Netflix or should I used the fork called jsonapi-serializer?
AirlineSerializer.new(airline).serialized_json was throwing the error 'NameError (uninitialized constant AirlineSerializer)'. Happens to anyone else just exit rails console and run 'spring stop' then 'rails c' again and try again
Thank you so much for this!
@@marksponge9073 Nps man, happy it helped
@@yeabuddy9365 Thanks a lot for your comment....
thank you, it helps!!
@@GameCrawl SAME!
amazing video. big Like
I keep getting a 404 not found error when I test my api with insomnia, where do you suggest I look into?
Hi, what tool for API testing you are using? It looks very clear and readable.
It is Insomnia I guess.
is there any rails tutorial that using an existing Mysql database without doing any migration? thank you
how to add an env file for the javascript / react part of the project?
thank you.
Before you start, remember to install webpacker: 'rails webpacker:install'
At 10:23, line 36 and 42 should be 'airline: Airline.first'
u are a life saver thanks!
is fast jsonapi still applicable as I guess , we can code this in rails 7 without using fastjsonapi, or correct me , if i am wrong?
Wow. The speed at which you code up these rails apps is really amazing. You make it looks so simple.
I do have a couple of questions about the way you did things here:
1) Isn't it better to store the average of reviews on the airline model so it doesn't have to be called every time? (i.e. average it after_create and after_update of the reviews model and store a hard coded value on airline model in order to speed up processing?)
2) Why wrap the controllers in the api & v1 modules? What is that achieving? I've never seen a controller wrapped in a module like that.. let alone 2!
3) Why use the slug rather than the id to find_by in show for the airlines?
PS Thanks for another awesome tutorial!
Id like to know too. I am new to rails. About 3months.. please keep making videos about rails
Hey Jonny, thanks for the feedback! Let's see if I can answer a few of your questions:
1) Sure, you could store the average score on the airlines table if you want. As you mentioned, you would just have to then update this value for the airline record every time a new review gets added or an existing review is deleted or has its score modified.
2) I would say namespacing and versioning your api the way I'm doing here is pretty optional. If you don't like it or have your own way of doing it, definitely feel free to do it your own way! For me, I really like namespacing and versioning my apis in this way. It seems to make keeping everything organized as your app grows a lot easier. Everything for v1 of your api lives under /api/v1 in your controllers directory in this case, and doesn't have to pollute the main controllers directory with a ton of additional files.
3) Using the slug param instead of id here is totally optional, I just like being able to use the name of the resource instead of the id in this case in our routes. You can definitely skip this and just use the id if that is your preference.
Going back to your question around performance/optimization, it's worth mentioning that if you do use the slug like I am here, from a performance perspective, you would probably also want to create an index in your database for this column as you are using it to find and retrieve records.
@@zayneio Thanks for your reply. That's really helpful. I completely understand now why you'd want to namespace the API, but I thought you could do that without encapsulating the controller within a module with the name of the namespace. That's still something I'm struggling with a bit. The only way I've used modules up until now it's a place to store additional methods to be used in a controller or helper, and then include them into the file. So I'm still a bit confused about why the class is within the module and what behavior that produces compared to just having the controller unencapsulated.
Thanks again for your great content!
zayne is it a bad practice to separate react or any frontend app with a Rails API?.
@@18.michaelmaramag89 Nope! Not bad practice. A lot of people prefer doing it that way.
Hey great tutorial, I have one suggestion that can we use before_save instead of before_create callback ? because when we update the name of airline, it will just update the name column but slug will be same as previous.
Yooo! Nice dude! solved a major bug
Awesome video. Is part 2 coming out soon?
yep!
what version of rails and ruby use?
wow, just wow
thanks
This can be a business idea
I dont know if you will fix this on the next video, but you should put on model airline, before_update :slugify. To update de slug when update the name.
Can you do this tutorial again except with a louder keyboard please?
on rails db:create, I am having this error
We could not find your database: postgres. Which can be found in the database configuration file located at config/database.yml.
I looking for resources to understand How Rails works under the hood!
Can anyone suggest some resources.
Going through the source code is very tedious.
For ruby programming I have resources that goes under the hood working but I am unable to find any for Rails...can you help on that?
I am looking for WHY things work the way they do in Rails.
My description returns null when I try to PATCH, everything else returns though so weird?
hey what is your keyboard?
from some reason when running "rails routes" (in minute 29) i get:
toloads_in_dir': wrong constant name Api inferred by Module from directory (Zeitwerk::NameError)
.../rails-react/open-flights/app/controllers/api
is anyone familiar with that?
Thanks for the tutorial Zayne!
Hi, does the authentication works?
rails db:create is not working for me. Getting error: PG::ConnectionBad: FATAL: password authentication failed for user
In your database.yml try to include the username and password properties containing the same credentials as the user you created previously on the database as example below:
default: &default
adapter: postgresql
encoding: unicode
# For details on connection pooling, see Rails configuration guide
# guides.rubyonrails.org/configuring.html#database-pooling
pool:
username: etka
password:
I hope it helps someone. I solved the exact same issue using the source provided.
source: www.digitalocean.com/community/tutorials/how-to-use-postgresql-with-your-ruby-on-rails-application-on-ubuntu-18-04
If anyone else is having trouble with the command rails db:create -postgres version 14 was giving me a ton of problems so I downgraded to postgreql13 and it worked after that
Thanks a lot! what you could recommended instead "fast_jsonapi", on its github page has notice that "This project is no longer maintained!!!!"
I am using jsonapi-serializer instead... it is the alternative and up to date
@@ferrenac6 Thanks a lot!
I'm a complete newbie, does anyone know about this error?? Caused by:
PG::ConnectionBad: connection to server on socket "/var/run/postgresql/.s.PGSQL.5432" failed: No such file or directory
Is the server running locally and accepting connections on that socket?
Dude sry Im a absolute noob... What would be the requisites to follow this series ? PostgreSQL installed, Ruby, Rails, anything Else?
No worries! Yeah basically just that + node.js and yarn and I think you should be good.
Good, tutorial. One suggestion...your typing sounds really hard and loud compared to your voice. Perhaps you could move your mic closer to you mouth and away from your keyboard. Thanks
Thank you for this video. I use AWS C9 and I have trouble with the `rails db:create` step.
It produces the following error message. Any hints as to how to fix this?
`could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
Couldn't create 'react_v1_development' database. Please check your configuration.
rails aborted!
ActiveRecord::NoDatabaseError: could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
/home/ubuntu/environment/react/react_v1/bin/rails:5:in `'
/home/ubuntu/environment/react/react_v1/bin/spring:10:in `require'
/home/ubuntu/environment/react/react_v1/bin/spring:10:in `block in '
/home/ubuntu/environment/react/react_v1/bin/spring:7:in `tap'
/home/ubuntu/environment/react/react_v1/bin/spring:7:in `'
Caused by:
PG::ConnectionBad: could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
/home/ubuntu/environment/react/react_v1/bin/rails:5:in `'
/home/ubuntu/environment/react/react_v1/bin/spring:10:in `require'
/home/ubuntu/environment/react/react_v1/bin/spring:10:in `block in '
/home/ubuntu/environment/react/react_v1/bin/spring:7:in `tap'
/home/ubuntu/environment/react/react_v1/bin/spring:7:in `'
Tasks: TOP => db:create`
thanks !! very clear
As a beginner dude from React, Ruby on Drugs is much more complex.
Where is the Auth Part?
Your Videos are amazing! But not frequent enough :( If you had a Udemy Course? I would buy it. More Rails React please! And Thanks for the great content. đ
haha thanks man. I'm going to try to start uploading here more frequently going forward + going to try out adding some extra videos to patreon as well as a starting point. (And part 2 for this will be up soon!)
Would be great to see if you go over some possible fixes in case you run into errors. Not sure the best way this could be done, but I immediately got an error with the rails db:seed for the reviews
rails aborted!
NameError: undefined local variable or method `airlines' for main:Object
Did you mean? readlines
I have double triple checked the code and its so far in the beginning of the video, I am not sure what I did wrong. Migrations look correct and if I run Airline.first in the rails console, I know that portion of the db:seed worked.
oof. Finally found my mistake. I don't think your code on GitHub is up to date with the video and that's where I copied the seeds.rb file from. So if anyone else runs into this issue, in the seeds.rb file in GitHub, the "Airline.create()" method is not being assigned to airplanes.
buddy, provide also this video with resolutions like 480p and 720p
dude is litterally a god.
Please do one with nextjs and rails7
*starts video*
*angry auctioneer noises*
great tutorial, thanks a lot for sharing it, but please get a new mic or at least put the keyboard away from it, it makes a weird sound
is there a reason why you do not use the component rendering ability? pastebin.com/sCPiGzf6 it comes from the 'react-rails' gem. It also has very handy component generators github.com/reactjs/react-rails#6-you-can-also-generate-your-component-in-a-subdirectory. Looking forward to the react half of this application
I can't even install this on windows 10 because of countless issues
u get hired after building a reviews app?
good work but lot of bug.
Loudest keyboard
the keyboard sound is really unecessary
That is a mechanical keyboard sound, I have one as well, there is no way to turn it off, the mic captures the sound.