Shopify 公共应用开发(1)

目前,我正在开发一款 Shopify 公共应用。其主要功能是个性化产品,并可以使用户试试预览。说实话第一次开发这种项目,感觉头大啊啊啊啊啊啊啊…

文档全英文,虽有中文版,但删减的太过厉害。于是我去搜索这方面的博客、文章,无奈，关于这方面的文章太少,只好硬着头皮去爬文档。
一把心酸一把泪啊 😭😭😭😭😭

跟着文档走

官方文档步骤

文档介绍的是 Next.js + React 搭建的服务端渲染
下面我使用 Koa + Vue 搭建前后端分离开发

构建框架

创建 Koa 项目,创建一个项目文件夹 myapp

cd myapp

初始化 package.json

1	npm init -y

安装 koa 以及各项依赖

1	npm i koa koa-views koa-static koa-router koa-session koa-body isomorphic-fetch -S

安装 nodemon 用于开发中热更新

1	npm i nodemon -D

创建启动文件 app.js

const Koa = require('koa');
const koaStatic = require('koa-static');
const path = require('path');
const koaViews = require('koa-views');
const app = new Koa();
app.use(session({ sameSite: 'none', secure: true }, app));

app.use(koaViews(path.join(__dirname, './src/view'), { extension: 'html' }));
app.listen(port, () => {
  console.log('> http://127.0.0.1:%d', port);
});

创建 src 文件夹 , 在 src 下面创建 view 文件夹
在 view 文件夹下新建 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>App install</title>
  </head>
  <body>
    <h1>App install</h1>
  </body>
</html>

创建 route 文件夹新建 index.js

const router = require('koa-router')();
router.get('/index', async (ctx, next) => {
  ctx.type = 'html';
  await ctx.render('index');
});

module.exports = router;

在 package.json 添加

// ...
 "scripts": {
    "start": "nodemon  app",
    // ...
  }
  // ...

启动项目

1	npm run start

到此我们的项目已经可以运行了, 但是怎么和 Shopify 商店联系起来呢?😜😜😜(来看下一篇)