11 篇文章 含有標籤「React」

從使用 Create React App 轉到 Vite，有很多不熟悉的地方，這篇文章簡單的對 Vite 在不同環境設定不同變數做簡單的筆記

不同的環境有不同的環境變數值是很正常的，ex 開發環境連開發環境的後端，正式環境連正式的環境的後端，開發環境有開發環境的 api key，正式環境有正式環境的 api key， 之前用過 npm-config，處理過類似的需求，不過 Vite 自己就內建處理這類需求的方法

有個需求是要將 React 專案 Deploy 在公司開發用的 Docker 上，簡單寫個筆記，以後有類似的需求可以直接複製貼上使用

放上一個測試用的 React 小專案到 Netlify，在 local 執行正常，在網頁上點選連結也正常，但如果把連結記下來傳給別人或直接重新整理頁面都會變在 404

建立專案使用的是大家都在用的 Create React App，Router 用的是大家都在用的 React Router，好像不應該有問題才對

Firebase 系列文的第三篇，這篇文章會簡單介紹如何使用 Firebase 的 Authentication 功能來管理會員帳號。

相信很多使用者都對網站的會員功能常有資安的疑慮，擔心自己的帳密會不會被網站拿去做什麼其他的用途， 事實上網站的開發者更討厭去管理使用者的帳密，尤其是個資法有相當多的限制，對帳密這類的資訊是能不碰就不碰， 但網站有時不得不需要有會員的功能，這時第三方的會員帳號管理就很好用了。

而 Firebase 就提供 Authentication 的功能，簡單的說就是網站不直接管理使用者的帳密，而是透過 Firebase (Google) 去管理，如果有資安的問題就是 Google 的問題，和網站無關

最近在替一個老舊的專案 UI 改版，原專案的 Dashboard 是前同事用手刻出來的，不意外的工程師的美感，現在的角度來看有多醜就有多醜。該專案用的 bootstrap 3，看起來最適合的是直接套用 AdminLTE 2

Firebase 系列文的第二篇，之前寫過【如何在 React 專案中接收 Notification】，這篇文章有點像，只是不使用 cra-template-pwa，而是完全的只用 Firebase 提供的功能

簡介 Firebase​

官網

Firebase 是 Firebase, Inc. 在2011年發布的行動和網路應用程式開發者平台，在 2014 年被 Google 收購，現在屬於 google 的產品， 提供很多很有用的服務，像是

• Authentication (不需要伺服器端程式碼，也能輕鬆驗證及管理不同提供者的使用者)

一個需求，需要在原來的 React PWA 專案中增加接收訊息通知的功能，簡單寫了個筆記，因為需求較複雜了點，還會牽扯到 firebase，為了單純起見，這篇文章僅僅介紹到 PWA 的 push 和 notification 部份

什麼是 PWA​

全名：Progressive Web Apps，中文翻成「漸進式網路應用程式」，不過講中文可能沒有人聽的懂

簡單說這是 google 製定的一個標準，可能讓你的 web 專案，看起來像是一個手機 App，它有兩個核心

使用 iframe 是最直接的方法，在 youtube 影片點選右鍵，選「複製嵌入程式碼」，可以得到像下面的這段程式碼

<iframe width="640" height="360" src="https://www.youtube.com/embed/daVASrwlU9c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

把這段程式碼貼進 React 可以運作，但是沒有 RWD 的效果，google 了一下找到解法，不多廢話，直接附程式碼