{"id":6284,"date":"2020-05-15T20:24:08","date_gmt":"2020-05-15T20:24:08","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6284"},"modified":"2020-05-16T17:53:59","modified_gmt":"2020-05-16T17:53:59","slug":"react-redux-firebase-the-net-ninja-app-tutorial-deployment-part-1","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6284","title":{"rendered":"React, Redux &#038; Firebase &#8220;The Net Ninja&#8221; app tutorial Deployment- Part 1"},"content":{"rendered":"\n<p>There is a great series of videos on how to set up this project by the Net Ninja&nbsp; (<a href=\"https:\/\/www.youtube.com\/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3\">https:\/\/www.youtube.com\/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3<\/a>) The first video is:<\/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=\"React, Redux &amp; Firebase App Tutorial #1 - Introduction\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/Oi4v5uxTY5o?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3\" 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>There is also a <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/iamshaunjp\/React-Redux-Firebase-App\/\" target=\"_blank\">github repository with all the code here,<\/a><\/strong> you have to look at the branches to get the individual video lessons. &nbsp;So from your VS Code terminal<span style=\"color:#cf2e2e\" class=\"color\"> <strong>&gt;git pull origin lesson-4<\/strong><\/span> (<em>example  for a project<\/em> <em>lesson you want to follow<\/em>). There is a lot of learning in the course, and it\u2019s the first time I\u2019ve seen Redux used. I\u2019ll need to get my head around that sometime.<\/p>\n\n\n\n<p>What I\u2019m interested in is the<strong><span style=\"color:#cf2e2e\" class=\"color\"> firebase deployment, for 1\/ firebase, 2\/ Authentication, 3\/ Database, 4\/ Cloud functions.<\/span><\/strong><\/p>\n\n\n\n<p>So I\u2019m jumping to the end lesson, downloading the code and then watching the relevant videos on how to connect the code to firebase and its configurations. I hope to have an operational app at the end.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Setting up a Firebase project and getting the config data<\/h4>\n\n\n\n<p>So I\u2019ve logged into my Firebase account and created a new project. Initially it offered me some script links for my app but I went back to dashboard and used the settings to get a config file code as per the video &amp; copied\/pasted that into the code. This I pasted into the React-Redux-Firebase-App\\marioplan\\src\\config\\fbConfig.js file as per video 15 in the series:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"582\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-1024x582.jpg\" alt=\"\" class=\"wp-image-6285 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-1024x582.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-300x170.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-768x436.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-1536x873.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-50x28.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-88x50.jpg 88w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-100x57.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-176x100.jpg 176w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-1127x640.jpg 1127w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-640x364.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-1352x768.jpg 1352w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/582;\" \/><\/figure>\n\n\n\n<p>I also went to main directory (top level) and ran<strong><span style=\"color:#cf2e2e\" class=\"color\"> &gt;firebase init<\/span><\/strong> so that firebase was initialised in the project. I then ran &gt;npm start and got the sign in page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"778\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-1024x778.jpg\" alt=\"\" class=\"wp-image-6286 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-1024x778.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-300x228.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-768x584.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-1536x1168.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-50x38.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-66x50.jpg 66w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-100x76.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-132x100.jpg 132w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-842x640.jpg 842w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-640x486.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-1010x768.jpg 1010w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-1421x1080.jpg 1421w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_13_02-React-App-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/778;\" \/><\/figure>\n\n\n\n<p>So I&#8217;ve still got to create and hook up 1\/ the Database &amp; 2\/ Autorisations. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Database setup<\/h4>\n\n\n\n<p>So video 16, setting up the database: <\/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=\"React, Redux &amp; Firebase App Tutorial #16 - Firestore Data &amp; Collections\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/zMvjPEOjrbw?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3\" 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 did have an issue on location, good learning for later. The Database can be located in Google Cloude Srver in Australia which is closest to NZ.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"967\" height=\"681\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console.jpg\" alt=\"\" class=\"wp-image-6288 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console.jpg 967w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-300x211.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-768x541.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-50x35.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-71x50.jpg 71w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-100x70.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-142x100.jpg 142w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-909x640.jpg 909w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_40-ProjectDashTut-\u2013-Firebase-console-640x451.jpg 640w\" data-sizes=\"(max-width: 967px) 100vw, 967px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 967px; --smush-placeholder-aspect-ratio: 967\/681;\" \/><\/figure>\n\n\n\n<p>The Cloud Functions neares place is <strong><span style=\"color:#cf2e2e\" class=\"color\">asia -northeast <\/span><\/strong><span style=\"color:#cf2e2e\" class=\"color\">1<\/span>,<em> but I stuffed up and chose the one above <strong>asia -northeast 1<\/strong> which would need me to put cloud functions into <strong>asia-east 2<\/strong><\/em>. Oops, lesson learned for future apps. <\/p>\n\n\n\n<p>In fact., looking below, I should have just chosen <em><strong>asia -northeast 1<\/strong><\/em> for everything to reduce latency between cloud functions  &amp; DB since the cloud Function needs to check the DB. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1018\" height=\"861\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase.jpg\" alt=\"\" class=\"wp-image-6287 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase.jpg 1018w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-300x254.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-768x650.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-50x42.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-59x50.jpg 59w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-100x85.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-118x100.jpg 118w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-757x640.jpg 757w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-640x541.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_45_17-Cloud-Functions-locations-_-Firebase-908x768.jpg 908w\" data-sizes=\"(max-width: 1018px) 100vw, 1018px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1018px; --smush-placeholder-aspect-ratio: 1018\/861;\" \/><\/figure>\n\n\n\n<p>I tried to see if I could delete the Database and couldn&#8217;t see where to do that. Never mind, a lesson learned. Actually, singapore would be the closest, <strong><a href=\"https:\/\/cloud.google.com\/about\/locations\/#asia-pacific\" target=\"_blank\" rel=\"noreferrer noopener\">see page for chart.<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"985\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-1024x985.jpg\" alt=\"\" class=\"wp-image-6289 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-1024x985.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-300x289.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-768x739.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-50x48.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-52x50.jpg 52w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-100x96.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-104x100.jpg 104w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-665x640.jpg 665w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-640x616.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-798x768.jpg 798w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud-1123x1080.jpg 1123w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-11_57_08-Global-Locations-Regions-Zones-_-Google-Cloud.jpg 1157w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/985;\" \/><\/figure>\n\n\n\n<p>Next populate collections, first projects then users and notifications later<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"402\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-1024x402.jpg\" alt=\"\" class=\"wp-image-6290 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-1024x402.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-300x118.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-768x301.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-1536x603.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-50x20.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-127x50.jpg 127w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-100x39.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-255x100.jpg 255w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-1630x640.jpg 1630w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-640x251.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-13_31_27-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/402;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Setting up Authentication <\/h4>\n\n\n\n<p>vid 21 on setting up email and password in Firebase , pretty simple for this part, only one box tick, but have to connect to database too to store login id&#8217;s. In vid 28 make a collection for user id&#8217;s <\/p>\n\n\n\n<p>So I can now login and info ID is stored, but I&#8217;m not sure where email &amp; password are kept, actually they are being kept online in the Authentication app in firebase, so the UID passes across to the user table- cool.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"306\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-1024x306.jpg\" alt=\"\" class=\"wp-image-6291 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-1024x306.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-300x90.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-768x229.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-1536x458.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-50x15.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-168x50.jpg 168w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-100x30.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-335x100.jpg 335w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-640x191.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_27_06-ProjectDashTut-\u2013-Authentication-\u2013-Firebase-console-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/306;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"403\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-1024x403.jpg\" alt=\"\" class=\"wp-image-6292 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-1024x403.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-300x118.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-768x302.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-50x20.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-127x50.jpg 127w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-100x39.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-254x100.jpg 254w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console-640x252.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-14_29_14-ProjectDashTut-\u2013-Database-\u2013-Firebase-console.jpg 1528w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/403;\" \/><\/figure>\n\n\n\n<p>There are 3 parts I need to deal with,1\/ the cloud functions for notifications and 2\/the security on the firebase setup as its open currently for development &amp; 3\/ I need to deploy the site to the cloud. <\/p>\n\n\n\n<p>The project is a bit simple as you can create a project, but you also need to be able to edit and delete it (CRUD) , we have the first 2 items but not the last 2.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cloud functions for notifications<\/h4>\n\n\n\n<p>This was something I tried before, <a href=\"https:\/\/max-drake.cc\/2020\/05\/07\/deploy-node-python-on-google-cloud-function\/\">Deploy Node &amp; Python on Google Cloud function- a first attempt but NOT successful<\/a>. So am loooking forward to seeing if I can get this up and running. <\/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=\"React, Redux &amp; Firebase App Tutorial #33 -   Cloud Functions Intro &amp; Setup\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/TDUmYMVX3Mc?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>so in project <strong>&gt;<code>firebase init<\/code><\/strong> then when it asks questions choose cloud functions with space bar and then Enter. Then use an EXISTING PROJECT and it will show your projects and you choose one. Next it asks what <\/p>\n\n\n\n<p><em><span style=\"background-color:#7bdcb5\" class=\"background-color\">? Wh<\/span><\/em><span style=\"background-color:#7bdcb5\" class=\"background-color\"><em>at language would you like to use to write Cloud Functions?<strong> Java<\/strong><\/em><strong><em>Script<\/em><\/strong><br>? Do<em> you want to use<strong> ESLint <\/strong>to catch probable bugs and enforce style? <strong>No<\/strong>       ?<\/em> <em>Do you want to install dependencies with npm now? <strong>Yes<\/strong><\/em> <\/span>  and then let it install them.<\/p>\n\n\n\n<p>In the vid it goes through setup for web page but I&#8217;d done that at the outset, so I&#8217;ll go back to that later.  Vid below for setting up cloud function, this one is not triggered by https reques though. <\/p>\n\n\n\n<p>The code is already written for the cloud function  and so it has to be deployed, but we only want to deploy the Function, not the whole website, so note in the deploy below the <strong>&#8211;only functions<\/strong> addition. <\/p>\n\n\n\n<p>\\React-Redux-Firebase-App<strong>&gt; firebase deploy<span style=\"color:#cf2e2e\" class=\"color\"> &#8211;only functions<\/span><\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Disaster &amp; stuff ups with cloud functions<\/em><\/h4>\n\n\n\n<p>I couldn&#8217;t get notifications to work. I think I have a problem with the Functions not having a location and I can&#8217;t see how to give them a location, so I&#8217;m going to make a new project and make the database in. <\/p>\n\n\n\n<p>So I made a new database and populated it as the previous one and tried to run the functions. I put the new authentication into the main scr config directory file and  saved that, so now thecode is pointing to the new Firebase project. <\/p>\n\n\n\n<p> I think I overwrote the tutorial <strong>React-Redux-Firebase-App\\functions&gt;  index.js file <\/strong> which had a trigger on document change too. <\/p>\n\n\n\n<p>Also I tried to start a web page deploy as well and used the  &gt;dist folder , and I think on an earlier instance the &gt;build folder too. <\/p>\n\n\n\n<p>I also had problems with authorisation for the Cloud function from github needing permission from the original repository owner, so I deleted the .git directory and then thr .firebase directory. <\/p>\n\n\n\n<p>I also seem to have  2 function directories: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"374\" height=\"813\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code.jpg\" alt=\"\" class=\"wp-image-6293 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code.jpg 374w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-138x300.jpg 138w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-50x109.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-23x50.jpg 23w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-100x217.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-46x100.jpg 46w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-294x640.jpg 294w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-18_03_38-index.js-React-Redux-Firebase-App-Visual-Studio-Code-353x768.jpg 353w\" data-sizes=\"(max-width: 374px) 100vw, 374px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 374px; --smush-placeholder-aspect-ratio: 374\/813;\" \/><\/figure>\n\n\n\n<p>And in the top level functions directory I simplified the funxction to an HTTPS request, also adding the <strong>.region(&#8220;asia-east2&#8221;)<\/strong> to the function to make sure its running in WHAT I THOUGHT was the same region as the database:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const functions = require(\"firebase-functions\");\nexports.helloWorld = functions\n  .region(\"asia-east2\")\n  .https.onRequest((request, response) => {\n    response.send(\"Hello from Firebase!\");\n  });<\/code><\/pre>\n\n\n\n<p>There was already a function that ran from a US server, so when I  Deployed again it told me to delete that one, which I di then I got the result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"823\" height=\"148\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox.jpg\" alt=\"\" class=\"wp-image-6294 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox.jpg 823w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-300x54.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-768x138.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-50x9.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-278x50.jpg 278w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-100x18.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-556x100.jpg 556w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_15_56-Mozilla-Firefox-640x115.jpg 640w\" data-sizes=\"(max-width: 823px) 100vw, 823px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 823px; --smush-placeholder-aspect-ratio: 823\/148;\" \/><\/figure>\n\n\n\n<p>But this is running on the older project , not the new one I setup. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"261\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-1024x261.jpg\" alt=\"\" class=\"wp-image-6295 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-1024x261.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-300x76.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-768x196.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-1536x391.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-50x13.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-196x50.jpg 196w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-100x25.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-393x100.jpg 393w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-640x163.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-17_16_45-ProjectDashTut-\u2013-Firebase-console-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/261;\" \/><\/figure>\n\n\n\n<p>So its really buggered. I think I&#8217;m going to have to try and rebuild from scratch. That is the good thing about github, you can just pull down the code again. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fixing &amp; Re deploying app<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">cleaning out directories &amp; re-seting up<\/h4>\n\n\n\n<p>The file structure had a main directory with marioplan as a sub-directory. I ended up with 2 folders called function. So I deleted all the upper files, also the firebase.json and the packages.json files and did a<strong> >firebase init<\/strong> &amp; a <strong>>npm init<\/strong> on the marioplan folder.  Because I&#8217;d deleted all the packages info I copied thee package.json across from a copy of the folder I had and then did an <strong>>npm install<\/strong> to install all the node_modules or check that they were there. <\/p>\n\n\n\n<p>I then had a difficulty with the firebase\/app in the config file, so I had to uninstall and re-install firebase <strong>>npm uninstall firebase<\/strong> and <strong>>npm clear cache<\/strong> then<strong> >npm i firebase<\/strong><\/p>\n\n\n\n<p>Then I ran <strong>>npm start  <\/strong>to get the browser running. To check what was on the page. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Functions<\/h4>\n\n\n\n<p>I&#8217;m not quite sure what happened but I did a<strong> >firebase deploy &#8211;only functions <\/strong> and looked in the functions area in the browser and they were there. They had deployed to the server, so they are running. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"241\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-1024x241.jpg\" alt=\"\" class=\"wp-image-6298 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-1024x241.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-300x71.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-768x181.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-1536x361.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-50x12.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-213x50.jpg 213w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-100x24.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-425x100.jpg 425w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-640x151.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_32-ProjectDashboardTut-\u2013-Firebase-console-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/241;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"411\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-1024x411.jpg\" alt=\"\" class=\"wp-image-6299 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-1024x411.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-300x120.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-768x308.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-50x20.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-125x50.jpg 125w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-100x40.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-249x100.jpg 249w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App-640x257.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-14_42_45-React-App.jpg 1242w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/411;\" \/><\/figure>\n\n\n\n<p>I used the boilerplate code for the Hello World function to test that the functions were deployed and running and they were. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const functions1 = require(\"firebase-functions\");\n\nexports.helloWorld = functions1.https.onRequest((request, response) => {\n  response.send(\"Hello Woreld Test\");\n});<\/code><\/pre>\n\n\n\n<p>Maybe because the functions are loaded at US-Central1 instead of Asia-East2 their is a lag in their activations, but they are working now. <\/p>\n\n\n\n<p>So the issue is how do I make sure they deploy to the right region. I did have<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const functions1 = require(\"firebase-functions\");\n\nexports.helloWorld = functions1.https.region('asia-east2').onRequest((request, response) => {\n  response.send(\"Hello Woreld Test\");\n});<\/code><\/pre>\n\n\n\n<p>But on running the code it shows errors (I think once I did do it for this specific function on its own and it may have worked, but I get this error when I try and get the functions to run with the .region(&#8216;asia-east2&#8217;) method in the middle of its string<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"758\" height=\"767\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code.jpg\" alt=\"\" class=\"wp-image-6300 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code.jpg 758w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-296x300.jpg 296w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-50x51.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-49x50.jpg 49w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-100x100.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-99x100.jpg 99w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-632x640.jpg 632w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_37_42-index.js-marioplan-Visual-Studio-Code-640x648.jpg 640w\" data-sizes=\"(max-width: 758px) 100vw, 758px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 758px; --smush-placeholder-aspect-ratio: 758\/767;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"868\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-1024x868.jpg\" alt=\"\" class=\"wp-image-6301 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-1024x868.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-300x254.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-768x651.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-50x42.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-59x50.jpg 59w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-100x85.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-118x100.jpg 118w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-755x640.jpg 755w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-640x542.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-906x768.jpg 906w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console-1274x1080.jpg 1274w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_40_15-ProjectDashboardTut-\u2013-Database-\u2013-Firebase-console.jpg 1490w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/868;\" \/><\/figure>\n\n\n\n<p>Even though the database is located at asia-east2 it still deploys the functions to us-central1. <\/p>\n\n\n\n<p>It works, I&#8217;ll live with it for the moment, but I&#8217;ll see if I can get the functions to be deployed where I want. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">End comment <\/h3>\n\n\n\n<p>First of all, thank you Mr &#8220;The Net Ninja&#8221; for posting the videos and also the code. That has been a fabulous starting point for the Firebase learning skills that I want to develop. I&#8217;ve cocked it up, but that is my bad. The redux stuff way over my head but I can see the idea of the parts of it that you demonstrated.  I really appreciate you sharing the code, thank you. <\/p>\n\n\n\n<p>I&#8217;m happy with what I&#8217;ve learned. I have a little more confidence with playing with Firebase, which is pretty cool in my opinion. I need to bugger it up a few more times before I&#8217;m comfortable with it.  <\/p>\n\n\n\n<p>I drew a blank when I thought I&#8217;d set up the notifications cloud functions and they didn&#8217;t work. I was a bit stumped, but going back and writing the boilerplate <em>https request<\/em> told me that something was happening, so that has given me a bit of confidence to go back and rebuild the project firebase again. So not a total failure, but a partial success.<\/p>\n\n\n\n<p>The videos peeved me off in the post, I thought I was cutting\/pasting correct code for the video I was watching, but it turns out I was copying video 1 into all the instances, so I had to go back and delete them all. Something I&#8217;ll need to keep an eye on in future posts.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"758\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-1024x758.jpg\" alt=\"\" class=\"wp-image-6302 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-1024x758.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-300x222.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-768x569.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-50x37.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-68x50.jpg 68w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-100x74.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-135x100.jpg 135w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-864x640.jpg 864w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-640x474.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App-1037x768.jpg 1037w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-17-15_49_33-React-App.jpg 1225w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/758;\" \/><\/figure>\n\n\n\n<p>So, set up a firebase project, created an authentication in Firebase, created and populated a database in firebase &amp; deployed some functions. <\/p>\n\n\n\n<p>I could deploy the website to firebase but I don&#8217;t see the point as I would need to have an edit and delete buttons for the projects to make it functional. That is not my objective at this time. A good  bit of learning though. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is a great series of videos on how to set up this project by the Net Ninja&nbsp; (https:\/\/www.youtube.com\/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3) The first video is: There is also a github repository with all the code here, you have to look at the branches to get the individual video lessons. &nbsp;So from your VS Code terminal &gt;git pull [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6285,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[204,41,448,447,36,445,446,29],"tags":[],"class_list":["post-6284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automation","category-aws-gc-az-free-tier","category-cloud-functions","category-cloud-services","category-databases","category-node_js","category-react_js","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-scaled.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-16-10_50_39-ProjectDashTut-\u2013-Settings-\u2013-Firebase-console-scaled.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\/6284","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=6284"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6284\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6285"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}