今日份 Ferris

今天開始可以磨刀霍霍向專案了，先來把必要的安裝準備好吧！

Rust nightly

由於接下來使用 Leptos 時會需要 Rust 每夜版，以允許函式呼叫式的語法 (例如 ReadSignal::get() → ReadSignal())，所以我們首先把 Rust 改為每夜版：

rustup toolchain install nightly
rustup default nightly
rustup component add clippy rustfmt

然後使用 rustup target add 將 wasm32-unknown-unknown target triple 加入到 Rust 的工具鏈中：

rustup target add wasm32-unknown-unknown

如此一來，Rust 就可以將程式碼編譯為 WebAssembly。
可以這麼做是因為 Rust 支援跨平臺編譯，因此 rustup target add 還能用來：

• 為不同的操作系統或架構跨編譯 Rust 代碼。
• 為嵌入式系統或其他特定平台構建 Rust 代碼。
• 在 CI/CD 流程中啟用跨編譯支持。

安裝 Leptos 工具

把 Rust 處理好之後，就可以安裝 Leptos 的工具了：

cargo install trunk cargo-leptos

其中 cargo install 主要用於安裝基於 Rust 的命令列工具和實用程式。

若想要使用 Rust 函式庫 (即非二進制套件)，一般會把它們放在 Cargo.toml 檔案中，Cargo 在構建專案時會自動管理其編譯和整合。

而 Trunk 是用於客戶端渲染，而 cargo-leptos 則用於全端渲染，是我們接下來會主要使用的工具。
它基本上是用來協調應用程式的構建過程，在我們對程式碼進行更改時負責重新編譯伺服器端與客戶端部分，並且支援了了對 Tailwind、SASS 和測試等內容。

Hello world

要開始使用 Leptos 很簡單，只需要在終端機中執行 cargo leptos new --git leptos-rs/start，這會自動建立以 Actix 為基礎的初始專案，唯一要做的就是在 🤷 出現時輸入專案名稱即可：

可以看到整個專案架構都很完整的生成了。

cargo leptos new --git leptos-rs/start-axum 則可以生成以 Axum 為基礎的初始專案。

這時候可以把前幾天建立的 GitHub template 也拿過來用，步驟如下：

1. 以此模板建立 repository，假設叫做 llm-chatbot
2. cd 進剛剛生成的專案 iron-llama，把生成的 git 刪掉 rm .git
3. clone 以模板建立的 repo，把裡面的檔案都移出來，然後刪掉空資料夾 mv llm-chatbot/* .; mv llm-chatbot/.* .; rm llm-chatbot/
4. 把 GitHub Actions 改為使用 Rust 每夜版：

   name: Rust CI/CD workflow
   
   on:
     push:
       branches: [ "main" ]
     pull_request:
       # The branches below must be a subset of the branches above
       branches: [ "main" ]
     schedule:
       - cron: '0 6 * * 1'
   
   jobs:
     rust-ci-cd-basic:
       name: Run Rust CI/CD basic workflow
       runs-on: ubuntu-latest
   
       steps:
         - name: Checkout code
           uses: actions/checkout@v3
   
         - name: Install Rust toolchain
           run: |
             rustup toolchain install nightly
             rustup component add clippy rustfmt
             rustup default nightly
   
         - name: Check Rust versions
           run: make version
   
         - name: Format
           run: make format
   
         - name: Lint
           run: make lint
   
         - name: Test
           run: cargo test --verbose
   

都設定好後就可以執行 cargo leptos watch 得到會自動刷新的網頁 (App 會在 http://localhost:3000 )：

若使用 VScode 可以下載 Live Preview 然後 ctrl+shift+P → Simple browser: Show，輸入http://localhost:3000 就能看到網頁。

把這些都準備好後，明天就開始實作我們的專案吧！
明天見啦～～

*調皮滑一餃🥟