Learn how to structure, configure, and deploy multiple frontend apps from a single TurboRepo to AWS Amplify — with independent builds, custom URLs, and a scalable cloud setup.
Introduction
Managing multiple applications within a single codebase is a breeze with TurboRepo, Vercel’s blazing-fast monorepo build system. But when it comes to deployment — especially to cloud platforms like AWS Amplify — things can feel a bit intimidating at first.
The good news? It’s not. In fact, deploying multiple apps from a TurboRepo to AWS Amplify can be surprisingly simple — and scalable.
In this blog, we’ll walk you through how to:
- Prepare the codebase for deployment
- Connect your monorepo to Amplify
- Configure build settings for each app
- Deploy them independently with custom URLs.
By the end, you’ll have your TurboRepo running in the cloud, with each frontend app deployed via its own Amplify instance — fast, reliable, and production-ready.
Let’s dive in. ☁️
🛠 Step 1: Configure Your TurboRepo for Deployment
Before we connect anything to Amplify, let’s make sure your monorepo is structured correctly and ready to go.
🧱 Recommended Project Structure
Here’s a clean TurboRepo structure with multiple apps:
| turbo-monorepo/ ├── apps/ │ ├── app1/ # Next.js or any frontend app │ ├── app2/ │ └── app3/ ├── packages/ │ ├── ui/ # Shared UI components │ ├── utils/ # Shared logic │ └── global-styles/ ├── turbo.json # Turbo configuration ├── package.json # Root workspace └── tsconfig.json # Root configuration |
✅ 1. Set Up package.json (Root)
At the root of your monorepo, configure your workspaces like this:
| { “name”: “turbo-monorepo”, “private”: true, “packageManager”: “npm@10.8.2”, “workspaces”: [ “apps/*”, “packages/*” ], “scripts”: { “dev”: “turbo dev”, “build”: “turbo run build” }, “devDependencies”: { “turbo”: “^1.10.0”, “typescript”: “^5.3.3”, “prettier”: “^3.2.5”, }, “engines”: { “node”: “>=18”, } } |
✅ 2. Set Up turbo.json
Here’s a basic example for your build pipeline:
| { “$schema”: “https://turbo.build/schema.json”, “tasks”: { “build”: { “dependsOn”: [{ “$schema”: “https://turbo.build/schema.json”, “tasks”: { “build”: { “dependsOn”: [“^build”], “outputs”: [“apps/*/.next/**”, “!apps/*/.next/cache/**”] }, “dev”: { “cache”: false } } } |
✅ 3. Set Up Each App’s package.json
Each app (e.g. app1, app2, etc.) should have its own package.json with a build script:
| {{ “name”: “app1”, “scripts”: { “dev”: “next dev”, “build”: “next build”, “start”: “next start” }, “dependencies”: { “next”: “^13.5.0”, “react”: “^18.2.0”, “react-dom”: “^18.2.0” } } |
✅ 4. Install Dependencies
At the root of your repo, run:
| npm install |
📌 Note:
Keep your root package.json as lean as possible.
Only include dependencies and devDependencies that are truly needed across your entire monorepo, like:
- “ Build tools (turbo, eslint, prettier, etc.) “
- “ Shared config tools (like typescript, tailwindcss, etc.) “
- “ Linting or formatting tools “
❌ Avoid adding app-specific libraries (like next, react, axios, etc.) in the root — instead, add those directly in the individual app’s package.json (like apps/admin/package.json).
This ensures:
- “ Faster installs “
- “ Cleaner dependency trees “
- “ Fewer version conflicts during build & deploy “
✅ 5. Configure Path Aliases in tsconfig.json
Before you run your build, make sure your TypeScript path aliases are set up correctly across the monorepo.
| { “compilerOptions”: { “baseUrl”: “.”, “paths”: { “@/app1/*”: [“apps/app1/src/*”], “@/app2/*”: { “compilerOptions”: { “baseUrl”: “.”, “paths”: { “@/app1/*”: [“apps/app1/src/*”], “@/app2/*”: [“apps/app2/src/*”], “@repo/assets/*”: [“packages/assets/src/*”], “@repo/components/*”: [“packages/components/*”] }, “jsx”: “react-jsx” }, “include”: [“global.d.ts”, “packages/**/*”, “apps/**/*”], “exclude”: [“node_modules”, “dist”, “build”] } |
📁 Then, Extend It in Each App’s tsconfig.json
For example, in apps/admin/tsconfig.json:
| { “extends”: “../../tsconfig.json”, “co{ “extends”: “../../tsconfig.json”, “compilerOptions”: { … }, “include”: [“src”] } |
🧠 This setup ensures that your imports like @/app1, @repo/components, etc., resolve correctly — both locally and on Amplify.
✅ 6. Verify Local Builds
Before deploying to Amplify, test the builds, run the command in root:
| npm run build |
🚀 Step 2: Connect Your Repo to AWS Amplify
Now that your monorepo is configured and builds correctly, it’s time to deploy your first app (e.g., app1) to AWS Amplify.
✅ 1. Push Your Repo to GitHub (or GitLab/Bitbucket)
Make sure your TurboRepo is version-controlled and pushed to a remote Git provider supported by Amplify (like GitHub).
✅ 2. Create a New App in Amplify
- Log in to AWS Amplify Console.
- Click “Create New App”.
- Select your Git provider and connect your repo.
- Choose your repo and branch (e.g., main).
✅ 3. Set Up Build for a Specific App (e.g., app1)
When Amplify asks for build settings:
- Select the root directory of the app you want to deploy, e.g., apps/app1.
Amplify will auto-detect the framework (like Next.js) and give you a default amplify.yml file. You’ll want to customize it for TurboRepo, like this:
| version: 1 applications: – appRoot: apps/app1 frontend: phases: preBuild: commands: – npm install build: commands: – npm run build artifacts: baseDirectory: .next files: – ‘**/*’ cache: paths: – .next/cache/**/* – node_modules/**/* |
🧠 This ensures only the app1 app is built and deployed, and it uses the right output directory (.next, etc.)
✅ 4. Review & Deploy
- Click Save and Deploy.
- Amplify will clone your repo, run the Turbo build, and deploy your app.
- After a few minutes, you’ll get a public URL like:
| https://main.d123abc456.amplifyapp.com |
🔁 You can now repeat this process to deploy other apps in your TurboRepo (like app2, app3, etc.) by creating new Amplify apps and changing the amplify.yml file.
