mirror of
https://github.com/wasp-lang/open-saas.git
synced 2025-11-19 23:16:36 +01:00
Merge pull request #512 from wasp-lang/franjo/open-saas-cosistency
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
.wasp/
|
.wasp/
|
||||||
dist/
|
dist/
|
||||||
|
|
||||||
# OpenSaaS app diff folder.
|
# Open SaaS app diff folder.
|
||||||
app_diff/
|
app_diff/
|
||||||
|
|
||||||
# Formatting `.md` and `.mdx` files can introduce logical changes.
|
# Formatting `.md` and `.mdx` files can introduce logical changes.
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
# OpenSaaS Docs and Blog
|
# OpenSaaS Docs and Blog
|
||||||
|
|
||||||
This is the docs and blog for the OpenSaaS.sh website, [](https://starlight.astro.build)
|
This is the docs and blog for the [OpenSaaS.sh](https://opensaas.sh/) website, [](https://starlight.astro.build)
|
||||||
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
|
|||||||
@@ -23,7 +23,8 @@ If you find this template useful, consider giving us [a star on GitHub](https://
|
|||||||
## What's inside?
|
## What's inside?
|
||||||
|
|
||||||
The template itself is built on top of some very powerful tools and frameworks, including:
|
The template itself is built on top of some very powerful tools and frameworks, including:
|
||||||
- [Wasp](https://wasp.sh) - a full-stack React, NodeJS, Prisma framework with superpowers- [Astro](https://starlight.astro.build/) - Astro's lightweight "Starlight" template for documentation and blog
|
- [Wasp](https://wasp.sh) - a full-stack React, NodeJS, Prisma framework with superpowers
|
||||||
|
- [Astro](https://starlight.astro.build/) - Astro's lightweight "Starlight" template for documentation and blog
|
||||||
- [Stripe](https://stripe.com) or [Lemon Squeezy](https://lemonsqueezy.com/) - for products and payments
|
- [Stripe](https://stripe.com) or [Lemon Squeezy](https://lemonsqueezy.com/) - for products and payments
|
||||||
- [Plausible](https://plausible.io) or [Google](https://analytics.google.com/) Analytics
|
- [Plausible](https://plausible.io) or [Google](https://analytics.google.com/) Analytics
|
||||||
- [OpenAI](https://openai.com) - OpenAI API integrated into the app or [Replicate](https://replicate.com/) (coming soon )
|
- [OpenAI](https://openai.com) - OpenAI API integrated into the app or [Replicate](https://replicate.com/) (coming soon )
|
||||||
@@ -64,7 +65,7 @@ If you prefer video tutorials, you can watch this walkthrough below which will g
|
|||||||
### Pre-requisites
|
### Pre-requisites
|
||||||
|
|
||||||
You must have Node.js (and NPM) installed on your machine and available in `PATH` to use Wasp.
|
You must have Node.js (and NPM) installed on your machine and available in `PATH` to use Wasp.
|
||||||
Your version of Node.js must be >= 20.
|
Your version of Node.js must be >= 22.12.
|
||||||
|
|
||||||
To switch easily between Node.js versions, we recommend using [nvm](https://github.com/nvm-sh/nvm).
|
To switch easily between Node.js versions, we recommend using [nvm](https://github.com/nvm-sh/nvm).
|
||||||
|
|
||||||
@@ -191,7 +192,7 @@ You can install the Wasp VSCode extension by searching for "Wasp" in the Extensi
|
|||||||
|
|
||||||
## Setting up your SaaS app
|
## Setting up your SaaS app
|
||||||
|
|
||||||
### Cloning the OpenSaaS template
|
### Cloning the Open SaaS template
|
||||||
|
|
||||||
From the directory where you'd like to create your new project run:
|
From the directory where you'd like to create your new project run:
|
||||||
```sh
|
```sh
|
||||||
@@ -355,7 +356,7 @@ We've structured this full-stack app template vertically (by feature). That mean
|
|||||||
Let's check out what's in the `app` folder in more detail:
|
Let's check out what's in the `app` folder in more detail:
|
||||||
|
|
||||||
:::caution[v0.13 and below]
|
:::caution[v0.13 and below]
|
||||||
If you are using an older version of the OpenSaaS template with Wasp `v0.13.x` or below, you may see a slightly different file structure. But don't worry, the vast majority of the code and features are the same!
|
If you are using an older version of the Open SaaS template with Wasp `v0.13.x` or below, you may see a slightly different file structure. But don't worry, the vast majority of the code and features are the same!
|
||||||
:::
|
:::
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
@@ -874,7 +875,7 @@ To create a Google OAuth app and get your Google API keys, follow the instructio
|
|||||||
|
|
||||||
To create a GitHub OAuth app and get your GitHub API keys, follow the instructions in [Wasp's GitHub Auth docs](https://wasp.sh/docs/auth/social-auth/github#3-creating-a-github-oauth-app).
|
To create a GitHub OAuth app and get your GitHub API keys, follow the instructions in [Wasp's GitHub Auth docs](https://wasp.sh/docs/auth/social-auth/github#3-creating-a-github-oauth-app).
|
||||||
|
|
||||||
To create a Discord OAuth app and get your Discord API keys, follow the instructions in [Wasp's Discord Auth docs](docs/auth/social-auth/google#3-creating-a-google-oauth-app)
|
To create a Discord OAuth app and get your Discord API keys, follow the instructions in [Wasp's Discord Auth docs](https://wasp.sh/docs/auth/social-auth/discord#3-creating-a-discord-app)
|
||||||
|
|
||||||
Again, Wasp will take care of the rest and update your AuthUI components accordingly.
|
Again, Wasp will take care of the rest and update your AuthUI components accordingly.
|
||||||
|
|
||||||
@@ -1287,13 +1288,7 @@ export const stripe = new Stripe(process.env.STRIPE_KEY!, {
|
|||||||
2. click on `+ add endpoint`
|
2. click on `+ add endpoint`
|
||||||
3. enter your endpoint url, which will be the url of your deployed server + `/payments-webhook`, e.g. `https://open-saas-wasp-sh-server.fly.dev/payments-webhook`
|
3. enter your endpoint url, which will be the url of your deployed server + `/payments-webhook`, e.g. `https://open-saas-wasp-sh-server.fly.dev/payments-webhook`
|
||||||
|
|
||||||
4. select the events you want to listen to. These should be the same events you're consuming in your webhook. For example, if you haven't added any additional events to the webhook and are using the defaults that came with this template, then you'll need to add:
|
4. select the events you want to listen to. These should be the same events you're consuming in your webhook which you can find listed in [`src/payment/stripe/webhookPayload.ts`](https://github.com/wasp-lang/open-saas/blob/main/template/app/src/payment/stripe/webhookPayload.ts):
|
||||||
<br/>- `account.updated`
|
|
||||||
<br/>- `checkout.session.completed`
|
|
||||||
<br/>- `customer.subscription.deleted`
|
|
||||||
<br/>- `customer.subscription.updated`
|
|
||||||
<br/>- `invoice.paid`
|
|
||||||
<br/>- `payment_intent.succeeded`
|
|
||||||
|
|
||||||
5. after that, go to the webhook you just created and `reveal` the new signing secret.
|
5. after that, go to the webhook you just created and `reveal` the new signing secret.
|
||||||
6. add this secret to your deployed server's `STRIPE_WEBHOOK_SECRET=` environment variable. <br/>If you've deployed to Fly.io, you can do that easily with the following command:
|
6. add this secret to your deployed server's `STRIPE_WEBHOOK_SECRET=` environment variable. <br/>If you've deployed to Fly.io, you can do that easily with the following command:
|
||||||
@@ -2015,6 +2010,43 @@ The method you choose is up to you and will largely depend on the complexity of
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
# Vibe Coding with Open SaaS
|
||||||
|
|
||||||
|
If you're looking to use AI to help build (or "vibe code") your SaaS app, this guide is for you.
|
||||||
|
|
||||||
|
## Coding with AI, Open SaaS, & Wasp
|
||||||
|
|
||||||
|
Wasp is particularly well suited to coding with AI due to its central config file which gives LLMs context about the entire full-stack app, and its ability to manage boilerplate code so AI doesn't have to.
|
||||||
|
|
||||||
|
Regardless, there are still some shortcomings to using AI to code with Wasp, as well as a learning curve to using it effectively.
|
||||||
|
|
||||||
|
Luckily, we did the work for you and put together a bunch of resources to help you use Wasp & Open SaaS with AI as effectively as possible.
|
||||||
|
|
||||||
|
### AI Resources in the Template
|
||||||
|
|
||||||
|
The template comes with:
|
||||||
|
- A full set of rules files, `app/.cursor/rules`, to be used with Cursor or adapted to your coding tool of choice (Windsurf, Claude Code, etc.).
|
||||||
|
- A set of example prompts, `app/.cursor/example-prompts.md`, to help you get started.
|
||||||
|
|
||||||
|
### LLM-Friendly Documentation
|
||||||
|
|
||||||
|
We've also created a bunch of LLM-friendly documentation:
|
||||||
|
- [Open SaaS Docs - LLMs.txt](https://docs.opensaas.sh/llms.txt) - Links to the raw text docs.
|
||||||
|
- **[Open SaaS Docs - LLMs-full.txt](https://docs.opensaas.sh/llms-full.txt) - Complete docs as one text file.**
|
||||||
|
- Coming Soon! ~~[Wasp Docs - LLMs.txt](https://wasp.sh/llms.txt)~~ - Links to the raw text docs.
|
||||||
|
- Coming Soon! ~~[Wasp Docs - LLMs-full.txt](https://wasp.sh/llms-full.txt)~~ - Complete docs as one text file.
|
||||||
|
|
||||||
|
Add these to your AI-assisted IDE settings so you can easily reference them in your chat sessions with the LLM.
|
||||||
|
**In most cases, you'll want to pass the `llms-full.txt` to the LLM and ask it to help you with a specific task.**
|
||||||
|
|
||||||
|
### More AI-assisted Coding Learning Resources
|
||||||
|
|
||||||
|
Here's a list of articles and tutorials we've made:
|
||||||
|
- [3hr YouTube tutorial: Vibe Coding a Personal Finance App w/ Wasp & Cursor](https://www.youtube.com/watch?v=WYzEROo7reY)
|
||||||
|
- [Article: A Structured Workflow for "Vibe Coding" Full-Stack Apps](https://dev.to/wasp/a-structured-workflow-for-vibe-coding-full-stack-apps-352l)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
# Admin Dashboard
|
# Admin Dashboard
|
||||||
|
|
||||||
This is a reference on how the Admin dashboard, available at `/admin`, is set up.
|
This is a reference on how the Admin dashboard, available at `/admin`, is set up.
|
||||||
|
|||||||
@@ -20,5 +20,6 @@
|
|||||||
- [SEO](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/seo.mdx)
|
- [SEO](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/seo.mdx)
|
||||||
- [Tests](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/tests.md)
|
- [Tests](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/tests.md)
|
||||||
- [How (Not) to Update Your Open SaaS App](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/updating-opensaas.md)
|
- [How (Not) to Update Your Open SaaS App](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/updating-opensaas.md)
|
||||||
|
- [Vibe Coding with Open SaaS](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/guides/vibe-coding.mdx)
|
||||||
- [Admin Dashboard](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/general/admin-dashboard.mdx)
|
- [Admin Dashboard](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/general/admin-dashboard.mdx)
|
||||||
- [User Overview](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/general/user-overview.md)
|
- [User Overview](https://raw.githubusercontent.com/wasp-lang/open-saas/main/opensaas-sh/blog/src/content/docs/general/user-overview.md)
|
||||||
@@ -38,7 +38,7 @@ Here's a video presenting Open SaaS, generated with TurboReel 🐝
|
|||||||
|
|
||||||
## TurboReel's Tech Stack
|
## TurboReel's Tech Stack
|
||||||
|
|
||||||
TurboReel lets users generate short explainer videos with minimal effort. Starting with a single text prompt describing the video's purpose (e.g. “Create a video on building your SaaS with OpenSaaS”), you can produce professional grade TikTok and YT shorts without needing any video editing skills.
|
TurboReel lets users generate short explainer videos with minimal effort. Starting with a single text prompt describing the video's purpose (e.g. “Create a video on building your SaaS with Open SaaS”), you can produce professional grade TikTok and YT shorts without needing any video editing skills.
|
||||||
|
|
||||||
<VideoPlayer src={studioInterface} lgWidth="100%" />
|
<VideoPlayer src={studioInterface} lgWidth="100%" />
|
||||||
|
|
||||||
@@ -116,7 +116,7 @@ app myApp {
|
|||||||
|
|
||||||
### Out-of-the-box Stripe integration
|
### Out-of-the-box Stripe integration
|
||||||
|
|
||||||
Another significant advantage for Peter was how Open SaaS handled third-party integrations. Setting up services like [**Stripe for payments**](https://docs.opensaas.sh/guides/payments-integration/) often requires a lot of effort, but Wasp's OpenSaaS streamlined the process - you just need to add your API key and you're good to go.
|
Another significant advantage for Peter was how Open SaaS handled third-party integrations. Setting up services like [**Stripe for payments**](https://docs.opensaas.sh/guides/payments-integration/) often requires a lot of effort, but Wasp's Open SaaS streamlined the process - you just need to add your API key and you're good to go.
|
||||||
|
|
||||||
> *"Payments are usually a huge headache, but Open SaaS made it so smooth. I didn't have to spend weeks integrating Stripe—it just worked. That gave me more time to focus on TurboReel's core functionality.*"
|
> *"Payments are usually a huge headache, but Open SaaS made it so smooth. I didn't have to spend weeks integrating Stripe—it just worked. That gave me more time to focus on TurboReel's core functionality.*"
|
||||||
|
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ You can install the Wasp VSCode extension by searching for "Wasp" in the Extensi
|
|||||||
|
|
||||||
## Setting up your SaaS app
|
## Setting up your SaaS app
|
||||||
|
|
||||||
### Cloning the OpenSaaS template
|
### Cloning the Open SaaS template
|
||||||
|
|
||||||
From the directory where you'd like to create your new project run:
|
From the directory where you'd like to create your new project run:
|
||||||
```sh
|
```sh
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ We've structured this full-stack app template vertically (by feature). That mean
|
|||||||
Let's check out what's in the `app` folder in more detail:
|
Let's check out what's in the `app` folder in more detail:
|
||||||
|
|
||||||
:::caution[v0.13 and below]
|
:::caution[v0.13 and below]
|
||||||
If you are using an older version of the OpenSaaS template with Wasp `v0.13.x` or below, you may see a slightly different file structure. But don't worry, the vast majority of the code and features are the same! 😅
|
If you are using an older version of the Open SaaS template with Wasp `v0.13.x` or below, you may see a slightly different file structure. But don't worry, the vast majority of the code and features are the same! 😅
|
||||||
:::
|
:::
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
# <YOUR_APP_NAME>
|
# <YOUR_APP_NAME>
|
||||||
|
|
||||||
This project is based on [OpenSaas](https://opensaas.sh) template and consists of three main dirs:
|
This project is based on [Open Saas](https://opensaas.sh) template and consists of three main dirs:
|
||||||
|
|
||||||
1. `app` - Your web app, built with [Wasp](https://wasp.sh).
|
1. `app` - Your web app, built with [Wasp](https://wasp.sh).
|
||||||
2. `e2e-tests` - [Playwright](https://playwright.dev/) tests for your Wasp web app.
|
2. `e2e-tests` - [Playwright](https://playwright.dev/) tests for your Wasp web app.
|
||||||
|
|||||||
Reference in New Issue
Block a user