{"id":6274,"date":"2020-05-13T19:37:26","date_gmt":"2020-05-13T19:37:26","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6274"},"modified":"2020-05-13T19:37:26","modified_gmt":"2020-05-13T19:37:26","slug":"deploy-a-prebuilt-expense-react-app-on-heroku-no-success","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6274","title":{"rendered":"Deploy a prebuilt expense React app on Heroku-NO SUCCESS"},"content":{"rendered":"\n<p>This is one of  Brad Traversy&#8217;s courses for making an expense app. There are earlier videos where he does it in vanilla JS then moves on to doing it with React and using State to store the data, then in the video below he uses a MERN Stack (MongoDB, Express, React &amp; Node) and gets it running on a loclhost.  So externally all he&#8217;s done is wire up to a Clo9ud Atles database, the rest is on his local computer. <\/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=\"Node.js &amp; Express API | Expense Tracker - Part 2 (MERN)\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/KyWaXA_NvT0?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>The learning I&#8217;m interested in is getting a Backend (Node) and Frontend (React) up and running with persistant data in a Database that is accessible out of production instance in Heroku, I&#8217;m happy with the Cloud Atlas MongoDB solution. <\/p>\n\n\n\n<p>This follows on from me deploying a Selfie App to Heroku with a file for storage. I couldn&#8217;t access the selfie app data later as it was locked in the Heroku server. <\/p>\n\n\n\n<p>The learning I want is confdence in deploying apps. If I can do this without too much pain then its worth learning more about Node &amp; React, if not then its just playing with the programmes on localhost so not very useful. <\/p>\n\n\n\n<p>This seems the current programming environment for people so I should try and get familiar with these tools. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Project<\/h3>\n\n\n\n<p>The video above has a link to a <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/bradtraversy\/expense-tracker-mern\" target=\"_blank\">github repostiory for that code<\/a><\/strong>. I&#8217;ve cloned it to my PC.  <\/p>\n\n\n\n<p>Brad Traversy has another video on deploying a shopping list app to Heroku that has both back and front ends here:<\/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=\"Learn The MERN Stack [8] - Prepare &amp; Deploy\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/71wSzpLyW9k?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 I will try and deploy the first expense app using the process in the video above, fingers crossed. <\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Part 1. Hook up to DB and load packages<\/h5>\n\n\n\n<p>I have hooked up to MongoDB and I had to delete one instance of the clone and rebuild from scratch before I got the react app running in the <strong>client directory <\/strong>with<strong> >npm start <\/strong>after doing an <strong>>npm install <\/strong>in that directory. I started that server and browser at localhost:3000 <\/p>\n\n\n\n<p>Then to parent directory and did a <strong>>npm install <\/strong>then<strong> >node server <\/strong> to have that running. <\/p>\n\n\n\n<p>I set the DB path in the environmental variable file &amp; then shut downall all the servers and then restarted both and tested:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"841\" height=\"1024\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-841x1024.jpg\" alt=\"\" class=\"wp-image-6276 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-841x1024.jpg 841w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-246x300.jpg 246w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-768x935.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-50x61.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-41x50.jpg 41w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-100x122.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-82x100.jpg 82w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-526x640.jpg 526w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-640x779.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-631x768.jpg 631w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-1024x1247.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App-887x1080.jpg 887w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App.jpg 1112w\" data-sizes=\"(max-width: 841px) 100vw, 841px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 841px; --smush-placeholder-aspect-ratio: 841\/1024;\" \/><figcaption>React app running on localhost:3000<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"461\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-1024x461.jpg\" alt=\"\" class=\"wp-image-6277 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-1024x461.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-300x135.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-768x346.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-1536x692.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-2048x922.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-50x23.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-111x50.jpg 111w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-100x45.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-222x100.jpg 222w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-1421x640.jpg 1421w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-640x288.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-1706x768.jpg 1706w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-1920x864.jpg 1920w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_23_01-Data-_-Atlas_-MongoDB-Atlas-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\/461;\" \/><figcaption>I checked the database and the documents are in there. <\/figcaption><\/figure>\n\n\n\n<p>So at this point, I have the app running on my PC and linked to the cloud database. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Configuring for Deployment<\/h4>\n\n\n\n<p>It wont. I tried itbut it&#8217;s broken. <\/p>\n\n\n\n<p>The issue seems to be that I canmnot open the localhost:5000 browser page, there are errors, but its running and connected to the mongoDB so passes stuff through. <\/p>\n\n\n\n<p>There is a block in the network in that it wont load the favicon.ico and just says    <strong><span style=\"color:#cf2e2e\" class=\"color\">Cannot GET \/<\/span><\/strong> <\/p>\n\n\n\n<p>Not sure where to go from here. I think its setup OK. Loading it up to Heroku is OK and the build is made but there is a fault in the backend server that I&#8217;ve not been able to identify or fix. <\/p>\n\n\n\n<p>So although Heroku sayssuccessful build, it ain&#8217;t. And I think its to do with the backend rather than the frontend. The app is sophisticated and I don&#8217;t really understand the code, I&#8217;m stumbling around in the dark. <\/p>\n\n\n\n<p>I chose this app as it was something useful, all the other tutorials have been on to do lists, which do not shake my tree. <\/p>\n\n\n\n<p>I think i&#8217;ll need to revisit the server code and then move onto another tutorial that looks at API&#8217;s rather than this. <\/p>\n\n\n\n<p>Tutorials look easy but even with the code I still can&#8217;t deploy this app, so that is a concern. Unless you can deploysomething its just playing around.  Rather frustrating. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">End comment<\/h3>\n\n\n\n<p>After the last paragraph I went at it again for another hour or 2 and still no closer. Give up on this. A non- productive day.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is one of Brad Traversy&#8217;s courses for making an expense app. There are earlier videos where he does it in vanilla JS then moves on to doing it with React and using State to store the data, then in the video below he uses a MERN Stack (MongoDB, Express, React &amp; Node) and gets [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6276,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[445,446],"tags":[],"class_list":["post-6274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node_js","category-react_js"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-14-13_21_58-React-App.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\/6274","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=6274"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6274\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6276"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}