如果快速搭建一个可以用于全球收款的web应用?

其实github和网上有很多开源或者付费的模版,可以用户全球化页面的搭建。

但是这些基本都是外国人开发的,中文生态很不友好。小编今天就推荐一个GitHub上的由国人开源的新项目。该项目3月26日开源以来,已收获230+star,增长势头很猛,口碑也是不错。

今天我就用这个项目,来教大家快速搭建一个可以用与全球收款的web应用。

先上地址:github.com/saasfly/saa…

demo展示:saasfly

这是一款易用的、企业级就绪的Nextjs模版。说到这里了解Nextjs的小伙伴就应该立即明白了,该项目从开发到上线,完全不用写后端代码哦~

下面我就手把手教你,用Saasfly,快速交付!

1. 环境需要

  • Node.js – 18.17 或更高版本。
  • Bun – 1.0 或更高版本。 bun安装教程
  • OS – macOS, Windows (包括 WSL), 和 Linux。
  • PostgreSQL – 推荐大家用docker安装一个,或者去vercel申请一个免费的。

顺便说一下,我推荐你使用 NVM (Node Version Manager) 去管理你本地的node环境。

2. 执行命令行

bun create saasfly

在命令执行过程中,会自动做如下几个操作:

  1. 克隆 Saasfly 的仓库到你的本地文件夹。
  2. 删除git 的 history
  3. 安装相关以来
  4. 生成 prisma type

3. 启动 Saasfly

3.1 设置环境变量

进入saasfly 文件夹, 复制 .env.example 文件,并将新文件重命名为 .env.local,然后输入你的变量值。

cd saasfly
cp .env.example .env.local

请确保您已经搭建好了postgreSQL。

`POSTGRES_URL` 必须在你的 .env.local 文件中已经填写好。

# Format Example
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"

POSTGRES_URL="postgres://postgres:123456@127.0.0.1:5432/saasfly"

运行如下命令:

bun db:push

输出:

🚀  Your database is now in sync with your Prisma schema. Done in 151ms

┌─────────────────────────────────────────────────────────┐
│  Update available 5.9.1 -> 5.10.2                       │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘

3.2 运行 Run Build

bun run build

3.3 启动server

bun run dev:web

输出:

@saasfly/nextjs:dev: cache bypass, force executing ad8bea47f156e113
@saasfly/nextjs:dev: $ bun with-env next dev
@saasfly/nextjs:dev: $ dotenv -e ../../.env.local -- next dev
@saasfly/nextjs:dev:    ▲ Next.js 14.1.0
@saasfly/nextjs:dev:    - Local:        http://localhost:3000
@saasfly/nextjs:dev:
@saasfly/nextjs:dev:    automatically enabled Fast Refresh for 1 custom loader
@saasfly/nextjs:dev:  ✓ Ready in 12.1s

在浏览器输入: http://localhost:3000。如果一切顺利,你将看到如下页面

如果快速搭建一个可以用于全球收款的web应用?

​编辑

那么恭喜你,成功了!

如果你想使用支付功能,Saasfly集成了Stripe。只需你申请好Stripe账户,将密钥填入 .env.local 就可以啦~

更多操作可以查看:Welcome to Saasfly | Saasfly Docs

如果满意,大家可以去GitHub留下星星哦~

github.com/saasfly/saa…

原文链接:https://juejin.cn/post/7352762468845174823 作者:Nextify

(0)
上一篇 2024年4月1日 下午4:05
下一篇 2024年4月1日 下午4:16

相关推荐

发表评论

登录后才能评论