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 introduction #2380

Open
wants to merge 1 commit into
base: miho-deployment-docs
Choose a base branch
from
Open
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
41 changes: 38 additions & 3 deletions web/docs/deployment/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,44 @@
title: Introduction
---

TODO: the time to share your app with the world has come
After developing your app locally on your machine, the next step is to deploy it to the web so that others can access it.

In this section, we'll walk you through the steps to deploy your Wasp app.

### Wasp app structure

Before we start, let's understand the structure of a Wasp app.

A Wasp app consists of three main parts:
- **Client app**
- It's a single-page application (SPA), built using [React](https://react.dev/). It's what the user sees and interacts with.
- It's usually served by some static file server or you can host it on a CDN like Cloudflare or Netlify.

- **Server app**:
- The backend of your app, built using [Express](https://expressjs.com/) on Node.js.
- It handles requests from the client app, interacts with the database, and returns responses.
- It's packaged using Docker images, so it can deployed anywhere that supports Docker.

- **Database**:
- Wasp uses [PostgreSQL](https://www.postgresql.org/) as its production database.
- You can host the database on your own server or use a cloud service.


![Wasp app structure](/img/deploying/wasp-app-flow.gif)

The thing to take away from this: the client app and server app are separate applications that communicate with each other over HTTP. They can be deployed independently of each other, we'll show you how to do that in the [deployment methods](./deployment-methods/overview.md) section.

Server needs to be able to communicate with the database, we'll show you how to set that up using [env variables](./env-vars.md).

### Deploying your app

In the following sections, we'll go through all the different things you need to know about deployment:

- How [env variables](./env-vars.md) work in production - they are different than using .env files in development
- Production [database setup](./database.md) - how migrations work, how to connect to the database, etc.
- Different deployment methods (using [Wasp's CLI](./deployment-methods/cli.md), [cloud services](./deployment-methods/paas.md), [self-hosting](./deployment-methods/self-hosted.md), etc.)
- How to [set up CI/CD](./ci-cd.md) for your app - automatically deploy your app when you push to your Git repository
- Some [extras](./extras.md) like custom domains, CDN, etc.

TODO: we'll take you through the process of deploying your app to the web

TODO: first, you'll need to understand the structure of a Wasp app: Node.js backend, React frontend, and a PostgreSQL database. We'll explain the client app, server app and how it connects to the database.

Binary file added web/static/img/deploying/wasp-app-flow.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading