SurfSense/apps/docs/documentation/deployment/deployment.mdx
2024-07-30 16:00:11 -07:00

131 lines
5.7 KiB
Text

---
title: Deploying the monorepo
description: Deploying your monorepo to Vercel/Mintlify
"og:title": Deploying your monorepo to Vercel/Mintlify
---
## Introduction
Deploying your monorepo to Vercel is relatively straightforward, but there are a handful of things to be aware of.
The frontend deployment is relatively straightforward, but the backend deployment can be a little more complex and need a bit more attention.
<Note>For a more detailed guide on deploying a monorepo to Vercel, see the [official documentation](https://vercel.com/docs/monorepos/turborepo).</Note>
## Prerequisites
Before continuing, ensure you have:
- A [Vercel](https://vercel.com/) account. It is typically easiest to sign up with your GitHub account, as we'll also be deploying directly from the GitHub repository.
- Published your repo to GitHub. If you haven't done this yet, you can follow the instructions [here](https://docs.github.com/en/get-started/quickstart/create-a-repo).
- Optional. If you're planning to deploy your documentation site to Mintlify, you'll need to have a [Mintlify](https://mintlify.com/) account.
## Frontend Deployment
<Steps>
<Step title="Add new project in Vercel">
Go to your [Vercel dashboard](https://vercel.com/dashboard) and click the `Add New...` button, and select `Project`.
</Step>
<Step title="Import your monorepo">
Select the `Import Git Repository` option and select your repository from the list of repositories.
</Step>
<Step title="Configure Project">
Vercel will automatically detect that you have a monorepo, and should have correctly populated all the required fields.
The project root directory should be automatically detected, but if it isn't, you can manually set it to the folder where your frontend is stored. In this project, that is `apps/web`.
<Frame>
<img src="/_images/deploy-web-configure-project.png" />
</Frame>
</Step>
<Step title="Deploy">
Click the `Deploy` button to deploy your project.
</Step>
<Step title="Add an Ignored Build Step">
We don't want to continuously rebuild our frontend every time we push changes to the backend or documentation. To prevent this, we can add an ignored build step.\
\
From the newly deployed frontend dashboard, navigate to `Settings`, then to `Git`. Scroll down to the `Ignored Build Step` section and set the behaviour to
**Only build Turborepo app if there are changes**.
<Frame>
<img src="/_images/deploy-web-ignored-build-step.png" />
</Frame>
<Note>For more information, see the [official documentation](https://vercel.com/docs/projects/overview#ignored-build-step).</Note>
</Step>
</Steps>
## Backend deployment
<Steps>
<Step title="Add new project in Vercel">
Go to your [Vercel dashboard](https://vercel.com/dashboard) and click the `Add New...` button, and select `Project`.
</Step>
<Step title="Import your monorepo">
Select the `Import Git Repository` option and select your repository from the list of repositories.
</Step>
<Step title="Configure Project">
Vercel will automatically detect that you have a monorepo, but for the backend we need to change the default configuration.
- Configure your project name
- Change the `Framework Preset` to `Other` (there is currently no Python option)
- Change the `Root Directory` to the folder where your backend is stored. In this project, that is `apps/api`
- Add your Environment Variables
<Frame>
<img src="/_images/deploy-api-configure-project.png" />
</Frame>
</Step>
<Step title="Deploy">
Click the `Deploy` button to deploy your project. Once built, the API should be running at the URL provided.
<Frame>
<img src="/_images/deploy-api-running.png" />
</Frame>
</Step>
<Step title="Add an Ignored Build Step">
We don't want to continuously rebuild our frontend every time we push changes to the backend or documentation. To prevent this, we can add an ignored build step.\
\
From the newly deployed frontend dashboard, navigate to `Settings`, then to `Git`. Scroll down to the `Ignored Build Step` section and set the behaviour to
**Only build Turborepo app if there are changes**.
<Frame>
<img src="/_images/deploy-web-ignored-build-step.png" />
</Frame>
<Note>For more information, see the [official documentation](https://vercel.com/docs/projects/overview#ignored-build-step).</Note>
</Step>
</Steps>
## Documentation deployment
<Note>For a more detailed explanation, visit the [offical documentation](https://mintlify.com/docs/quickstart)</Note>
Connecting to an existing repository with Mintlify is a little bit tricky, as their walkthrough currently seems to only support creating a new repository. However, it is possible to connect an existing repository by following the steps below.
<Steps>
<Step title="Sign in to Mintlify">
Sign in to [Mintlify](https://mintlify.com/). You will further be prompted to **Sign in with GitHub**. Follow the onscreen instructions.
</Step>
<Step title="Select Monorepo">
Configure your deployment to be pointed to your `docs` directory. Ensure **set up as a monorepo** is selected.
<Frame>
<img src="/_images/deploy-docs-select-repo.png" />
</Frame>
</Step>
<Step title="Install Mintlify app to GitHub">
From the Mintlify dashboard, click **Things to Do** and then click **Enable automatic updates**.
<Frame>
<img src="/_images/deploy-docs-enable-auto-update.png" />
</Frame>
</Step>
</Steps>