Create An API: CORS, SPA / Client-Side Routing Explanation

Рет қаралды 25,809

Күн бұрын

Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
In this video we learn how to create a basic API with Express. We cover how to make routes flexible with parameters and query-strings, how to work with incoming JSON, how to use Postman, how to make our API available from any domain (CORS policy) and finally we look at examples of how a front-end can leverage our API and client-side-routing to create a dynamic Single Page Application.
0:00 Intro
1:17 Getting Started
3:32 URL Parameters
7:57 URL Query-Strings
9:35 Receive Incoming JSON
11:47 Postman
16:41 CORS
25:05 Plain JS Client-Side Routing
31:38 React Router
37:43 Outro
This Lesson's GitHub Repo: github.com/LearnWebCode/youtu...
Playlist for this full series: • Brad's Bootcamp - Free...
Follow me for updates on new episodes:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 46

@codingwithkenny6492 2 жыл бұрын

You just got another subscriber! I've said this before, but you're an absolutely amazing teacher. I used to struggle on some of these concepts you're teaching us but thanks to your crystal clear explanations, I'm able to follow along throughout the entire video and actually understand what's going on! Hope you have a great day! :)

@paulwright205 3 жыл бұрын

Just totally brilliant - thanks Brad

@michaelwoodward1843 3 жыл бұрын

Dude you’re a beast. I’ve been following your teaching content for a little over a year now and I am just completely amazed at how much free education you have just given away. Amazing. Props. Thank you!

@runningfox4049 2 жыл бұрын

Hi Brad, just a quick thank you for these wonderful tutorials a. You somehow manage to explain things more fully whilst simultaneously making them easier to digest and understand. That's a huge credit to your genius. and to top it all off, much of it made available for free. A real hero to many of us. Keep up the great work my friend. Regards, Simon, from Leicester UK. home of the mighty foxes !!

@damirrekic4271 3 жыл бұрын

I truly appreciate your hard work. 👍

@karthickm8351 2 жыл бұрын

Thanks Brad, I learnt quite a lot from this video. Like someone said in one of the other comments, you are an amazing teacher.

@v518_mcpe2 2 жыл бұрын

Excellent, as always

@rishibhatia900 3 жыл бұрын

Awesome series

@friedegg8695 2 жыл бұрын

This is awesome. It helped me so much to understand how the frontend and backend works together which I have been scrapping my head on for the past 1 months, deleted my final year project 3 times, lost all hope. Thank you so muchhhhhhhhhhhhhhhhhh

@libertad83y 3 жыл бұрын

Brad you are a NBT! (Natural Born Teacher)! :-)

@akramkarani4083 3 жыл бұрын

the best bootcamp out there !!!!

@maxxinmaze4501 3 жыл бұрын

Thank you brad....you cleared all of my doubts!❤

@bz6304 3 жыл бұрын

wow... this is exactly what i am looking for. so helpful. Thank you. will get your course on udemy

@_rachid 3 жыл бұрын

Thank you

@makalamin552 2 жыл бұрын

Best tutorial ever! Thank you Brad for your hard work. Will you make a series on headless WordPress and Gatsby?

@Kinho88 3 жыл бұрын

wonferful ! thank tou so much !

@msvmanikantasrivishnu7788 3 жыл бұрын

Thank you....

@abessesmahi4888 3 жыл бұрын

Great content! Subscribed

@ghaxxx8883 3 жыл бұрын

I wish I can be a great teacher just like you one day :(

@whoman7930 3 жыл бұрын

I want to learn Next.js in the next video pleaseee!!!!

@WebDevMastery 3 жыл бұрын

You are Great ❣️, Please Create Videos on react Hooks , especially Context API , You can save us Many hours with your just one video Please Please

@LearnWebCode 3 жыл бұрын

Thanks! My "React For The Rest Of Us" course covers hooks, and especially useContext. Combining useReducer with useContext creates a really powerful way of working with state. I added a link to the course towards the top of the description of this video (with a coupon code with the lowest possible price).

@AgraGames 3 жыл бұрын

Hey Brad, thanks for the content! Do you intend to launch a premium course of a bootcamp like this one?

@harsharaman9394 3 жыл бұрын

Talking about CORS, even Postman blocks PUT requests before cors is enabled.

@sideshowlol 3 жыл бұрын

Thank you Brad. 🙏🙏🙏 The way you walk us through these explanations is fantastically helpful. I have your React Udemy course now. Just wondering... Because everything changes so quickly in the world of web development, is it best to learn React or VueJS first? Is there enough carry over from learning to use React to enable me to pick up VueJS quickly? I ask because I have the chance to get involved in a project that is using VueJS as the front-end framework and the devs are keen to use Vue because they say it is very lightweight and fast.

@saneyarkhazin7671 3 жыл бұрын

React is more popular and has more job openings. Personally I haven't used Vue, but from what I hear, its quite mature and really revolutionary. You can pickup anything you put your mind to. React and Vue both have their learning curves. Try both of them and see which one you like and stick to it

@talhamikaaiyl5483 Жыл бұрын

Instead of Postman, I use the Thunderclient extension in VS Code

@areyoukidding6274 3 жыл бұрын

Hi brad, @19:55 how is it possible to access your localhost from codepen? how does DNS find it as ur IP address? and one more question, the CORS is for protection of the server or for the protection of browser? because @0:27 u mention CORS belongs to browser but when you explain at CORS timestamp it seems like servers are actually blocking it.

@shahriarparvezshuvo4760 3 жыл бұрын

Where is my Guest? Is she alright? 🤔 I believe, A NextJs crush course after this, Would be a great content for us. 😍 Thanks again for the series. Stay safe, Brad. ❤️

@LearnWebCode 3 жыл бұрын

😂 I think she was sleeping during this one. Thanks! I'd like to do a Next.js video at some point 🙂

@shahriarparvezshuvo4760 3 жыл бұрын

@@LearnWebCode I don't know, whether there is a magic in your teaching style or not. Lot's of the things I don't get at the first time, after watching your video, it always feels like, they are naturally coming out of my brain while I'm coding. I'm not gonna experiment with Nextjs unless you're introducing me to it. 😂

@ManontheBroadcast 3 жыл бұрын

What is the purpose of the HTTP verbs (GET, POST etc.) when you can do whatever you want in the callback? ... I mean does a GET request has different properties from a POST request?

@dennisroshan 2 жыл бұрын

How did you ingest the react application into the express app? Can you explain that in detail please?

@felixn.995 3 жыл бұрын

Hey Brad! Need your help about your To-Do list JS App in the course on UDEMY Please! When the input is empty and I click "Add New Item, the item appears in the browser without text! ONLY Buttons appear! How to prevent this please? Thank you!

@LearnWebCode 3 жыл бұрын

Hi! We didn't add validation to that simple example, but do to so you could just wrap the action that adds it to the page inside an "if" statement and for the condition just use the input field's value, as long as it's not empty it will evaluate to true. You could also call .trim() on the input field value so that if someone hits the space bar and no real text, it would account for that as well.

@gbbowler 3 жыл бұрын

I get using Express to set up a local host/server, but what happens to Express and the Express code when you want to upload your site to a real web host? Do you have to change your code before doing so? Or what happens to all the code that used Express?

@LearnWebCode 3 жыл бұрын

Just like we use "npm install" to install Express and other packages, and just like we use the "node" command to start running the file/app on our personal computer, we also do that on the host/server. In the next video we'll use Heroku which automates the process for us, but essentially we give them all or our files, in a Git repo, (we can configure Git to ignore the node_modules folder) and the Heroku service automatically looks at our "package.json" file and downloads the files on their hardware and then starts up our Node/Express task for us as well.

@whoman7930 3 жыл бұрын

@@LearnWebCode I can't wait for the next video.... OMG!!

@gbbowler 3 жыл бұрын

@@LearnWebCode Thanks for the reply. That clears things up for me. I've only been at this a few months, and I've not heard that explanation before.

@mr.o5577 2 жыл бұрын

Hi Brad sorry to bother but I have a bit of an issue, can you help? I built a SPA just like yours but now I face the deployment problem, now, how can I deploy a SPA just like the one you build on netlify or heroku? My problem is that the app has a backend where the routes are and the app needs it in order to hit the routes, i deployed all the files to netlify and heroku but no good, what to do? If anyone besides Dom in here knows please help me I am at lost.

@thecscontent5110 3 жыл бұрын

I also do videos about coding!😁🎬💻

@bellamorgan3898 3 жыл бұрын

Thanks to *hacker_mosco* he help me to recover my Facebook and instagram account in less than 30 minutes time i really appreciate an very grateful you are the best he is a life saver

@SuperAlexey1983 3 жыл бұрын

Where was the cat?

@bellamorgan3898 3 жыл бұрын

Thanks to *hacker_mosco* he help me to recover my Facebook and instagram account in less than 30 minutes time i really appreciate an very grateful you are the best