Shopify Next App 模板安装与配置指南

Shopify Next App 模板安装与配置指南

shopify-next-app Shopify app template on Next.js with app directory 项目地址: https://gitcode.com/gh_mirrors/sh/shopify-next-app

1. 项目基础介绍

shopify-next-app 是一个开源项目，旨在帮助开发者快速搭建基于 Shopify 的嵌入式应用，使用 Next.js 框架和 TypeScript 语言。这个模板包含构建 Shopify 应用所需的基础组件和工具，如认证、数据库管理、以及与 Shopify API 的交互。

2. 项目使用的关键技术和框架

• Next.js: 用于构建应用的 React 框架，提供服务器端渲染和静态站点生成等功能。
• TypeScript: 提供类型系统和对 JavaScript 的静态类型检查，增加代码的可维护性。
• Prisma (可选): 用于数据库连接和迁移的 ORM 工具。
• Tanstack Query: 用于与 Shopify GraphQL API 交互的库。
• App Bridge v4: 为前端 API 请求提供认证。
• Shopify API 库: 用于服务器端处理 OAuth 认证。
• Polaris React: Shopify 官方 UI 组件库，用于构建统一用户体验。
• Tailwind CSS: 功能类优先的 CSS 框架，用于快速开发响应式设计。
• Docker (可选): 用于本地开发环境中的数据库设置。
• Graphql-Codegen: 生成 GraphQL 查询和变异的类型定义。

3. 安装和配置准备工作

在开始之前，请确保您已经安装了以下工具：

• Node.js: 项目运行的基础环境，建议使用 LTS 版本。
• Git: 用于克隆和更新项目代码。
• Docker (可选): 如果您打算使用 Docker 进行本地开发环境设置。

详细安装步骤

1. 克隆项目

   使用 Git 将项目克隆到本地：

   git clone https://github.com/ozzyonfire/shopify-next-app.git
   cd shopify-next-app
   

2. 安装依赖

   使用 npm 或 pnpm 安装项目依赖：

   npm install # 或者使用 pnpm install
   

   如果您选择使用 Docker，运行以下命令启动 Docker 容器：

   docker-compose up
   

   然后执行迁移命令：

   npx prisma migrate dev --create-only
   

3. 配置环境变量

   在项目根目录下创建一个 .env 文件，并添加以下内容：

   DATABASE_URL= # 数据库连接字符串
   POSTGRES_PASSWORD= # 数据库密码（如果通过 Docker 运行）
   

   Shopify CLI 会自动填充前两个变量。

4. 启动开发服务器

   使用以下命令启动开发服务器：

   npm run dev # 或者使用 pnpm run dev
   

   打开浏览器并访问 http://localhost:3000 查看您的应用。

5. 生成 GraphQL 类型

   运行以下命令生成 GraphQL 查询和变异的类型定义：

   npm run graphql-codegen # 或者使用 pnpm run graphql-codegen
   

   这将为您的 Apollo 客户端提供类型支持，并在 IDE 中提供智能提示。

以上步骤将帮助您成功安装和配置 shopify-next-app 模板，开始您的 Shopify 应用开发。

shopify-next-app Shopify app template on Next.js with app directory 项目地址: https://gitcode.com/gh_mirrors/sh/shopify-next-app