我建立了一個無後端的電商網站！
是的，我建立了一個沒有後端的電子商務商店（無伺服器，HTML，CSS和JS），不錯，你沒有看錯！我建立了一個電子商務（或電子商店）網站，沒有一行後端程式語言。
我的職業生涯曾經是一名前端開發人員（雖然我知道後端）。因此，對於建立電子商務網站的這個新專案，我就不想使用我常用的工具，因為它們都涉及到後端。
可以使用哪些工具來建立電子商務網站？
作為一個認為PHP是最好語言的Web開發人員，我所知道的建立電子商店的工具是開源CMS有：Magento，Prestashop和WooCommerce。
問題：它們涉及後端程式設計（我想在這裡避免）。
還有其他託管平臺，如：Shopify，SquareSpace和Wix。
問題：如果新增CSS和JS庫，維護主題Theming有時會很痛苦。
我想知道：是否有某種API連結到平臺來處理這個問題？這樣，我可以專注於前端（我想使用Vue）。
這就是我遇到Stripe Checkout和Stripe Orders的方式。
問題：結賬很容易，但處理庫存和其他東西很麻煩。
那麼我最後選擇了什麼？
完全隨機，我在Facebook上發現了Snipcart！
經過一番搜尋和思考，我將使用Stripe，因為他們有一個很好的文件，幸運的是，我在閱讀一些Facebook的開發組帖子時掉在Snipcart坑。
簡而言之，Snipcart有一個SDK，就像任何其他JS SDK或庫一樣。此SDK連結到您的Snipcart帳戶的ID，你可以在其中管理訂單，產品和其他內容（運輸，稅收......！）。
你只需要3件事就可以執行：
1. 註冊並將SDK新增到您的網站。
2. 他們的爬蟲必須在您的頁面上找到產品定義
3. 在你的網站上隨處新增一些“新增到購物車”按鈕！
我決定用Vue製作SPA並在Firebase託管上託管它（它是免費的！）。
在那裡，我遇到了第一個問題。如果我使用SPA，我的產品將不會在頁面載入時呈現，除非在標記中靜態地新增我的產品。
現在有3個選項：靜態HTML檔案，SSR或Prerendering。
我決定使用webpack的prerender-spa-plugin.進行預渲染：
1. 對於本機JS：你可以使用任何靜態站點生成器，如Jekyll，Hugo ......
2. 對於任何JS SPA：您可以使用webpack prerender-spa-plugin。
3. 對於Vue，如果你知道Nuxt：你可以使用nuxt generate CLI命令。
好的，我們如何設定一個無伺服器僅有前端的電子商務網站？
/！\ 重要的是，我將Vue用於我的專案，但它適用於任何框架，甚至沒有框架。
1. 首先，註冊https://snipcart.com。
2. 然後，在您的帳戶中，轉到個人資料 - > api金鑰或點選以下連結：https：//app.snipcart.com/dashboard/account/credentials。
3.你會看到一個程式碼片段，基本上只是一些指令碼標籤連結到jQuery的（是啊...）的Snipcart SDK與您的API金鑰。
4. 現在，使用CLI 3建立您的Vue專案（推薦）。
5. 在HTML中，貼上程式碼片段。
6. 建立Vue例項並將其連結到路由器（vue-router）。
7. 新增產品定義（ID，價格，名稱和URL是必需的）：https://docs.snipcart.com/configuration/product-definition。
8.data-item-url是用來定位在本產品確定指標呈現。在訂單的最後一步，Snipcart將驗證購物車中的產品是否與定義的產品相匹配。這是為了確保沒有人用JS 改變價格。
9.新增prerender-spa-plugin以及要生成/呈現的URL。
10.如果要在購物車中顯示商品數量，請新增定製配置
11.有兩個CSS類是必需的，它們被Snipcart用於注入相應的資料：https://docs.snipcart.com/getting-started/the-cart 。
現在，一切似乎都很好，用npm run serve測試它，如果一切正常，用npm run build或yarn build構建它。
主機用什麼？在console.firebase.google.com上建立Firebase專案。轉到選單中的主機並按照指示進行操作。完成所有指示後，編輯firebase.json。
我們將公共目錄更改為dist，但是，如果你的構建資料夾的名稱不同，請將其重新命名為構建資料夾的任何內容。
我們添加了一些重寫以允許使用SPA（除現有檔案或資料夾之外的所有URL都重定向到index.html，類似於Apache重寫）。
就是這樣！這是我製作的電子商務網站：https://futari.fr。
這就是我建立一個電子商務網站的方式，沒有一行後端，只有一個靜態檔案託管服務（與AWS S3一樣）。