Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deployment docs extras #2443

Merged
merged 5 commits into from
Jan 12, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/docs/deployment/ci-cd.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,4 @@ Wasp's client app is a single page application (SPA) which you build into static

<!-- TOOD: update links below -->

Check out our instructions for deploying the client app to [Netlify](#) or [Cloudflare](#) where you can check out the example deployment using Github Actions.
Check out our instructions for deploying the client app to [Netlify](./deployment-methods/paas.md#netlify) or [Cloudflare](./deployment-methods/paas.md#cloudflare) where you can check out the example deployment using Github Actions.
2 changes: 1 addition & 1 deletion web/docs/deployment/deployment-methods/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ You can validate your ownership of mycoolapp.com by:
wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=https://mycoolapp.com
```

<small>
<small>

We need to do this to keep our CORS configuration up to date.
</small>
Expand Down
2 changes: 1 addition & 1 deletion web/docs/deployment/env-vars.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ You can provide production env vars to your server code in production by definin

::::caution Set the required env vars

Make sure to go through [all the required server env vars](../project/env-vars.md#general-configuration-1) like `DATABASE_URL`, `WASP_WEB_CLIENT_URL` etc. and set them up in your production environment.
Make sure to go through [all the required server env vars](../project/env-vars.md#server-general-configuration) like `DATABASE_URL`, `WASP_WEB_CLIENT_URL` etc. and set them up in your production environment.

**If you are using the [Wasp CLI](./deployment-methods/cli.md)** deployment method, Wasp will set the general configuration env vars for you, but you will need to set the rest of the env vars yourself (like the ones for OAuth auth methods or any other custom env vars you might have defined).
::::
Expand Down
81 changes: 78 additions & 3 deletions web/docs/deployment/extras.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,83 @@
title: Extras
---

TODO: Is Wasp production ready? What are the limitations?
In this section, we will cover some additional topics that are important for deploying Wasp apps in production.

TODO: DDos and CDN recommendations
### Custom domain setup

TODO: Custom domain setup
If you want to set up a custom domain for your Wasp app, you can do it for both the client and the server.

The important part is setting up the custom domain for the client - that's what your users visit from their browsers. Setting up a custom domain for the server is optional, but it can be useful if you'd like to hide some server details (for example, the IP address or auto-generated domain name) from the users.

#### How to do it?

It's usually a two-step process, and it's the same for both the client and the server:

1. Set up the **DNS records** for the domain.

This will depend on your hosting provider. You can usually do this by adding an `A` record in your DNS settings that points to the app's IPv4 address. You often set the `AAAA` record for IPv6 address as well. Some hosting providers ask you to set the `CNAME` record instead of the `A` and `AAAA` records.

:::note Using Wasp CLI?

Check out how to do it for [Fly with Wasp CLI](./deployment-methods/cli.md#using-a-custom-domain-for-your-app) if you are using Wasp CLI to deploy your app.
:::

2. Set up the **environment variables** for the app.

You need to set the environment variables so Wasp configures the app correctly (for example, for CORS to work correctly).

#### Client domain env vars

When [building the client](./env-vars.md#client-env-vars), set `REACT_APP_API_URL` to point to your server domain:

```bash
REACT_APP_API_URL=https://api.myapp.com
```

<small>

Learn more about client configuration in the [env vars section](../project/env-vars.md#client-general-configuration).
</small>

#### Server domain env vars

For the server, you need to [configure two variables](./env-vars.md#server-env-vars):

- `WASP_WEB_CLIENT_URL`: Your client app's domain
- `WASP_SERVER_URL`: Your server domain

<br/>

```bash
WASP_WEB_CLIENT_URL=https://myapp.com
WASP_SERVER_URL=https://server.myapp.com
```

<small>

Learn more about server env variables in the [env vars section](../project/env-vars.md#server-general-configuration).
</small>

### DDoS protection and CDN recommendations

When deploying your Wasp app, you might want to consider using a Content Delivery Network (CDN) and DDoS protection service to improve the performance and security of your app:

1. **Content Delivery Network (CDN)** is a network of servers distributed worldwide that caches static assets like images, CSS, and JavaScript files.

Using a CDN in front of your **client** can help with caching static assets and serving them faster to users around the world. When a user requests a file, the CDN serves it from the server closest to the user, improving load times.

2. **Distributed Denial of Service (DDoS)** attacks are a common threat to web applications.

Attackers send a large amount of traffic to your server, overwhelming it and making it unavailable to legitimate users. You can use a DDoS protection service for both your **client and server** to protect your app from these attacks.

We recommend using [Cloudflare](https://www.cloudflare.com/) for both CDN and DDoS protection. It's easy to set up and provides a free tier that should be enough for most small to medium-sized apps.

There are other CDN providers like [Fastly](https://www.fastly.com/), [Bunny](https://bunnycdn.com/) and [Amazon Cloudfront](https://aws.amazon.com/cloudfront/) that you can consider as well.

### Are Wasp apps production ready?

As we mentioned in the [introduction](./intro.md) section, what we call **Wasp apps** are three separate pieces: the client, the server, and the database.

For the server, we are using Node.js and the battle-tested Express.js framework. For the database, we are using PostgreSQL, which is a powerful and reliable database system. For the client, we are using React and Vite, which are both widely used and well-maintained.

Each of these pieces is production-ready on its own, and Wasp just makes it easy to connect them together. Keep in mind that Wasp is still considered beta software, so there might be some rough edges here and there.
43 changes: 22 additions & 21 deletions web/docs/project/env-vars.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ Read more about the `env` object in the [API reference](#client-env-vars-1).

Here are the client env vars that Wasp defines:

#### General Configuration
#### General Configuration {#client-general-configuration}

These are some general env variables used for various Wasp features:

<EnvVarsTable envVars={[
{ name: "REACT_APP_API_URL", type: "URL", isRequired: false, defaultValue: "http://localhost:3001", note: "The client uses this as the server URL." }
{ name: "REACT_APP_API_URL", type: "URL", isRequired: false, defaultValue: "http://localhost:3001", note: "The client uses this as the server URL." }
]} />

## Server Env Vars
Expand Down Expand Up @@ -86,54 +86,54 @@ Read more about the `env` object in the [API reference](#server-env-vars-1).

### Wasp Server Env Vars

#### General Configuration
#### General Configuration {#server-general-configuration}

These are some general env variables used for various Wasp features:

<EnvVarsTable envVars={[
{ name: "DATABASE_URL", type: "String", isRequired: true, note: "The URL of the PostgreSQL database you want your app to use." },
{ name: "WASP_WEB_CLIENT_URL", type: "URL", isRequired: true, note: "Server uses this value as your client URL in various features e.g. linking to your app in e-mails." },
{ name: "WASP_SERVER_URL", type: "URL", isRequired: true, note: "Server uses this value as your server URL in various features e.g. to redirect users when logging in with OAuth providers like Google or GitHub." },
{ name: "JWT_SECRET", type: "String", isRequired: true, note: <span>Needed to generate secure tokens. <a href="https://jwtsecret.com/generate" target="_blank" rel="noreferrer">Generate</a> a random string at least 32 characters long.</span> },
{ name: "PORT", type: "Integer", isRequired: false, defaultValue: "3001", note: "This is where the server listens for requests." }
{ name: "DATABASE_URL", type: "String", isRequired: true, note: "The URL of the PostgreSQL database you want your app to use." },
{ name: "WASP_WEB_CLIENT_URL", type: "URL", isRequired: true, note: "Server uses this value as your client URL in various features e.g. linking to your app in e-mails." },
{ name: "WASP_SERVER_URL", type: "URL", isRequired: true, note: "Server uses this value as your server URL in various features e.g. to redirect users when logging in with OAuth providers like Google or GitHub." },
{ name: "JWT_SECRET", type: "String", isRequired: true, note: <span>Needed to generate secure tokens. <a href="https://jwtsecret.com/generate" target="_blank" rel="noreferrer">Generate</a> a random string at least 32 characters long.</span> },
{ name: "PORT", type: "Integer", isRequired: false, defaultValue: "3001", note: "This is where the server listens for requests." }
]} />

#### SMTP Email Sender

If you are using `SMTP` as your email sender, you need to provide the following environment variables:

<EnvVarsTable envVars={[
{ name: "SMTP_HOST", type: "String", isRequired: true, note: "The SMTP server host." },
{ name: "SMTP_PORT", type: "Integer", isRequired: true, note: "The SMTP server port." },
{ name: "SMTP_USERNAME", type: "String", isRequired: true, note: "The SMTP server username." },
{ name: "SMTP_PASSWORD", type: "String", isRequired: true, note: "The SMTP server password." }
{ name: "SMTP_HOST", type: "String", isRequired: true, note: "The SMTP server host." },
{ name: "SMTP_PORT", type: "Integer", isRequired: true, note: "The SMTP server port." },
{ name: "SMTP_USERNAME", type: "String", isRequired: true, note: "The SMTP server username." },
{ name: "SMTP_PASSWORD", type: "String", isRequired: true, note: "The SMTP server password." }
]} />

#### SendGrid Email Sender

If you are using `SendGrid` as your email sender, you need to provide the following environment variables:

<EnvVarsTable envVars={[
{ name: "SENDGRID_API_KEY", type: "String", isRequired: true, note: "The SendGrid API key." }
{ name: "SENDGRID_API_KEY", type: "String", isRequired: true, note: "The SendGrid API key." }
]} />

#### Mailgun Email Sender

If you are using `Mailgun` as your email sender, you need to provide the following environment variables:

<EnvVarsTable envVars={[
{ name: "MAILGUN_API_KEY", type: "String", isRequired: true, note: "The Mailgun API key." },
{ name: "MAILGUN_DOMAIN", type: "String", isRequired: true, note: "The Mailgun domain." },
{ name: "MAILGUN_API_URL", type: "URL", isRequired: false, note: <span>Useful if you want to use the EU API endpoint (<code>https://api.eu.mailgun.net</code>).</span> }
{ name: "MAILGUN_API_KEY", type: "String", isRequired: true, note: "The Mailgun API key." },
{ name: "MAILGUN_DOMAIN", type: "String", isRequired: true, note: "The Mailgun domain." },
{ name: "MAILGUN_API_URL", type: "URL", isRequired: false, note: <span>Useful if you want to use the EU API endpoint (<code>https://api.eu.mailgun.net</code>).</span> }
]} />

#### OAuth Providers

If you are using OAuth, you need to provide the following environment variables:

<EnvVarsTable envVars={[
{ name: "<PROVIDER_NAME>_CLIENT_ID", type: "String", isRequired: true, note: "The client ID provided by the OAuth provider." },
{ name: "<PROVIDER_NAME>_CLIENT_SECRET", type: "String", isRequired: true, note: "The client secret provided by the OAuth provider." }
{ name: "<PROVIDER_NAME>_CLIENT_ID", type: "String", isRequired: true, note: "The client ID provided by the OAuth provider." },
{ name: "<PROVIDER_NAME>_CLIENT_SECRET", type: "String", isRequired: true, note: "The client secret provided by the OAuth provider." }
]} />

<small>
Expand All @@ -144,22 +144,23 @@ If you are using OAuth, you need to provide the following environment variables:
If you are using [Keycloak](../auth/social-auth/keycloak.md), you'll need to provide one extra environment variable:

<EnvVarsTable envVars={[
{ name: "KEYCLOAK_REALM_URL", type: "URL", isRequired: true, note: "The URL of the Keycloak realm." }
{ name: "KEYCLOAK_REALM_URL", type: "URL", isRequired: true, note: "The URL of the Keycloak realm." }
]} />

#### Jobs

<EnvVarsTable envVars={[
{ name: "PG_BOSS_NEW_OPTIONS", type: "String", isRequired: false, note: <span>It's parsed as JSON. Enables you to provide <a href="../advanced/jobs#declaring-jobs">custom config</a> for PgBoss.</span> }
{ name: "PG_BOSS_NEW_OPTIONS", type: "String", isRequired: false, note: <span>It's parsed as JSON. Enables you to provide <a href="../advanced/jobs#declaring-jobs">custom config</a> for PgBoss.</span> }
]} />

#### Development

We provide some helper env variables in development:

<!-- TODO: this not really Boolean, it's really a string that accepts "true" as only true value -->

<EnvVarsTable envVars={[
{ name: "SKIP_EMAIL_VERIFICATION_IN_DEV", type: "Boolean", isRequired: false, defaultValue: "false", note: "If set to true, automatically sets user emails as verified in development." }
{ name: "SKIP_EMAIL_VERIFICATION_IN_DEV", type: "Boolean", isRequired: false, defaultValue: "false", note: "If set to true, automatically sets user emails as verified in development." }
]} />

## Defining Env Vars in Development
Expand Down