Create Your First API Using Rails 6 And Serve It To A Javascript API User | Week 4 Part 1 - 20in20

[@Deanin]

Bit of a strange one this week. Originally I was planning on doing a React project, but I'm pushing it back to next week because I thought it might be fun to use an API for it, which means first we have to learn how APIs work! Also uh, thumbnails are gonna be done in a new style because I just learned how to cut myself out and I thought this was hilarious so we're gonna just keep that gag going until I get bored of it. Hope this helps! Remember, you can follow me on Twitter & Instagram @deaniocom There's also a patreon @ patreon.com/deanout And channel memberships are now available? So I guess I have to figure out what those are and how those work, even though I'm nowhere close to 30k subscribers lol.

[@ErtugrulSEYHAN]

I'm not type of a person who does comments on KZbin videos, but hey, what you are doing here deserves a lot of compliments. I would like to thank you personally for all of the efforts you put into this. You rock Dean!

[@Deanin]

I really appreciate it! I'm super happy that people are finding value in these videos!

[@user-ft2md2gd4s]

this is the most useful content to start with rails APIs and build real stuff

[@anissmarrouch282]

bro honestly your tutorials are the coolest, i was wondering how this is done and here is one of your videos again. awesome job brother and thank you !

[@Deanin]

I appreciate it! My team had to make an API at work actually, and thanks to making this tutorial I almost knew what they were talking about most of the time haha.

[@martinyuvone]

Thank you for this tutorial! Simple and easy to start building APIs with Rails. Just want to point out that I struggle to make the tasks list show on the HTML, and later found out that responses.length was ... I checked for a solution and supposedly, as responses is an object and not an array, it doesn't have that length property. I solved it using the following iteration to count the tasks, not much efficient but it works. var lenght = 0; Object.keys(responses).forEach(function(key) { length++; }); Please comment if there is another solution, or if any had the same issue. Thank you!

[@lacaravanepasse]

Great video, thanks!

[@DeepakKumar-jy7wo]

ahh haa i was going to talk about api , hope we in future we do deployment of rails in docker and kubernate :)

[@Deanin]

I'll add Docker and Kubernates to the list! Glad the API is something helpful! :)

[@DeepakKumar-jy7wo]

@@Deanin Just grow your list ,this even i haven't tried implementing and this should be fun , implementing shopify Liquid to implement in rails :) \m/

[@amanakeet]

Could you please make a tutorial with a realtime crud api using django ? Thatd be much appreciated

[@daniscanada7155]

thanks for your videos they're so useful and easy to follow. Your voice sounds to me like José Mourinho's voice.

[@ehaughin]

Hey boss, really interested in the automatic rubocop. Do you have a container running or a launch command to watch and amend as a daemon? I’d like to run it in a docker container mounting the codebase in a shared volume.

[@sagen_says]

After I complete each step, make sure there is no typo and save it, when I run "responseText" in the console of chrome, only "Uncaught ReferenceError: responseText is not defined at :1:1" will appear, why? thanks

[@sagen_says]

Is the index.html and application.js in a completely different directory than the rails repo?

[@lindenmeadow]

I keep getting the following error message: No 'Access-Control-Allow-Origin' header is present on the requested resource. How can I fix this?

[@larrydanso1129]

This is probably a CORS error issue. Have you checked if you have allowed CORS in your rails application, it can be found in initializers/cors.rb. You should uncomment the code there and put '*' in place of the example url. But ideally way is to google it and find ways in stackoverflow. But I'm confident I just did a stackoverflow answer session here. Hahaha. hey Super work Deanin, learning a lot

[@Deanin]

10 months late on my part, but this answer checks out. You can either put an asterisk, or the address that you assume will be connecting to your API. Say you're running your GUI frontend on localhost:8080, then instead of "*" for the allowed origins you'd put "localhost:8080" This is covered a lot more in parts 15-20, where I go back on an API binge with Vue clients connecting to a Rails API. And Larry I'm glad the videos are helping! ❤️

[@milop3152]

tried this tutorial, am currently facing an error "Access to XMLHttpRequest at 'localhost:3000/todolists' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." I do understand this is regarding the cors gem, but have followed the same steps in the app.rb config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource '*', headers: :any, methods: [:get, :post, :options] end end still facing the above error, plz help me.

[@milop3152]

sorry, the error was fixed . my node js was not updated hence got the error

[@Deanin]

Hey, you don't need to apologise. It happens to all of us! Glad you got it figured out.

[@lucky765]

Hey Deanin, first thanks for the vid. What i was confused about is that u put the config of rack-cors into the config/application.rb, but there is an initializer for rack cors under config/initializers/cors.rb . Is there a reason you do it that way?

[@Deanin]

I must have missed that in the GitHub page, I'll fix it in the next episode! Thanks for catching that, and sorry for the confusion!

[@lucky765]

@@Deanin Well i looked over the github page ans they dont show this. Dont know if this comes with Rails 6 because they only catch on Rails 5

[@Deanin]

Oh okay, that might be why. Thanks for letting me know though, this will help other people too!

[@sassani134]

Neat video as always. What is the difference between xmlhttp request and fetch?

[@Deanin]

I'm not too familiar at this low of a level, but my understanding is that Fetch uses promises and is generally going to be easier to use, while the older(?) Xmlhttprequest is going to be more verbose, but more flexible for more involved error handling. (citation needed) So basically, most of the time you'd probably want to just use fetch. I just wanted this project to be super low level and basic so that people can get a clearer picture of how things are working. I'm not sure how well I did though haha.

[@RobertThomasrob_thomasa10]

Great vid, will you be added auth to it?

[@Deanin]

Yeah I'll be building to something like that. Not this week, but in one of the future 20in20 projects I have token authentication planned among some other things.

[@fabiantorres695]

where is part 2?

[@Deanin]

I think this should be the link to part 2: kzbin.info/www/bejne/i4jYdoJ8gqZsipI