Category: Full Stack

  • Firebase Authentication Remix SSR (React)

    Firebase Authentication Remix SSR (React)

    原本以為 Firebase SDK 應該很直覺可以上手,但因為真是有些太豐富了,所以我研究了兩天終於處理好使用者驗證的部分,小小做個筆記,也希望可以幫助到需要的人類。 Reference: https://firebase.google.com/docs/auth/web/start、https://firebase.google.com/docs/auth/admin 結論 先說,因為 Firebase SDKs 真的很豐富,所以如果你是使用 SSR 如 Remix,真的需要點時間上手,我光是思考流程跟研究如何使用就兩天了,而且文件雖然有互相參照但還是不太清楚,以及網路上資訊相對比較少,感覺這個時間拿去學 Passport + JWT 都超夠用。 因為我是製作 SPA,主要會用 Firebase Web SDK 以及 Admin…

  • 三種取得免費 SSL/TLS 的方法 (Free SSL on Linux)

    SSL/TLS 絕對是自己架設伺服器或是網站會遇到的前幾個大問題,這篇文章整理三個我目前用過免費 SSL 的方法,使用 Apache 網頁伺服器為例。分別是直接上傳買的憑證 SSL/TLS key & crt & fullchain、snap Certbot / bncert-tool、Cloudflare 代理。 reference: https://docs.bitnami.com/aws/how-to/understand-bncert/、https://www.cloudflare.com/zh-tw/、https://certbot.eff.org SSL/TLS 絕對是自己架設伺服器或是網站會遇到的前幾個大問題,這篇文章整理三個我目前用過免費 SSL 的方法,使用 Apache 網頁伺服器為例。分別是直接上傳買的憑證 SSL/TLS…

  • Remix Nested Route(嵌套路由) Explained

    Remix Nested Route(嵌套路由) Explained

    對剛開始學 Remix 的人,他的路由系統應該會看得很辛苦,沒關係我也是,所以就寫了這篇來記錄一下該怎麼好好的寫好這些路由。 Reference: https://remix.run/docs/en/main/components/outlet、https://remix.run/docs/en/main/file-conventions/routes解釋影片:https://www.youtube.com/watch?v=QONJCXsZt58Route Demo:https://interactive-remix-routing-v2.netlify.app Remix Route 名詞解釋 1. Route 在你的 route 裡面,長 your_route.tsx 會自動產生一個 route,可以從 /your_route 進入。在 Filing 系統中,你的檔案夾名稱就會是 route,而 Remix 會自動取得檔案夾下面的 route.tsx…

  • 2024 為什麼我開始學 REMIX 而不是 NEXT.JS?

    2024 為什麼我開始學 REMIX 而不是 NEXT.JS?

    這篇會介紹 Remix 的主要特色和入門知識,包含 Loader、Action、Outlet。 Reference: https://remix.run | https://nextjs.org Why Remix? Remix 的特點就是一個檔案就可以處理全端資料,Remix 會根據 function 名稱幫你決定他該在前端還是後端。以往建立一個 Application,我們必須建立 HTML/CSS/JavaScript 的前端頁面,不論是用 React/Vue/Angular 或其他函式庫或框架,然後另外寫後端 API 讓前端 Fetch,JavaScript 提供 Node.js,Python…

  • How Simple Error Handling in RemixJS V2!

    How Simple Error Handling in RemixJS V2!

    This is a note to record REMIX Error Handling. CatchBoundary in REMIX v2 no longer exists, it becomes true of isRouteErrorResponse(useRouteError()). https://remix.run/docs/en/main/route/error-boundaryhttps://remix.run/docs/en/main/start/v2#catchboundary-and-errorboundary Structure In REMIX…

  • [更新] 透過 WordPress 架設電商網站,並串接管理後台

    [更新] 透過 WordPress 架設電商網站,並串接管理後台

    這篇稍微更新一下半年後接觸了許多前後端跟雲端運算後的想法 參見 iThome 鐵人賽文章:https://ithelp.ithome.com.tw/articles/10316189 之前在 2023 iThome 鐵人賽寫了一系列 30 篇關於 WordPress 的文章,作為開始紀錄科技學習的起點,講述從取得網域、架設伺服器、安裝 WordPress,到將 WooCommerce 訂單 Webhook 至 Ragic! 的過程。 總之如果重來一次,我會 —————————— 使用 GCP 架設伺服器 可以使用…