Skip to content

I've added a DEPLOYMENT.md file outlining the steps for building, r… #3

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
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
127 changes: 127 additions & 0 deletions DEPLOYMENT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
## Prerequisites

- **Node.js**: Ensure you have Node.js installed. This project uses pnpm as the package manager. Refer to the `packageManager` field in `package.json` for the specific version.
- **Cloudflare Account**: You will need a Cloudflare account to deploy and manage the application.
- **Wrangler CLI**: Install the Wrangler CLI, which is Cloudflare's command-line tool for managing Worker projects. You can install it using pnpm or npm (e.g., ````bash pnpm install -g wrangler ```` or ````bash npm install -g wrangler ````). After installation, log in to your Cloudflare account using ````bash wrangler login ````.

## Build Process

To build the entire monorepo, navigate to the root directory and run:

```bash
pnpm build
```

This command is orchestrated by `turbo`, which manages the build process for the applications within the monorepo, specifically `apps/server` and `apps/web`.

### `apps/web`

The `apps/web` application is built using the following command:

```bash
tsc && vite build
```

This command first compiles the TypeScript code (`tsc`) and then builds the application using Vite (`vite build`). The build output is located in the `apps/web/dist` directory.

### `apps/server`

The `apps/server` application does not have a separate, explicit build command defined in its `package.json`. Its bundling and preparation for deployment are handled by the `wrangler publish` command, which is covered in the Deployment section.

## Deploying the Server Application (`apps/server`)

The `apps/server` application is deployed to Cloudflare Workers.

### Deployment Command

To deploy the server application, use the `wrangler publish` command. It's recommended to use the pnpm script defined in `apps/server/package.json`:

```bash
cd apps/server
pnpm publish -- --env <environment_name>
```

Replace `<environment_name>` with the target environment, such as `preview` or `production`. For example, to deploy to the production environment:

```bash
cd apps/server
pnpm publish -- --env production
```

Alternatively, if Wrangler is installed globally or via a different project, you can run ````bash wrangler publish --env <environment_name> ```` directly from the `apps/server` directory.

### Environment Configuration

Environments (e.g., `preview`, `production`) are configured in the `apps/server/wrangler.toml` file. This file contains settings specific to each environment, including database bindings.

**Important**: The `wrangler.toml` file uses placeholders like `<id>` for `database_id` in the `preview` and `production` D1 database configurations. You **must** replace these placeholders with your actual Cloudflare D1 database IDs before deploying.

### Database Migrations

Database migrations are managed using pnpm scripts within the `apps/server` directory.

- **Applying Migrations**: To apply pending migrations to a specific environment, run:

```bash
cd apps/server
pnpm apply:<environment_name>
```

For example, to apply migrations to the production database:

```bash
cd apps/server
pnpm apply:production
```

- **Listing Migrations**: To list all migrations and their status for a specific environment, run:

```bash
cd apps/server
pnpm list:<environment_name>
```

For example, to list migrations for the production database:

```bash
cd apps/server
pnpm list:production
```

## Deploying the Web Application (`apps/web`)

The `apps/web` application is a static React application built with Vite. The build process, as described in the "Build Process" section, generates the static assets in the `apps/web/dist` directory.

This static site can be deployed to various platforms. Common choices include:

- **Cloudflare Pages**: Offers seamless integration with the Cloudflare ecosystem and is well-suited for hosting static sites.
- **Vercel**: Known for its ease of use and strong support for modern frontend frameworks.
- **Netlify**: Another popular platform providing continuous deployment, serverless functions, and more for static sites.
- **Other Options**:
- **AWS S3 + CloudFront**: A robust solution for hosting static assets with a global content delivery network.
- **GitHub Pages**: A simple way to host static sites directly from your GitHub repositories.
- **Traditional Web Servers**: You can also deploy the contents of `apps/web/dist` to any traditional web server like Apache or Nginx.

The specific deployment steps will vary depending on the platform you choose. You should consult the documentation of your selected hosting provider.

Generally, you will either:
- Configure the hosting platform to build the `apps/web` project (often by connecting to your Git repository and specifying the build command `pnpm build` from the monorepo root or `pnpm build` from the `apps/web` directory if configuring for that specific app).
- Or, build the `apps/web` application locally (as described in the "Build Process" section) and then upload the contents of the `apps/web/dist` directory to the hosting platform.

## CI/CD (Continuous Integration/Continuous Deployment)

This project has a GitHub Actions workflow defined in `.github/workflows/test.yml` that automates testing for the `apps/server` application upon pushes and pull requests. This forms a good foundation for a more comprehensive CI/CD pipeline.

It is highly recommended to extend this pipeline for automated deployments:

- **`apps/server` (Cloudflare Workers)**:
- The existing GitHub Actions workflow can be enhanced to include deployment steps.
- After successful tests, add steps to execute ````bash wrangler publish --env <environment_name> ```` for the desired environments (e.g., `preview` on pushes to a `develop` branch, `production` on pushes to `main` or on creating tags).
- Cloudflare API tokens (required for `wrangler publish`) should be stored securely as GitHub Secrets and accessed in the workflow.
- Consider adding steps for automated database migrations (````bash pnpm apply:<environment_name> ````) within the CI/CD pipeline, ensuring they run before the new code is published. Be cautious with automated migrations in production environments.

- **`apps/web` (Static Site)**:
- Most modern static site hosting platforms (such as Cloudflare Pages, Vercel, Netlify) offer direct integration with Git repositories (e.g., GitHub).
- You can configure these platforms to automatically trigger a new build and deployment of `apps/web` whenever changes are pushed to specific branches (e.g., `main` for production, `develop` for a preview/staging site).
- The hosting platform will typically handle the build process (running ````bash pnpm build ```` in the `apps/web` directory or the monorepo root) and then deploy the resulting static assets from `apps/web/dist`.
- This often requires minimal changes to the existing GitHub Actions workflow, as the deployment is managed by the hosting provider's integration. You would primarily ensure that the build command and output directory are correctly configured in the hosting platform's settings.