{"id":246,"date":"2025-01-17T00:26:10","date_gmt":"2025-01-16T17:26:10","guid":{"rendered":"https:\/\/bruceng.com\/?p=246"},"modified":"2025-01-21T14:05:42","modified_gmt":"2025-01-21T07:05:42","slug":"dev-log-reactgtd-home-style-continuous-delivery","status":"publish","type":"post","link":"https:\/\/bruceng.com\/?p=246","title":{"rendered":"[Dev log &#8211; ReactGTD] Home style Continuous Delivery"},"content":{"rendered":"\n<p>Today I added a new feature to my React based GTD app. It was basically so that the web app remembers the last task view I was browsing so when I reopen it next time, it automatically opens the last view.<\/p>\n\n\n\n<p>So for example, if I was last opening the <strong>Study<\/strong> view, the app would remember that, the next time I visit the app&#8217;s URL, it will automatically switch to <strong>Study<\/strong> view.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"511\" height=\"612\" src=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-15.png\" alt=\"\" class=\"wp-image-247\" srcset=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-15.png 511w, https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-15-250x300.png 250w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><\/figure>\n\n\n\n<p>I wrote the whole thing using TDD and never ran the app once, and surprisingly after automatic deployment, it works the first time &lt;3. Automation is beautiful.<\/p>\n\n\n\n<p>I would like to blog a bit on my home style continuous delivery. Basically the app is hosted in a cheap second hand NUC mentioned in another blog post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\" id=\"The-server\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-16-300x169.png\" alt=\"The server\" class=\"wp-image-248\" srcset=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-16-300x169.png 300w, https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-16.png 768w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>The server<\/p>\n\n\n\n<p>Once the code is pushed to a remote branch on Github, a PR is created and a Github workflow runs and execute the tests.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"433\" height=\"79\" src=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-17.png\" alt=\"\" class=\"wp-image-249\" srcset=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-17.png 433w, https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-17-300x55.png 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/figure>\n\n\n\n<p>Then when the PR is merged to main, another Github workflow runs. The workflow builds the docker image and push to DockerHub registry.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"61\" src=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-18.png\" alt=\"\" class=\"wp-image-250\" srcset=\"https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-18.png 419w, https:\/\/bruceng.com\/wp-content\/uploads\/2025\/01\/image-18-300x44.png 300w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<p>Now the home style Continuous Delivery part: the home server has a cron job that runs every hour, the cronjob changes to the directory of the docker-compose file of the app, and then simply run<\/p>\n\n\n\n<p>docker compose pull<\/p>\n\n\n\n<p>docker compose up -d<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>It works, and it&#8217;s stupid simple xD. I remember the first time I wrote the app, I built and deployed the image manually many times, sometimes incorrectly because of some accidental changes to the files in the source code.<\/p>\n\n\n\n<p>Now I just merge the pull request and wait until the app updates itself from the server.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I added a new feature to my React based GTD app. It was basically so that the web app remembers the last task view I was browsing so when I reopen it next time, it automatically opens the last view. So for example, if I was last opening the Study view, the app would &hellip; <a href=\"https:\/\/bruceng.com\/?p=246\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">[Dev log &#8211; ReactGTD] Home style Continuous Delivery<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[10,7],"class_list":["post-246","post","type-post","status-publish","format-standard","hentry","category-devlog","tag-cicd","tag-gtd"],"_links":{"self":[{"href":"https:\/\/bruceng.com\/index.php?rest_route=\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bruceng.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bruceng.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bruceng.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bruceng.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=246"}],"version-history":[{"count":1,"href":"https:\/\/bruceng.com\/index.php?rest_route=\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/bruceng.com\/index.php?rest_route=\/wp\/v2\/posts\/246\/revisions\/251"}],"wp:attachment":[{"href":"https:\/\/bruceng.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bruceng.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bruceng.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}