OLD - AFFiNE Docs
  • ⚠️
  • ⚠️ This website is inactive
  • ⚠️ For reference only
  • ⚠️ Please use our community site
  • ⚠️ community.affine.pro
  • ⚠️
  • Welcome
    • Welcome to the AFFiNE Docs!
  • Getting Started
    • 🎉Welcome
    • 🆒Install AFFiNE with Docker
    • 💻Deploy AFFiNE to Vercel
    • 🌟How to Get Help
  • Developer Docs
    • 🎉Welcome
    • 🌳Setup
    • 🗂️Working with our code
    • 🖥️Contributions
      • ☘️Writing CSS in AFFiNE
      • 💐Adding UI Components
        • 📐Customize rollup config
      • 🌱Icons
      • 🌐Internationalization
    • 🔭Architecture
      • 🎼CodeMap
      • 💫Editor (Virgo)
      • 🦄Whiteboard (Phasor)
      • 💎Collaboration (OctoBase)
    • 📚Glossary
    • 📒AFFiNE Mentorship Program
  • Internationalization
    • 🎉Welcome
    • 📋Apply
    • 📘Operation Guide
    • 📝Contributors
  • AFFiNE Ambassadors
    • 🎉Welcome
    • ✔️Requirements
    • 🎁Benefits
    • 📋Apply
    • ❓FAQ
    • 📚Branding resources
    • 📝Best practices
    • 📑Resources
  • Branding Resources
    • 🎉Welcome
    • Logo (icon)
    • Logo (text)
    • Logo (3D)
    • Tagline banners
    • Colors
  • Community Links
    • 📢AFFiNE Community
    • 🗣️Official Communities
    • 📗Community Resources
Powered by GitBook
On this page

Was this helpful?

  1. Getting Started

Deploy AFFiNE to Vercel

PreviousInstall AFFiNE with DockerNextHow to Get Help

Last updated 1 year ago

Was this helpful?

is a platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

AFFiNE can be simply deployed to Vercel with just a few mouse clicks because Vercel fully supports Next.js, which is the stack used by AFFiNE.

Before we begin, we'll assume you already have a Vercel account and have connected it to your GitHub account.

  1. Fork to your own GitHub account.

  2. After logging in to , go to your hobby page and click the Add New... - Project button.

  3. Click the Import button after selecting the AFFINE repository you forked (if you cannot access your repository, go to the Vercel team's ).

  4. Next, configure your project as follows:

    • Build Command - AFFiNE uses pnpm to build whole app

    • Output Directory - output of build assets in the app folder

    • Install Command - since we set up AFFiNE as a Next.js project, Vercel will detect Next.js dependencies, but the work dir is the root dir, so this is required as Vercel will otherwise not find Next.js dependencies

1. To deploy `AFFiNE` to a production environment, click `Deploy`. 1. After building is complete, go to the address that `Vercel` provides and enjoy!

Troubleshooting

If your building fails, go to the project settings page and verify whether your Root Directory is accurate.

Sometimes building fails when the Root Directory is set to ./ during the initialization of the project.

You can simply leave it empty or set it up using ./ as suggested in the tips.

💻
Vercel
AFFiNE
Vercel
guide
image
image