Sign in Subscribe

Node.js

淺談 Jamstack 架構

前言 前陣子寫 Next.js 筆記時和朋友們討論 Gatsby.js「The static dynamic site generator for dynamic web developers」部分時提到了 Jamstack，其中一位夥伴說了： 那 Jamstack 跟我們寫框架的 SPA 網站不是一樣嗎？ 提問者後續在其他人的解釋下才理解差異。之後想想，我在Next.js 筆記中 Jamstack 也只是草草帶過，確實有必要整理一下我的認知，大家教學相長，若此篇有什麼錯誤也歡迎指證。 什麼是 stack 架構？ 有時我們會聽到 ${Something}stack 之類的名詞，開頭的字母即為技術的縮寫組合，例如： * LAMPstack： 一般稱 LAMP，包含由 L(Linux)、A(
SimonAllen

Next.js 入門：由 CRA 至 Gatsby 與 Next.js

此文不會講解為什麼 SSR 對 SEO 和 LCP 有幫助的原因 如果不懂 LCP 是什麼，可見 Google 關於 LCP 指標的說明 如果連 SPA 和 SSR 是什麼都不太懂，可以參考 Huli 大大寫的跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR 前言 前陣子的 React 生態圈可謂是振奮人心，官方在今年 6 月初公布了 18 版的計畫，其中基於 Suspense 的 Server Side Rendering 架構另許多開發者眼睛一亮，畢竟從 Client Side Rendering (以下簡稱 CSR)跨到
SimonAllen

Mac 安裝 NVM

很久沒在 Mac 裝 NVM 了，這裡也順便重新整理之前的筆記。 平常在開發前端時，基於 Node.js 生態圈龐大，不同套件有不同版本的限制，例如某些新功能限定某版號以後才有，不同前後端專案可能所需 Node.js 版本也不同，總不可能每次都乖乖升級降級吧！ 我們需要一個工具幫我們管理 Node.js 版本，這時候我們就可以透過 nvm 來管理、切換 Node.js。 先檢查目前電腦有沒有安裝 Node.js ，有的話記得先移除掉，之後在 terminal 終端機輸入 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash 或
SimonAllen

Next.js 入門：建立專案與專案結構

建立專案 系統要求 MacOS、Windows 和 Linux 都沒差 只要有 Node.js 12.0 或更高版本即可 安裝與建立 create-next-app 專案 打開 terminal 輸入 npx create-next-app ${專案名稱} 等 terminal 跑完即可。 npx 指令會先檢查本地端 Node.js 是否有安裝 create-next-app，有就執行 create-next-app。 沒有就下載 create-next-app 裝入當前局部執行環境，不會裝進本機電腦 Node.js 全域環境，這麼做可以避免全域被汙染。若使用者想全域安裝也可以先下 npm install create-next-app -g，自行斟酌。 專案結構 打開建立好的專案可以看到如下檔案階層 |--
SimonAllen

mkcert：讓你在 localhost 開發也能用 https

mkcert 可以開發者快速產生 https 憑證，讓本地端 localhost 開發也能用https。 http、https 之間差異這裡就不贅述，對前端瀏覽器而言，串接後端 API 最常遇到的就是跨域 CORS 的問題，而不同協議 http、https 彼此也有跨域問題。 通常 local 開發環境通常會是 http，以前筆者還菜菜的時候，不懂 localhost 怎麼會有需要 https 這個需求，直到我遇到 Yahoo Sign in 這種一定要 https 的 3rd 功能要串接.... 總不能本機盲改串功能，deploy 上測試站才能測吧，為了做到在本機電腦也能正常開發，我們需要讓 localhost 變成 https 協定。 mkcert 在不同電腦環境、
SimonAllen

Node.js 建立 API 與發佈 Heroku

此為練習 Vuex 時所用咖啡api，用node.js佈屬時的筆記。 建立寫死的假API 假api有幾種產生方式，例如用本地端api server來處理，而其中一種是真的佈屬上雲端，本地端取用，建立api使用node.js來處理，這裡用到了express (其實可以不用express，但我這裡就是用了啦) 首先建立專案，之後建立package json，在終端機輸入 npm init 專案名稱打好後，是需求填入資訊或Enter到底即可。 安裝express sudo npm install express --save 安裝node的跨域模組 sudo npm install cors 接著編輯器或IDE打開專案，建立index.js或app.js，我這裡建立index.js（取何種名稱沒差） 檔案內容如下 //require載入express模組 var express = require('express'
SimonAllen