Absolute legend, explained it way faster and clearer than other tutorials. Thanks a million.
@ArpanNeupaneProductions
2 жыл бұрын
Thank YOU for your support!
@selva1419
Жыл бұрын
Yes bro...superv explaination.. short and sweet
@praisennamonu76
Ай бұрын
for me who wants to connect a website front end with the backend, i disagree. for simple applications, yh. but it isn't enough to cover for large projects
@microflexe980
Жыл бұрын
thank you for the tutorial, this saves me a lot of time! AWiting for your tutorial on how to connect the database to the project
@dewanmasumanazneen8366
Жыл бұрын
This is the best video to get started with fullstack projects imo❤
@gauravrawat5891
Жыл бұрын
Best video present in internet
@TheTempest_
Жыл бұрын
thanks for specify some data in my mind)
@mrpropertiesgnt
Жыл бұрын
excellent bro.. i had doubt bro , without using node js can we connect mongo db ???
@ArpanNeupaneProductions
Жыл бұрын
Yes. You can if you use NextJS
@tpglitch
Жыл бұрын
You are setting it to localhost in react, but what about in prod environment where the api is on a different server
@samfights
Жыл бұрын
Thank you.. i'm trying to learn Typescript so using your code in TS i got this error "Property 'users' does not exist on type 'never[]'.ts(2339)".. so i added 'any' to 'useState', like this "useState([]);" but the data is not loading and in the console "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"
@emmanuelappiah1806
Жыл бұрын
I had the same issue about the Uncaught syntaxerror. Apparently, it means the json file was not written well. I wrote the same (correct) thing several times but the error persisted. Finally, I asked ChatGPT if there was an error and it also said it was invalid. It reproduced the correct json, which still looked the same to me. This time, it worked.
@samfights
Жыл бұрын
@@emmanuelappiah1806 thank you !
@michi19935
4 ай бұрын
I am getting the error doctype is not valid json when fetching the json data
@Rashomon69
Жыл бұрын
25 years a dev, here. This was just the right amount of detail. Quick, clean, and concise. Subbed!
@peterkerr9685
Жыл бұрын
Hi, Having a problem where in my API Fetch response, instead of getting the JSON with the users in it, I'm getting a message saying "You need to enable JavaScript to run this app.". Working in Chrome and JS is 100% enabled. My localhost:5000/api is giving the JSON data but that's just not getting across to the react app for some reason, and it sticks on Loading. Any fixes for this? cheers, Pete
@yonti353
Жыл бұрын
getting the same problem
@tienhuynh2435
Жыл бұрын
Have you fixed this bug ?
@recursion.
5 ай бұрын
were you able to fix this issue?
@damian8051
5 күн бұрын
Check you dont have a noscript tag in any of your pages. E.g create react app adds You need to enable JavaScript to run this app. to index.html by default I think.
@xinwang4973
2 жыл бұрын
for the mac users, if you have address already in use error,Apple introduced some changes for AirPlay on macOS Monterey. Now, it uses 5000 and 7000 ports. If you are using these ports in your project, you need to disable this feature. System Preferences > Sharing > untick AirPlay Receiver
@androidKingforyou
3 ай бұрын
i have a question, if connecting node api with react app is so easy why is there packages like CORS, what are they doing? I am asking this question because i was stuck on connecting backend with frontend and ran in cross-origin problem, i tried many method by passing different arguments to CORS in server side, adding parameters to axios but none of it worked. after following your tutorial i removed all the extra CORS code and made api call with axios and it worked. Can you explain about cors package and likely reason why it was not working
@dlove1219
Жыл бұрын
I'm in a coding bootcamp and your explanation was simpler and easier to understand. I learned more in your 12 minute video than in the 12 videos on this subject in my bootcamp. Thanks!
@ArpanNeupaneProductions
Жыл бұрын
Awesome!
@severance1073
20 күн бұрын
What bootcamp were you in???
@malikabdullah7709
3 жыл бұрын
Thanks for this amazing video. it helped me understand, how frontend & backend exchange data. Thank very much
@ArpanNeupaneProductions
3 жыл бұрын
You're welcome!
@nathanpetain9079
2 жыл бұрын
Literally fixed my lack of knowledge in 12 minutes! Thank you dude!
@ArpanNeupaneProductions
2 жыл бұрын
Of course dude!
@jasondemuro6882
Жыл бұрын
I have been looking for just a dead simple explanation for how to get a project like this started for a while and I just found this. Dude it’s awesome. Thanks for such a trimmed down streamlined explanation!
@aodhan2011
Жыл бұрын
Couldn't get it working, when I inspected the page it said javascript was not available, something wrong with the get or json file
@agentebimene3737
2 жыл бұрын
Wow!! Teaching what seems to be difficult to many in a very relatable and brief way such as this is not something that is common in the world. I must add that this tutorial of yours is priceless. Keep it up
@hiephoang7323
4 ай бұрын
11:42 ->11:50 u talk like you're rapping =)) what a sound
@ArpanNeupaneProductions
4 ай бұрын
lmaoo
@hequeda2190
Жыл бұрын
If anyone is having trouble around the 8 minute mark when react gives the scary red sign of "Objects are not valid as a React child (found: object with keys {users}). If you meant to render a collection of children, use an array instead.", you should put "setBackend(data.users)" not "setBackend(data)". This is because data is the entire object that encapsulates users, but all we need are the usernames. Hope this helps.
@bleulejour
2 жыл бұрын
Legend! super simple, concise and straight to the point. It would be nice to have tutorials about MERN from you :-)
@buksa7257
Жыл бұрын
Nice vid man! for my understanding: when you are putting this project live are server and client hosted in different places? or can you just upload them to the same host? how does that work?
@malkaf2234343434
5 ай бұрын
Anyone run into this error when trying to fetch api? VM30:1 Uncaught (in promise) SyntaxError: Unexpected token '
@gadoosher
2 ай бұрын
Yeah, I got the same thing. You end up figuring out what was going on?
@Gotostep2
Жыл бұрын
Express God Slaying Skills! EDIT: FYI, for those using vitejs, try this in your vite.config... export default defineConfig({ plugins: Whatever plugins you use... server: { proxy: { '/api': { target: 'localhost:9000', changeOrigin: true, secure: false, } } } })
@abubalo
2 жыл бұрын
Eloquently explained. No wasting of time. Just fun to watch.
@ArpanNeupaneProductions
2 жыл бұрын
Thank you!
@Kuzi19
8 ай бұрын
followed along, keep getting this error on the react page Uncaught runtime errors: ERROR JSON.parse: unexpected character at line 1 column 1 of the JSON data
@chidionoh
8 ай бұрын
im getting the same error and i have no idea why
@hrushikeshtawde360
9 ай бұрын
Legend bhai saw a ton of tutorials for hosting my api but yours was way too clean. Thanks a ton
@zoltancaputo9562
Жыл бұрын
Awsome ... Tks ! Clear, fast and it works !!! Added and sharing ....
@Bukosaure
2 жыл бұрын
Seriously, you need to get more popular. The quality of this explanation is outstanding. Clear and concise. Also, what's the VS theme? :)
@gianni16
Жыл бұрын
Hi ! As it's been 2 months you asked the question, do you now know what's the VS theme ?
@camyana3986
Жыл бұрын
@@gianni16 Dracula I believe
@gianni16
Жыл бұрын
@@camyana3986 Yes ! Thanks
@swapnilkulkarni4760
Жыл бұрын
bro.....your keyboard sound !!!!!!!
@gudinaf5009
2 жыл бұрын
Perfect Explanation, this guy knows what we are looking for in a video
@ArpanNeupaneProductions
2 жыл бұрын
Thank you!
@manjifera
Жыл бұрын
First time I got why to use node/express in simple words. KZitem filled with lot of scrap no one tells why to use node/express as backend with react as frontend.
@juguetestoys1137
2 жыл бұрын
Hi Master ! How can I deploy this in Vercel or netlify?
@theonewhowas7709
2 жыл бұрын
omg that keyboard sounds so horrible i would watch but keyboard kills me
@ArpanNeupaneProductions
2 жыл бұрын
lol okay
@JJ_Seno
Жыл бұрын
Not sure why, but when checking for the /api fetch request, there seems to be two of them and they both say "You need to enable JavaScript to run this app." which I do have enabled. When I was searching some fixes mentioned something about the proxy, and something I had to change because the client wouldn't run was in the package.json, I needed to use this instead: "options": { "allowedHosts": ["localhost", ".localhost"], "proxy": "localhost:5000" }, Is this invalidating my fetch request?
@WolfgangAmadeusMozart69
11 ай бұрын
This is still relevant even after 2 years (node has had many changes and so has React) for anyone wondering :) Thanks man
@Newstatejournal1
Жыл бұрын
Excellent! All the other learning resources I have come across make the assumption that the student already has the same mental picture of the files and folder setup as the teacher has. Your video is clearest to me so far because I see the folders and files in Visual Studio explorer on the left and although I am not 100% sure, I think those folders and files represent the actual folders and files on the hard drive. What must be installed where is more clear to me now.
@ArpanNeupaneProductions
Жыл бұрын
You're right!
@jeisongarzon6066
2 жыл бұрын
Dude thanks, a question, why it only works for me if I remove the proxy and in the fetch I put the full url? I clarify that I have to put this line on the server res.setHeader("Access-Control-Allow-Origin", "*");
@MrPneumatikos
Жыл бұрын
Thank you! I’m new, and I was able to follow along and my little app is working! At first I put the “proxy” in the wrong pkg json but the realized it has to be in the client package.json (duh! Lol)
@dirtman207
2 жыл бұрын
thanks a lot man, I was trying to connect my front with my back and I had no idea, this tutorial is very clear and concise, thanks for what you did
@ArpanNeupaneProductions
2 жыл бұрын
You’re welcome!
@JedediahHeal
2 жыл бұрын
Great video! But now I need to know how to use this example to service multiple pages on a website? For example, how would your App.js file change if you have multiple pages on the website? For example, localhost:3000/home, localhost:3000/about
@ArpanNeupaneProductions
2 жыл бұрын
You’d create new routes and call the API routes to get data
@JedediahHeal
2 жыл бұрын
@@ArpanNeupaneProductions Would your useEffect calls for each api fetch() call be in the App.js file? Or would it be in another file, like a components file, or a page file?
@ArpanNeupaneProductions
2 жыл бұрын
@@JedediahHeal In the video, I have it in App.js because I want to show how it can be used, but in apps that I’ve built, I have a useEffect for every page.
@fenix20075
2 жыл бұрын
I love this simple, straight forward description to display all these kind of powerful tools' functions and how it could be.
@lasithadulshan7357
Жыл бұрын
Thank you for saving my time ❤
@sukanyapathak2189
2 жыл бұрын
Thank you very much for this useful video
@ArpanNeupaneProductions
2 жыл бұрын
Glad it helped!
@ababyduck717
11 ай бұрын
Thanks, this was super helpful. Might be nice to see an updated version using Vite though, now that CRA is no longer maintained.
@yurari_san
Жыл бұрын
I am watching from Japan. The explanation was very easy to understand. Thank you so much for creating useful videos.
@fourn7wenty
Жыл бұрын
Awesome dude thank you. This made it way easier to get a start
@DeadBabyFoetus
2 жыл бұрын
The most concise video I've came across of connecting front-end to back-end, earned a subscriber!
@ArpanNeupaneProductions
2 жыл бұрын
Thank you!!!
@jamesorior
2 жыл бұрын
@@ArpanNeupaneProductions This video is the best. This is how development should work. Most developers don't know shit, they just like to flex their muscles and do simple things in a complicated way for ego purposes. Would like to see how you implement Cordova Frontend and Express NodeJs Backend. Sure it would be similar. Nice video again
@ArpanNeupaneProductions
2 жыл бұрын
@@jamesorior Thank you very much for your support. I haven’t used Cordova Frontend at all, however, you can use the same methodology described in the video. You can try finding a configuration file that can link with the Node backend via the API URL, then set up the backend the same way it’s set up in the video, and finally find a way to call the API in Cordova to display the data on the screen. Again, thank you for the support :)
@and_rotate69
Жыл бұрын
i came from 0 bg in express and react api's, left with 100% of new information sound and clear
@sitaladevidasi
Ай бұрын
Hi, Please help. On my localhost:3000 I'm getting "Index of/" with a list of my folders instead of the api data.
@TheInternalNet
7 ай бұрын
THIS IS THE VIDEO I HAVE SPENT WEEKS LOOKING FOR!! Thank you so much.
@ftwgaming0
2 жыл бұрын
How do you use shortcuts to create functions like at 3:00? 'rfce' suddenly becomes all of that?
@ArpanNeupaneProductions
2 жыл бұрын
ES7 Extension which you can install
@username..4674
8 ай бұрын
10:38 Anyone having a "Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties ..." error use optional chaining operator ? ie backendData.users?.map ( (user,i )=> ( {user} ) ) '
@eborders100
Жыл бұрын
thanks so much for this - I learned about web development through a bootcamp and they were so focused on just getting us up and running that we didn't get a lot of explanation to the specifics of what express was doing and how the client was getting data from the backend. This definitely cleared things up
@aodhan2011
Жыл бұрын
didnt work got you need to enable javascript to run the app error when checking network on client , dont have a clue how to fix it, any ideas
@aodhan2011
Жыл бұрын
server working like printing out on api page on local host and all
@recursion.
5 ай бұрын
were you able to fix this issue?
@fernandafortes3782
3 ай бұрын
Hi, this project help me a lot, thnaks. I'm working on a website in React and I'm creating a page news using web scrapping for the first time in React + Node js. Could you tell me if is possible deploy this type of project on Hostinger?
@chenxizeng1116
8 сағат бұрын
I have an exsisting website with express.js and mongodb, can i just replace the server.js and the configuration dependencies from my existing project for the react app that I just created following this tutorial?
@ArpanNeupaneProductions
3 сағат бұрын
@@chenxizeng1116 I'm not entirely sure so I cannot provide an accurate answer. However, you can always change the contents of your server.js file. If you're looking to keep the MongoDB connection, I'd recommend checking my video on that: kzitem.info/news/bejne/w56fq36NbqKge4o. Hope this helps!
@itzmickman7544
2 ай бұрын
Great video, you explained this fast but clear. Thank you
@sahilchowdhury2229
11 ай бұрын
This is crazy clear. I literally never comment on youtube videos, but I was working on something exactly like this and this was absolutely perfect! It's like you knew what I was thinking!
@soduno596
7 ай бұрын
Nicely simply explained. one thing though. isn't the /api exposed to the real world? I mean what stops a user from visiting /api? Im looking for a way to secure the endpoints, without user login system :)
@harsh_g2543
Жыл бұрын
how it should be manage both client and server to push it on github , because react already have git initialized, should i make two different repo ?????????????
@jarodmorris611
3 ай бұрын
Great tutorial. I have noticed that few tutorials explain how to deploy it to a live server. It makes sense considering how different servers can be, but it's frustrating for someone learning.
@guyunknown9123
Жыл бұрын
This is the ABCD of our beloved MERN stack right. Thanks
@Katsuchi23
Ай бұрын
Thank you very musch for this. I finally understand how to connect these two 😉
@SecretEyeSpot
Жыл бұрын
I attempted to follow along with this using Firefox and Chrome for my browsers. I received content-security-policy errors in the diagnostics, and never got my json object to show. I attempted to add a request header to my servers middlewares to no avail, but I'm also not sure what configurations are necessary. Is the express version released since this video incompatible with this tutorial?
@avdhootsawant6376
Жыл бұрын
Thanks for solving my doubt 💯👍
@sachinbhatt9047
7 ай бұрын
Sir please can you right the 2 Docker file for first for server and second for client. I am waiting for your message.
@robroy4046
Жыл бұрын
Hello,upon checking my network from dev tools, I saw the API was called twice? may I know how to fix this?
@tanakachidemo
Жыл бұрын
Thank you so much for a very clear and concise video. I have been learning a lot of these tools in isolation. It's good to see how they all fit together. Great work!
@shawnjohnson3433
Жыл бұрын
FANTASTIC! Great video! Very easy to follow. Keep pushing more videos.
@pasumarthiashik1099
7 ай бұрын
even after adjusting the code as like yours , I still get the same raw data into my localhost page rather than just the desired output. plz explain why is that happening?
@CaliburPANDAs
Жыл бұрын
i learned a lot from this video. thank you so much.
@OXIDE777-is6gs
Жыл бұрын
Awesome bro, thanks for the tutorial!!
@sujeewa8067
Жыл бұрын
Subscribed! The way you explain and demonstrate is really really nice. I love it ❤!
@oxwilder
11 ай бұрын
"rfce" didn't do that for me -- how do I prepare VS Code to make the instructions work?
@lukhayagoniwe227
9 ай бұрын
If you wanted to know how to connect React to Express and you watched this video, I don't understand how you did not like
@Mossy45
18 күн бұрын
This is such an amazing tutorial. Thank you so much!
@anukaransaharan525
8 ай бұрын
What if I use express generator inside the server folder will everything work same.
@aes0p895
Жыл бұрын
great now how do we actually show a jsx. this is the third video i've watched like this that just stops at a 3 property json object. the problem is rendering the jsx
@Toomirosariocentral
Жыл бұрын
Great video, thank you sou much!
@hamzadoudou4883
10 ай бұрын
this is very well explained well done bro, i would love you to do like a messaging app using react,express and socket io that handles also some posts
@מוצריםלרכב
Жыл бұрын
where can I add to my VSC project the express-react-project folder you opened at 0:25?
@drrandom1259
Жыл бұрын
Okay but how to send the react page to the client with express, without starting two different servers?
@RossPfeiffer
2 жыл бұрын
how do you configure a node server to deliver a react app?
@jebiboy
7 ай бұрын
May I know what are the installed extensions on your vs code? I like how the vs code fixes the spaces on your codes
@michaelhamilton8509
3 ай бұрын
what vs code extension do you have installed to show the folders with different coloured icons?
@shawn.builds
2 жыл бұрын
I watched a couple of tutorials and this was the best one. Thanks!
@ArpanNeupaneProductions
2 жыл бұрын
Glad I could help!
@ryclashing03
8 ай бұрын
Bro In my response I am getting html page I had done the same step has you have done one different is the backend folder I had created inside the react app folder is that a problem or what changes should I do
@bhawnaaggarwal6566
3 ай бұрын
What if i want a home page when hit to / route and login page when hit to /login page , how we will connect these ??
@Nxtureking
3 ай бұрын
what if i got an api from another source to view it in my port is this method going to be the same to use still a learner please need an explanation
@shawnjohnson3433
Жыл бұрын
Can you do a video showing how to connect this to AWS using lambda?
@PaulSelvi-cl4gr
Жыл бұрын
Awesome explanation sir..thank you
@annat3177
Жыл бұрын
great video bra
@andrewkazan293
Жыл бұрын
great video! can you make one on how you would deploy this kind of app?
@BobbyBundlez
Жыл бұрын
does not work. i have tried setting up a proxy in vite their way. react this way. every time it fails with an error 500
@jeremyrivera7615
Жыл бұрын
The actual GOAT. I was wondering what the heck I was doing well since i started an ambitious early project but you gave me my confidence back
@ArpanNeupaneProductions
Жыл бұрын
Thank you!
@carryon6918
6 ай бұрын
what to do if i need to connect my backend to mysql wotrkbench
@davidbakare827
Жыл бұрын
Thank you for making this as simple as possible.
@GunnerDante-yu7tr
Жыл бұрын
dependancies keeps installing in package-lock.json instead of package.json plz help
Пікірлер: 550