我创建了一个无后端的电商网站！

是的，我创建了一个没有后端的电子商务商店（无服务器，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一样）。