使用Node.js+React创建Shopify应用系列教程(二):创建应用

首先,设置构建和运行应用程序所需的工具和依赖项。

安装最新的稳定版Node.js

下载并安装Node.js。

你可以通过终端运行以下命令查看是否安装了Node.js:

node -v

如果已安装,请确保你使用的是8.1.0或更高版本。

 

创建一个项目文件夹

你将需要一个文件夹来存储应用程序的内容。

创建一个以你的应用程序命名的项目文件夹。例如,sample-embedded-app。

进入你的项目文件夹:

cd sample-embedded-app

创建一个package.json文件

Node.js包含一个名为npm的工具,该工具管理Node.js软件包以简化开发。package.json文件包含元数据,告诉NPM有关应用的依赖。说白了就是应用程序的说明文件和定义依赖关系。应用程序的软件包不太可能需要公开共享,因此你可以使用默认值并将描述性字段留空。

使用默认值创建一个package.json文件:

npm init -y

 

使用Next.js构建一个React项目

我们使用React去开发前端页面,React是组件式开发的前端框架,而Next.js就是一个React框架,简化React开发。Next.js能实现客户端渲染和服务器端渲染,当使用服务器端渲染时,第一次访问页面会有点慢,后面就好多了,因为第一次需要在服务器端生成页面。具体这些前端的开发技术可以百度一下,这里不详说这个。

安装React,ReactDOM和Next.js

在你的根项目文件夹中,安装React,ReactDOM和Next.JS:

npm install --save react react-dom next

创建视图

视图是包含前端组件的页面。Next.js 使用文件名自动路由存储在页面目录中的视图。

在你的项目文件夹中 创建一个页面文件夹pages。

在pages文件夹中 创建一个index.js文件。

 

添加你的第一个React组件

 

该index.js文件将成为你的应用程序的主页。

在文本编辑器中 打开pages / index.js

            const Index = () => (

              <div>

                <p>Sample app using React and Next.js</p>

              </div>

            );

            export default Index;

 

添加脚本以构建和启动你的应用

将脚本添加到package.json中,以告诉npm通过Next.js运行你的应用。

在文本编辑器中 打开package.json。

将dev,build和start脚本添加到文件中:

{

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "next",

    "build": "next build",

    "start": "next start"

  }

}

 

运行你的项目

接下来启动你的应用程序。

进入根项目文件夹,然后启动服务器:

npm run dev

访问http://localhost:3000

image.png

 

源文地址:https://www.shopifyexp.com/blogs/shopify-develop-course/node-js-react-create-shopify-app-2


留个言

发表一下您想说的