如何在 Windows 11 中初始化一個 Pynecone 專案與設定 VSCode 的開發環境

OpenAI CEO 在 Demo GPT-4 時有使用 pynecone 這個關鍵字當作 GPT-4 的功能操作範例，但是他不是在推薦 pynecone 這個框架的功能，而是隨意舉出一個 Hacker news 的新聞拿來做範例

因為我在經營開源報報，看到 pynecone 這個關鍵字覺得很眼熟，就去開源報報網站搜尋了一下，原來我很早就有注意到這個 python 全端開發框架，這次又在 OpenAI 的線上展示中看到一次，我想 OpenAI CEO 會注意到這個框架，想必來頭不小，結果發現這個框架原來是 Y Combinator 投資的團隊

所以 Y Combinator 的幫派真是強大，OpenAI 的線上發表會想必是全球關注，雖然 pynecone 不是主角，只出現幾秒鐘，但就被我注意到了，我想 pynecone 未來會受到更多的關注

這個 Python 框架後端使用 FastAPI ，前端使用 Next.js ，但是只要會 Python 就好了，不需要去動到 Next.js ，開發者還可以在後端使用 React 的元件，所以 pynecone 可以開發出很豐富的前端，即使你不懂前端開發框架 Next.js ，但是最好懂 React 元件的原理。

Pynecone 既然是 Y Combinator 投資的新創公司，又採用開源方式，那獲利模式呢? Pynecone 在自己的伺服器部署是免費的，未來 Pynecone 會提供雲端託管服務，這部分就是要付費的，這種商業模式不是很新奇，目前很多國外的軟體公司都是使用這種方式在進行，因為開源除了取得使用者的信賴，也變成是一種行銷的通路。

Pynecone 適合哪種開發者?

Pynecone 對我而言最大的吸引力就是用來快速開發 Web 應用程式的 Prototype 時可以省掉很多的設定。例如我前端想使用 React ，後端想使用 Flask 或是 Django/FastAPI 等知名的 Python 後端開發框架，要初始化一個專案要花不少時間，部署到伺服器更不用說了。程式開發過程要 Debug 也很麻煩，Pynecone 在這方面就表現非常出色。初始化一個全端的 Web 應用程式，而且可以用 Source Level Debug 後端的 Python 程式碼，這可以大幅提升開發 prototype 的速度。

Pynecone 不適合什麼情境?

雖然 Pynecone 強調不需要去修改前端的程式碼，只需要會修改 Python 程式碼就可以了，前端元件樣式在後端修改就可以了，但這是優點也是缺點。如果前端要跟後端的相依性分離，或是大型軟體要分工合作，這種架構的優點反而變成缺點。所以我認為 Pynecone 不太適合用在大型的軟體開發專案，比較適合一兩個人開發 MVP 的小型專案。這是我初步的觀點，也許未來隨著我對 Pynecone 的深入理解，pynecone 也許有提供前後端分離的設定，但目前我在文件中還沒看到。

Pynecone 專案的初始化與 VSCode 設定

Pynecone 在 Windows 11 上面開發時，安裝 pynecone 套件會出現一個警告 – 建議使用 WSL ，不然效能差異性很大。所以後續的安裝與設定，我建議你先安裝好 WSL ，VS Code 也是一樣。接下來的 VS Code 設定是在官方文件上沒有說明，而且你用 Google 也找不到的設定說明。有了這個 VS Code 設定，你可以省下很多 Debug 時間，因為你可以在 VS Code 編輯器中設定中斷點，在 Web 介面上操作時這些中斷點是會被 Hook 到。

Python 套件管理我使用 poetry ，你也可以使用其它套件管理工具

✨附帶一提，這篇 howto 雖然使用 Windows 11 ，但是 VS Code 的設定是一樣的

1 使用 poetry 初始化一個 pynecone 專案

• 進入 wsl
• mkdir pyneconedemo
• cd pyneconedemo
• poetry init
• poetry config virtualenvs.in-project true –> 虛擬環境會建立在專案目錄中，這個只要設定一次就可以了
• poetry env use python3.11 –> 你的 wsl 要自己安裝 python ，或是用內建的 python 3.8 也是可以

這個步驟完成後，你會在你的 pyneconedemo 目錄中看到一個 .venv 的目錄，如果你使用其它套件管理工具，你只要知道你的 python 虛擬環境在哪邊就可以了，不一定要用 poetry

💥要注意的是，即使你使用 wsl ，但是專案目錄建立在 windows 的目錄系統，效能還是會受到影響，所以記得目錄要建立在 wsl 的目錄系統中

💥如果你使用 poetry ，專案目錄不要設成 pynecone ，不然會有錯誤訊息

2 加入 pynecone 套件

• poetry shell
• poetry add pynecone

3 初始化 pynecone

pc init

這時候 pynecone 會幫你產生一個前端與後端的專案樣板，要啟動這個專案，要輸入

pc run

你就可以打開瀏覽器，然後輸入 http://localhost:3000 看到這個初始的專案

4 在 WSL 中打開 VS Code

code .

5 修改初始專案的程式碼

把 pynecone-demo/pynecone-demo/pynecone-demo.py 裡面的程式碼換成以下的程式碼

import pynecone as pc


class State(pc.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1


def index():
    return pc.hstack(
        pc.button(
            "Decrement",
            color_scheme="red",
            border_radius="1em",
            on_click=State.decrement,
        ),
        pc.heading(State.count, font_size="2em"),
        pc.button(
            "Increment",
            color_scheme="green",
            border_radius="1em",
            on_click=State.increment,
        ),
    )


app = pc.App(state=State)
app.add_page(index)
app.compile()

執行 pc run，然後到瀏覽器 http://localhost:3000，你應該會看到以下的畫面。因為用這個程式碼才有辦法進行下一個設定的測試 – 設定 Source Level Debug

6 設定 VS Code 的 launch.json

點選 VS Code 中的執行與偵錯

點選建立 launch.json

點選 Python 檔案

這時候 VS Code 會產生一個 launch.json，這個檔案是無法直接使用，必須要做一點修改，以下是修改的內容，其中的 program 參數要指向 python 虛擬環境中的 pc 這個 python script，因為 pynecone 是使用這個 python script 來啟動的，增加一個 args 的參數 run ， 這樣就可以讓 VS Code 的偵錯工具正確啟動 pynecone 的專案

{
    // 使用 IntelliSense 以得知可用的屬性。
    // 暫留以檢視現有屬性的描述。
    // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: 目前的檔案",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/.venv/bin/pc",
            "console": "integratedTerminal",
            "justMyCode": true,
            "args": [
                "run"
            ]
        }
    ]
}

7 使用 VS Code 來做 Source level debug

選擇啟動偵錯

然後到編輯器中設定中斷點，我設定了兩個中斷點，所以當在 Web 介面點選 Increment 或是 Decrement 都會進入中斷點進行 Debug

底下是我點選 Increment 後 Hook 到的畫面

總結

我在寫這篇 howto 時有想到或許 pynecone 開源專案的開發者是用另一種 python 除錯器也不一定。因為 source level debug 後端程式碼可以大幅提升生產力，但是官方文件卻連一個字都沒提到。

這個設定花了我將近 2 個小時的時間摸索，在 Google 找不到答案，用 ChatGPT 更不用說了。希望這篇 how to 對於使用 VS Code 的 python 開發者想要快速打造一個 Web application prototype 有所幫助

也許你會有興趣

我之前介紹過另一個 Python GUI 框架 – Flet – 老派程式設計師的應用程式設計開發框架

我本來是用 flet 開發 prototype，今天試了 pynecone 覺得 pynecone 也蠻不錯的，如果只有 web application，我會選 pynecone ，可以客製化網頁元件的功能比 flet 強很多，還可以在後端引用 React 的元件，然後在 Client 端 Render ，這可以開發更複雜的前端

這兩個框架都很類似，都是從後端來定義前端，只是兩者的做法不太一樣，flet 走 flutter 路線，pynecone 走 Next.js 路線

Pynecone 的網站號稱就是用 pynecone 套件開發出來的

flet 也是有優點，例如開發 Mobile app，Desktop application ，Web application

但是 flet 的前端就比較沒 pynecone 這麼高的彈性，所以做出來的感覺比較像是使用標準元件的 app 而不是可以客製化 style 的 web

Pynecone 也考慮到後端資料庫的連接，有一個專門的設定檔，default 支援 SQLite ，但是 flet 就沒考慮到這一點，雖然要串接也是有機會

不受 FB 演算法影響，歡迎透過 e-mail 訂閱網站更新

支持 Soft & Share

❤️您應該有留意到，我們的網頁並不會出現干擾人的跳出煩人的廣告或是在內容中嵌入廣告，因為我們發現這樣對閱讀網頁的內容體驗真的是不好!

如果您覺得我們提供的內容服務還不錯，歡迎透過對以下產品/服務的購買投資來支持本站的營運走得更遠

如果暫時還不需要以下的付費服務，幫我們把這個網站分享給有需要的朋友，您的小小舉動會對 Soft & Share 有莫大的幫助！感謝您的支持！

🎈如果您點選優惠連結後，還是沒有看到優惠價格，請將瀏覽器的 cookie 清除 ( 清除 udemy 網站的就可以了 )，然後重新點選優惠連結並登入 Udemy 就可以了

• ❤️記得透過電腦瀏覽器登入 udemy ，使用這個✨優惠連結✨購買線上課程，本站可獲得 udemy 推薦獎金，歡迎透過我們的 A-Z 關鍵字索引 或 Udemy 策展找到您想要的課程
• ❤️LN+ for udemy/youtube/hahow/web 無縫整合 Notion 成為線上學習平台筆記工具
• ❤️更多付費服務（電子書/其他線上課程平台/軟體服務 ）……

不受 FB 演算法影響，歡迎透過 e-mail 訂閱網站更新