{"id":6250,"date":"2020-05-10T17:39:42","date_gmt":"2020-05-10T17:39:42","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6250"},"modified":"2020-05-10T17:39:42","modified_gmt":"2020-05-10T17:39:42","slug":"mern-stack-full-tutorial-mongodb-express-react-node-js","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6250","title":{"rendered":"MERN Stack &#8211; Full Tutorial (MongoDB, Express, React, Node.js)"},"content":{"rendered":"\n<p>This is based on the video by FreeCodeCamp.org below and also I cloned the git repository to use their code for testing <strong><a href=\"https:\/\/github.com\/beaucarnes\/mern-exercise-tracker-mongodb\" target=\"_blank\" rel=\"noreferrer noopener\">HERE<\/a><\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)\" width=\"678\" height=\"509\" data-src=\"https:\/\/www.youtube.com\/embed\/7CqJlxBYj-M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I&#8217;m interested in playing with the <strong><span style=\"color:#cf2e2e\" class=\"color\">React front end<\/span><\/strong>, as I&#8217;ve been playing with the <strong><span style=\"color:#cf2e2e\" class=\"color\">node.js backend<\/span><\/strong> so I felt that this tutorial was an extension.  After getting my head around the Backend stuff and seeing how useful it can be I&#8217;m now interested in looking at using a Front end programme like react to consume information that I&#8217;m pulling in from the back end. <\/p>\n\n\n\n<p>I&#8217;m still writing the article on Puppeteer and web scraping and felt that this was an extension of what I&#8217;m doing. <\/p>\n\n\n\n<p>There was another video on a covid data display using reasct here, I may explore that later, another tutorial, also long about 1.5 hrs on front end stuff.:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/khJlrj3Y6Ls?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">MERN Stack &#8211; MongoDB, Express, React, Node.js<\/h4>\n\n\n\n<p>I&#8217;m also interested in using MongoDB remote cloud DB for storing data, so the tutorial for this is great too. Following his tutorial I connected to mongoDB Atlas cloud and used the Google Cloud as the place to spin up the instance and logging in was pretty simple. I have now connected to the database from the backend of the code. <\/p>\n\n\n\n<p>I used <strong><span style=\"color:#cf2e2e\" class=\"color\">>git clone https:\/\/github.com\/beaucarnes\/mern-exercise-tracker-mongodb.git<\/span><\/strong><\/p>\n\n\n\n<p>In the selfie app I copied from code train there was a deficiency with storing the DB in a file on the Heroku cloud node.js runtime as I couldn&#8217;t access that information at a later date, it was just sitting onm that server instance. I could overwrite it or see it but could not copy it elsewhere. <\/p>\n\n\n\n<p>So looking at other methods of connecting a DB to a deployed app is useful. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Getting backend server and DB connected and running<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"439\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-1024x439.jpg\" alt=\"\" class=\"wp-image-6251 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-1024x439.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-300x129.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-768x329.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-1536x658.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-2048x877.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-50x21.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-117x50.jpg 117w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-100x43.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-233x100.jpg 233w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-1494x640.jpg 1494w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-640x274.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-1793x768.jpg 1793w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_02_43-Coronavirus-Update-Live_-4097513-Cases-and-280167-Deaths-from-COVID-19-Viru-1920x822.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/439;\" \/><\/figure>\n\n\n\n<p>From the github repository I had to create my own <strong>.env<\/strong> file to put the URI link into, and it is connected to the server. The video was done in June 2019 and there is already depreciated code in it, so that is why I&#8217;m a bit wary of learning things like node &amp; react, the environment is so dynamic, you leave it for a while and then come back and things have changed. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"221\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-1024x221.jpg\" alt=\"\" class=\"wp-image-6252 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-1024x221.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-300x65.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-768x166.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-1536x331.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-50x11.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-232x50.jpg 232w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-100x22.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-464x100.jpg 464w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code-640x138.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-12_25_42-server.js-mernExerciseTracker-Visual-Studio-Code.jpg 1539w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/221;\" \/><\/figure>\n\n\n\n<p>Also a bit twitchy as I&#8217;ve cloned the github repository and I&#8217;m not sure if the package.js has the latest npm packages that I&#8217;m pulling in. Still, I&#8217;m more interested in testing the app and exploring its use, if it does seem practical I may need to go back and build the app from scratch. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Users and exercises- adding\/checking database<\/h4>\n\n\n\n<p>I used postman to do a <strong>post request<\/strong> to : <strong>http:\/\/localhost:5000\/users\/add<\/strong> and also a get request to :<strong>http:\/\/localhost:5000\/users<\/strong> to check that the new user was added. It worked fine. So users database buerno. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"438\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-1024x438.jpg\" alt=\"\" class=\"wp-image-6255 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-1024x438.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-300x128.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-768x329.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-1536x658.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-50x21.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-117x50.jpg 117w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-100x43.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-234x100.jpg 234w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-1495x640.jpg 1495w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman-640x274.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_19_40-Postman.jpg 1747w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/438;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"477\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-1024x477.jpg\" alt=\"\" class=\"wp-image-6256 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-1024x477.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-300x140.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-768x358.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-1536x716.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-50x23.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-107x50.jpg 107w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-100x47.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-215x100.jpg 215w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-1373x640.jpg 1373w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-640x298.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman-1648x768.jpg 1648w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_20_00-Postman.jpg 1719w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/477;\" \/><\/figure>\n\n\n\n<p>The exercises worked wioth pos to http:\/\/localhost:5000\/exercises\/add and get to http:\/\/localhost:5000\/exercises<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"393\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-1024x393.jpg\" alt=\"\" class=\"wp-image-6258 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-1024x393.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-300x115.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-768x294.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-1536x589.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-50x19.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-130x50.jpg 130w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-100x38.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-261x100.jpg 261w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman-640x245.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_25-Postman.jpg 1667w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/393;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"479\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-1024x479.jpg\" alt=\"\" class=\"wp-image-6259 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-1024x479.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-300x140.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-768x359.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-1536x719.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-50x23.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-107x50.jpg 107w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-100x47.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-214x100.jpg 214w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-1368x640.jpg 1368w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub-640x299.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_43_46-Learn-the-MERN-Stack-Full-Tutorial-MongoDB-Express-React-Node.js-YouTub.jpg 1614w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/479;\" \/><\/figure>\n\n\n\n<p>so the database has been populated with data from the backend. <\/p>\n\n\n\n<p>I also tested the id endpoint adding an id onto the exercise or user to get a specific record in the library (for testing)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"618\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-1024x618.jpg\" alt=\"\" class=\"wp-image-6260 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-1024x618.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-300x181.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-768x464.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-50x30.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-83x50.jpg 83w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-100x60.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-166x100.jpg 166w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-1060x640.jpg 1060w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman-640x386.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-13_47_49-Postman.jpg 1072w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/618;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"460\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-1024x460.jpg\" alt=\"\" class=\"wp-image-6261 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-1024x460.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-300x135.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-768x345.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-1536x691.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-2048x921.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-50x22.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-111x50.jpg 111w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-100x45.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-222x100.jpg 222w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-1423x640.jpg 1423w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-640x288.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-1708x768.jpg 1708w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-10-17_11_26-Data-_-Atlas_-MongoDB-Atlas-1920x863.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/460;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Getting React to run<\/h4>\n\n\n\n<p>After getting the back end code and database running I started to try and run REACT. I installed it globally on my PC but it wouldnot run when I tried <strong><span style=\"color:#cf2e2e\" class=\"color\">>npm start<\/span><\/strong> , I just got a load of errors. <\/p>\n\n\n\n<p>I decided to make a fresh directory and install React from the start with <strong><span style=\"color:#cf2e2e\" class=\"color\">>npm create-react-app<\/span><\/strong>  this command installs react and creates directories and puts boilerplate code in for a basic app to run (the one with the react logo. That went fine and worked, no problem.    <\/p>\n\n\n\n<p>But my main mern app was not running, I messed around with trying to get it going and got a lot of errors. In the end I decided to bite the bullet and load React again using <strong><span style=\"color:#cf2e2e\" class=\"color\">>npm install react<\/span><\/strong> and then when I used <strong><span style=\"color:#cf2e2e\" class=\"color\">>npm start<\/span><\/strong> it worked fine. <\/p>\n\n\n\n<p>I stuffed up a bit, I initially used<strong><span style=\"color:#cf2e2e\" class=\"color\"> >node server.js<\/span><\/strong> to run the backend server file that connected to mongoDB cloud DB and to the other JS code for CRUD commands for the exercises\/users., but then changed the terminal to the React directory <strong><span style=\"color:#cf2e2e\" class=\"color\">src><\/span><\/strong> and ran <strong><span style=\"color:#cf2e2e\" class=\"color\">src>npm app.js <\/span><\/strong> but what I&#8217;d done was shut down the node> server.js and I needed that running.  To check, if you go to <strong><span style=\"color:#cf2e2e\" class=\"color\">localhost:5000<\/span><\/strong> in the browser the<span style=\"color:#cf2e2e\" class=\"color\"> <strong>>node server.js<\/strong><\/span> should be running, then you need to go to another tab in the browser to <span style=\"color:#cf2e2e\" class=\"color\"> <strong>localhost:3000<\/strong><\/span> for the React fronmt end page. So as such, you have 2 servers going, one for Backend &amp; one for Front end. Only when you have both open can thety talk to each other. <\/p>\n\n\n\n<p>The React interface (browser localhost:3000) is calling the Server.js to get the info from the database, either posting or getting from it. So it makes sense that they are both running. <\/p>\n\n\n\n<p>So to make this happen you need to open <strong>2 terminals<\/strong>, <strong>one  in the directory for the server.js<\/strong> file to call the commmand<strong><span style=\"color:#cf2e2e\" class=\"color\"> > node server.js <\/span><\/strong>and then <strong>another terminal in the src> directory <\/strong>to call the main react file <strong><span style=\"color:#cf2e2e\" class=\"color\">App.js<\/span><\/strong> with <strong><span style=\"color:#cf2e2e\" class=\"color\">>npm start<\/span><\/strong><\/p>\n\n\n\n<p>These can be checked by openig up 2 browser tabs:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"763\" height=\"998\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises.jpg\" alt=\"\" class=\"wp-image-6262 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises.jpg 763w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-229x300.jpg 229w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-50x65.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-38x50.jpg 38w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-100x131.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-76x100.jpg 76w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-489x640.jpg 489w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-640x837.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_47-http___localhost_5000_exercises-587x768.jpg 587w\" data-sizes=\"(max-width: 763px) 100vw, 763px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 763px; --smush-placeholder-aspect-ratio: 763\/998;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"350\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-1024x350.jpg\" alt=\"\" class=\"wp-image-6263 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-1024x350.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-300x103.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-768x262.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-1536x525.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-2048x700.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-50x17.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-146x50.jpg 146w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-100x34.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-293x100.jpg 293w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-1873x640.jpg 1873w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-640x219.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker-1920x656.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/350;\" \/><\/figure>\n\n\n\n<p>With both open they can talk to each other. <\/p>\n\n\n\n<p>So the app works, I can look at stuff from the 5000 server by adding endpoints to the URL or I can use postman to use GET &amp; POST requests to it. <\/p>\n\n\n\n<p>I can use te React Front end to input and query the info or edit it as well (<em>at then of each row is an edit|delete option<\/em> <em>see image above<\/em>). So at the end of the tutorial something works. <\/p>\n\n\n\n<p>On importing from Github I still had to <strong><span style=\"color:#cf2e2e\" class=\"color\">git install all the dependancies<\/span><\/strong>. So still not that familiar with the whole Git thing. Ineed to practice to gain confidence using it. At the beginning I hit a mental blank as to how to clone.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The tutorial<\/h4>\n\n\n\n<p> Although I didn&#8217;t write the code, but just copied it from the Github repository I did learn a bit about the whole setup and some of the requirements (like multiple terminals (it could have been done in one terminal but its easy to open others with VS Code. <\/p>\n\n\n\n<p>Also to go back up one directory use <strong><span style=\"color:#cf2e2e\" class=\"color\">> cd ..<\/span><\/strong>  I was finding my dos commands had left me and struggled moving between directries, I need to do it a bit more on the terminal to refresh my memory. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">End comment<\/h3>\n\n\n\n<p>It was fun poddling along trying to get this to work. A bit of learning about backend and frontend and full stack development. I still need to get my head around those concepts in more depth, but big picture is good. <\/p>\n\n\n\n<p>I now see whewre React &amp; Node sit in relation to each other. That is useful. <\/p>\n\n\n\n<p>This tutorial, although interesting, is stll just learning how to play with some simple localhost interfaces, it is not  a full deployment of the app in the cloud where I can access it remotely.<\/p>\n\n\n\n<p>That is an issue, I need to know how to deploy these things otherwise its interesting but not useful. <\/p>\n\n\n\n<p>Another spooky thing is a whole new programme and concepts elating to it AND <strong><span style=\"color:#cf2e2e\" class=\"color\">JSX<\/span><\/strong> as an HTML lookalike. That does look as if its going to have a challenging learning curve attached to it. <\/p>\n\n\n\n<p>I can see a use case for learning react, and have just come across <strong>React Native<\/strong> which is <em>for mobile apps<\/em> and watched a video on the CONS of using React Native. But that is an extension of React for later if I get more advanced and competent with using React. <\/p>\n\n\n\n<p>I need to do a follow on from this. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is based on the video by FreeCodeCamp.org below and also I cloned the git repository to use their code for testing HERE: I&#8217;m interested in playing with the React front end, as I&#8217;ve been playing with the node.js backend so I felt that this tutorial was an extension. After getting my head around the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6263,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,36,445,446],"tags":[],"class_list":["post-6250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-databases","category-node_js","category-react_js"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-11-12_36_58-Exercise-Tracker.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6250"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6250\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6263"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}