Tag: Remix

  • Firebase Authentication Remix SSR (React)

    Firebase Authentication Remix SSR (React)

    —

    by

    Gabriel JC
    in , , , ,

    原本以為 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…

  • Integrating Excalidraw with Remix React

    Integrating Excalidraw with Remix React

    —

    by

    Gabriel JC
    in , ,

    Excalidraw is a famous Client Side whiteboard tool to make you easy sketch with handwriting style, widely adopted by Developers and Designers. Reference: https://docs.excalidraw.com/docs、https://excalidraw.com、https://github.com/remix-run/remix/discussions/8877 What…

  • Resend 免費 SMTP 三分鐘內讓你的 APP 寄出 Email

    Resend 免費 SMTP 三分鐘內讓你的 APP 寄出 Email

    —

    by

    Gabriel JC
    in , , , ,

    Resend 是 YC 2023 的一個項目，他注重開發者體驗，讓程式開發及 Email API 合而為一，而且每個月提供 3,000（每日 100）封免費 Email！設定也非常簡單易懂。這篇會使用 Remix (React) 示範。 Reference: https://resend.com/、https://react.email Why Resend 這個真的是嚇爆，之前在思考我是否應該自架郵件伺服器，甚至去研究了 Postfix，結果不知道為什麼當初沒有找到的 Resend 重新出現在我眼前。 雖然主打程式開發，但其實一般人也能直接使用哦！就像其他的 SMTP 平台一樣。…

  • Remix Nested Route（嵌套路由） Explained

    Remix Nested Route（嵌套路由） Explained

    —

    by

    Gabriel JC
    in , , ,

    對剛開始學 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？

    —

    by

    Gabriel JC
    in , , , ,

    這篇會介紹 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!

    —

    by

    Gabriel JC
    in , , , ,

    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…

  • Docker 承載你的所有心血，讓你的 App 可以在所有地方快速啟動

    Docker 承載你的所有心血，讓你的 App 可以在所有地方快速啟動

    —

    by

    Gabriel JC
    in , ,

    有了 Docker 之後，你的 App 就不需要煩惱開發環境跟真實部署的環境有相容性的問題，整包帶走！ 可以看看 Docker 跟 Linux commands: https://www.youtube.com/watch?v=pTFZFxd4hOI&t=18s同樣看看 Docker-compose: https://www.youtube.com/watch?v=HG6yIjZapSA Docker 簡介 簡言之，有了 Docker 我們只需要寫好程式碼，使用 docker build 產生 Image，然後把 Image 帶到任何地方使用 docker…