首先,设置构建和运行应用程序所需的工具和依赖项。
安装最新的稳定版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
我们使用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文件。
该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
源文地址:https://www.shopifyexp.com/blogs/shopify-develop-course/node-js-react-create-shopify-app-2
发表一下您想说的