Frontend Deployment

PieApp supports deploying static sites and frontend framework applications directly from a Git repository. Your app is built inside a Docker container and served via a global CDN-backed subdomain with automatic HTTPS.

There is no server to configure. Push your code, PieApp builds it, and your site is live.

Supported Frameworks 

Framework	Detected subtype
Next.js	nextjs
Nuxt	nuxt
React (CRA / Vite)	react
Vue	vue
Svelte / SvelteKit	svelte
Angular	angular
Plain HTML / any static site	frontend

How Auto-Detection Works 

PieApp inspects your package.json dependencies to determine the framework. You do not need to configure anything for a standard project layout.

Detected dependency	Resolved type / subtype
next	frontend / nextjs
nuxt	frontend / nuxt
react	frontend / react
vue	frontend / vue
svelte	frontend / svelte
@angular/core	frontend / angular

If none of the above match, the app defaults to frontend — suitable for plain HTML, Jekyll, Hugo, or any other static output.

To override detection, add a pie.json to your repo root:

{
  "type": "frontend",
  "subtype": "vue"
}

Public Directory 

The Public Directory tells PieApp which folder to serve after the build completes. Set this in your app's Settings tab.

Framework	Typical build output	Public Directory setting
Next.js (static export)	out/	out
Nuxt (static)	.output/public/	.output/public
React (CRA)	build/	build
React (Vite)	dist/	dist
Vue (Vite)	dist/	dist
Svelte / SvelteKit	build/	build
Angular	dist//browser/	dist//browser
Plain HTML	/ (repo root)	/

The default is /. If your build outputs to a subdirectory and you leave this as /, PieApp will serve the repo root — which will not include your compiled assets.

Build Commands 

Set your Build Commands in the app's Settings tab. For most frontend apps:

npm run build

For Yarn or pnpm:

yarn build

pnpm build

Commands run in order. If any command exits with a non-zero status the deployment is marked as failed and the previous version stays live.

Framework Guides 

Next.js

Next.js requires static export mode to be served as a frontend app. Add the following to next.config.js:

const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

Then set:

• Build Commands:npm run build
• Public Directory:out

React (Vite)

• Build Commands:npm run build
• Public Directory:dist

React (Create React App)

• Build Commands:npm run build
• Public Directory:build

Vue (Vite)

• Build Commands:npm run build
• Public Directory:dist

Nuxt (Static)

Add ssr: false or use nuxt generate for static output:

• Build Commands:npx nuxt generate
• Public Directory:.output/public

Angular

• Build Commands:npm run build -- --configuration production
• Public Directory:dist//browser

Replace with the value of defaultProject in your angular.json.

Svelte / SvelteKit

For a static SvelteKit site, install the static adapter:

npm install @sveltejs/adapter-static

Update svelte.config.js:

import adapter from '@sveltejs/adapter-static';

export default {
  kit: { adapter: adapter() }
};

Then set:

• Build Commands:npm run build
• Public Directory:build

Plain HTML

No build step needed. Leave Build Commands empty and set Public Directory to / (or whichever subdirectory contains your index.html).

Environment Variables 

Environment variables are available during the build step, so framework-specific env prefixes work as expected:

Framework	Public variable prefix
Vite (React, Vue, Svelte)	VITE_
Create React App	REACT_APP_
Next.js	NEXT_PUBLIC_
Angular	Set via environment.ts files

Add your variables in the Environment tab of your app dashboard, one per line:

VITE_API_URL=https://api.example.com
NEXT_PUBLIC_STRIPE_KEY=pk_live_xxx

Variables not prefixed with the framework's public prefix will be available during the build but will not be inlined into the client bundle. Never put secret keys in public-prefixed variables.

Help

Facing difficulties? Use the chat box on the bottom-right corner of this page to reach us.