---
title: Quick Start for Developer
description: Step by step installation
---

## 0. Installation

```bash
git clone https://github.com/oiov/wr.do
```

Enter in the folder and install dependencies for your project:

```bash
cd wrdo
pnpm install
```

### Create a `.env` file

Copy/paste the `.env.example` in the `.env` file

## 1. Configure the Database

### Prepare the Server Database Instance and Obtain the Connection URL

Before deployment, make sure you have prepared a Postgres database instance. You can choose one of the following methods:

- A. Use Serverless Postgres instances like Vercel / Neon;
- B. Use self-deployed Postgres instances like Docker.

The configuration for both methods is slightly different, and will be distinguished in the next step.

### Add Environment Variables in Vercel

In Vercel's deployment environment variables, add `DATABASE_URL` and other environment variables, 
and fill in the Postgres database connection URL prepared in the previous step. 
The typical format for the database connection URL is

`postgres://username:password@host:port/database`.

```js title=".env"
DATABASE_URL=
```

### Deploy Postgres

#### Manually install (Recommended)

Via [migration.sql](https://github.com/oiov/wr.do/blob/main/prisma/migrations/20240705091917_init/migration.sql), 
copy the sql code to the database to initialize the database schema.

#### or

```bash
pnpm postinstall
pnpm db:push
```

### Add the AUTH_SECRET Environment Variable

The `AUTH_SECRET` environment variable is used to encrypt tokens and email verification hashes(NextAuth.js).
You can generate one from https://generate-secret.vercel.app/32:

```js title=".env"
AUTH_SECRET=a3e686f39b2a878c6866e4604e6f1b1b
```

## 2. Configure Authentication Service

The server-side database needs to be paired with a user authentication service to function properly. 
Therefore, the corresponding authentication service needs to be configured.

We provide the following authentication services:

- Google
- Github
- LinuxDo
- Resend Email Verification

### Google config

In this section, you can update these variables:

```js title=".env"
GOOGLE_CLIENT_ID = your_secret_client_id.apps.googleusercontent.com;
GOOGLE_CLIENT_SECRET = your_secret_client;
```

See config tutorial in [Authjs - Google OAuth](https://authjs.dev/getting-started/providers/google).

### Github config

In this section, you can update these variables:

```js title=".env"
GITHUB_ID = your_secret_client_id;
GITHUB_SECRET = your_secret_client;
```

See config tutorial in [Authjs - Github OAuth](https://authjs.dev/getting-started/providers/github).

### LinuxDo config

```js title=".env"
LinuxDo_CLIENT_ID=
LinuxDo_CLIENT_SECRET=
```

See config tutorial in [Connect LinuxDo](https://connect.linux.do).

### Resend Email Verification config

<Callout type="note">
  The email part is similar at the [resend](https://resend.com/) documentation.
  You can find the official documentation
  [here](https://authjs.dev/getting-started/installation#setup-environment) if
  you want.
</Callout>

<Steps>

#### Create an account

If don't have an account on Resend, just follow their steps after signup [here](https://resend.com/signup).

#### Create an API key

After signin on Resend, he propurse you to create your first API key.

Copy/paste in your `.env` file.

```js
RESEND_API_KEY = re_your_resend_api_key;
```

</Steps>

## 3. Cloudflare Configs

Before you start, you must have a Cloudflare account and be hosted on Cloudflare.

### Add the CLOUDFLARE_ZONE Environment Variable

A JSON array of objects, each containing a zone_id and zone_name for your Cloudflare zones. The zone_id is the unique identifier for a domain, and the zone_name is the domain name (e.g., example.com).

> Follow [this way](https://dash.cloudflare.com/Your_Acount_Id/wr.do), and scroll down to `Zone ID`.

### Add the CLOUDFLARE_API_KEY Environment Variable

 This is the API key that you use to authenticate requests to the Cloudflare API. You can generate or find your API key in the Cloudflare dashboard under the `profile` -> `api-tokens` section.

 > Follow [https://dash.cloudflare.com/profile/api-tokens](https://dash.cloudflare.com/profile/api-tokens), and scroll down to `API Token`, the `Global API Key` should be used.

### Add the CLOUDFLARE_EMAIL Environment Variable

This is the email address associated with your Cloudflare account. It is used for authentication alongside the API key.

### Add the NEXT_PUBLIC_CLOUDFLARE_ZONE_NAME Environment Variable

A comma-separated list of domain names (e.g., `example.com,example2.com`) used for frontend display. These must correspond to the zone_name values in CLOUDFLARE_ZONE.

In this section, you can update these variables:

```js title=".env"
CLOUDFLARE_ZONE=[{"zone_id":"abc465","zone_name":"example.com"},{"zone_id":"abc465","zone_name":"example2.com"}]
NEXT_PUBLIC_CLOUDFLARE_ZONE_NAME=example.com,example2.com
CLOUDFLARE_API_KEY=1234567890abcdef1234567890abcdef
CLOUDFLARE_EMAIL=user@example.com
```

## 4. Email Worker Configs

See detail in [Email Worker](/docs/developer/cloudflare-email-worker).

After you have completed the above steps, you need add a public domain for r2 storage. 

Via:

```bash
 https://dash.cloudflare.com/[account_id]/r2/default/buckets/[bucket]/settings
 ```

![](/_static/docs/r2-domain.png)

```js title=".env"
NEXT_PUBLIC_EMAIL_R2_DOMAIN=https://email-attachment.wr.do
```

## 5. Add the Bussiness Configs

```js title=".env"
# Allow anyone to sign up
NEXT_PUBLIC_OPEN_SIGNUP=1

# Short domains. Separated by `,`
NEXT_PUBLIC_SHORT_DOMAINS=wr.do,uv.do

# Email domains. Separated by `,`
NEXT_PUBLIC_EMAIL_DOMAINS=wr.do,uv.do
```

## 6. Add the SCREENSHOTONE_BASE_URL Environment Variable

It's the base URL for the screenshotone API.

You can deploy your own screenshotone API from [jasonraimondi/url-to-png](https://github.com/jasonraimondi/url-to-png). 
Deploy docs via [here](https://jasonraimondi.github.io/url-to-png/)

```js title=".env"
SCREENSHOTONE_BASE_URL=https://api.screenshotone.com
```

## 7. Add the GITHUB_TOKEN Environment Variable

Via https://github.com/settings/tokens to get your token.

```js title=".env"
GITHUB_TOKEN=
```
## 8. Start the Dev Server

```bash
pnpm dev
```
Via [http://localhost:3000](http://localhost:3000)


## Q & A
 
### Worker Error - Too many redirects

Via:

```bash
https://dash.cloudflare.com/[account_id]/[zone_name]/ssl-tls/configuration
```

Change the `SSL/TLS Encryption` Mode to `Full` in the Cloudflare dashboard.

### How can I access the admin panel after first deployment?

You need to first register an account and log in, 
and modify the `role` field of this account to `ADMIN` in the `users` table of the database. 
Then, refresh the website and access http://localhost:3000/admin.

<Callout type="note">
Although it may not be convenient to do so, this is currently the fastest way to become an administrator. 
In future versions, we will implement the function of automatically setting up administrators as soon as possible.
</Callout>

### How can I change the team plan quota?

Via team.ts:

```bash
https://github.com/oiov/wr.do/tree/main/config/team.ts
```