Skip to content

Pengaturan Manual

Cara tercepat untuk membuat situs Saasfly baru adalah menggunakan create saasfly seperti yang ditunjukkan dalam panduan Instalasi.

Persyaratan sistem

  • Node.js - 18.17 atau lebih baru.
  • Bun - 1.0 atau lebih baru.
  • OS - macOS, Windows (termasuk WSL), dan Linux didukung.

Ngomong-ngomong, kami merekomendasikan penggunaan NVM (Node Version Manager) untuk menjalankan versi Node.js yang berbeda.

1. Instalasi Manual

Untuk membuat aplikasi Saasfly baru secara manual, hanya perlu beberapa langkah:

Fork dan Klon Repositori Dari GitHub

Silakan buka https://github.com/saasfly/saasfly , dan fork repositori ini.

Fork adalah salinan dari repositori. Fork repositori memungkinkan Anda bereksperimen dengan perubahan secara bebas tanpa memengaruhi proyek asli.

Klon repositori bercabang (silakan ganti <your_username> dengan nama akun GitHub Anda):

Terminal window
git clone https://github.com/<your_username>/saasfly.git

Anda akan melihat prosedur kloning:

remote: Enumerating objects: 402, done.
remote: Counting objects: 100% (402/402), done.
remote: Compressing objects: 100% (298/298), done.
remote: Total 402 (delta 77), reused 386 (delta 65), pack-reused 0
Receiving objects: 100% (402/402), 963.18 KiB | 130.00 KiB/s, done.
Resolving deltas: 100% (77/77), done.

Instal Ketergantungan

Untuk pengalaman yang lebih baik, silakan gunakan Bun (Cara menginstal Bun) , alih-alih npm atau yarn.

Menggunakan bun untuk menginstal dependensi:

Terminal window
bun i

Mungkin perlu waktu beberapa menit, lalu Anda akan melihat:

+ @saasfly/api@workspace:packages/api
+ @saasfly/auth@workspace:packages/auth
+ @saasfly/common@workspace:packages/common
+ @saasfly/db@workspace:packages/db
+ @saasfly/eslint-config@workspace:tooling/eslint-config
+ @saasfly/nextjs@workspace:apps/nextjs
+ @saasfly/prettier-config@workspace:tooling/prettier-config
+ @saasfly/stripe@workspace:packages/stripe
+ @saasfly/tailwind-config@workspace:tooling/tailwind-config
+ @saasfly/typescript-config@workspace:tooling/typescript-config
+ @saasfly/ui@workspace:packages/ui
+ @turbo/[email protected] (v1.12.4 available)
+ [email protected] (v1.12.4 available)
1296 packages installed [1133.89s]

Hasilkan Jenis Prisma

Pastikan Anda berada di folder saasfly, lalu gunakan bun untuk menghasilkan tipe Prisma:

Terminal window
cd packages/db/
bun db:generate

Keluaran:

✔ Generated Kysely types(1.7.1) to./ prisma in 1.32s

2. Mulai Saasfly

Anda harus melakukan daftar di bawah ini untuk menjalankan server.

Mengatur Variabel Lingkungan

Masuk ke folder saasfly, duplikat file .env.example, ganti namanya menjadi .env.local, dan masukkan variabel Anda.

Terminal window
cd saasfly
cp .env.example .env.local

Pastikan Anda memiliki DB Postgres (Jika Anda tidak memiliki Postgres, klik di sini) dan telah membuat database baru.

POSTGRES_URL harus ada di file .env.local Anda:

# Contoh Format
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"
POSTGRES_URL="postgres://postgres:[email protected]:5432/saasfly"

Kemudian, gunakan bun untuk membuat tabel database:

Terminal window
bun db:push

Keluaran:

🚀 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 │
└─────────────────────────────────────────────────────────┘

Jika terjadi kesalahan, Anda dapat berbicara dengan kami di Discord, kami dengan senang hati akan menjawab apa pun tentang Saasfly.

Jalankan build Pertama

Karena beberapa komponen dasar diperlukan waktu kompilasi, Anda harus run build terlebih dahulu.

Terminal window
bun run build

Jalankan Server Pengembangan

Gunakan bun run untuk memulai server web Anda:

Terminal window
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

Jika semuanya berjalan lancar, Saasfly sekarang akan melayani proyek Anda di http://localhost:3000, dan Anda dapat melihat hasilnya:

Installation

Selamat! Sekarang Anda dapat mulai membuat kode untuk membangun SaaS Anda.

Jika Anda baru mengenal Saasfly, lihat dokumen struktur proyek untuk ikhtisar semua file dan folder yang mungkin ada di aplikasi Anda.

Jalankan Dengan Stripe

Silakan baca artikel Stripe. Lalu gunakan bun dev untuk menjalankannya dengan Stripe:

Terminal window
bun dev