Copy-paste ready package.json templates and project structures for all supported frameworks. Each template includes all necessary dependencies and recommended scripts for deployment on CupaDev.
At minimum, your project needs the following files to deploy on CupaDev:
CupaDev automatically detects your framework, but including these scripts ensures consistent builds:
"scripts": {
"dev": "...", // Local development server
"build": "...", // Production build (required)
"start": "...", // Start production server (for SSR)
"lint": "...", // Code linting (optional)
"test": "..." // Run tests (optional)
}Next.js 14+ with App Router, TypeScript, and Tailwind CSS. Supports both static export and server-side rendering.
{
"name": "my-nextjs-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"next": "^14.1.0"
},
"devDependencies": {
"@types/node": "^20.11.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"typescript": "^5.3.0",
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0",
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0"
},
"engines": {
"node": ">=18.17.0"
}
}my-nextjs-app/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── public/ │ └── favicon.ico ├── next.config.js ├── tailwind.config.js ├── postcss.config.js ├── tsconfig.json └── package.json
Build Output: .next/ directory (automatically detected)
Deploy Command: npm run build
Modern React SPA with Vite for ultra-fast development and optimized production builds.
{
"name": "my-react-vite-app",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext js,jsx,ts,tsx"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-react": "^4.2.0",
"vite": "^5.1.0",
"typescript": "^5.3.0",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.0",
"eslint-plugin-react-hooks": "^4.6.0",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0"
},
"engines": {
"node": ">=18.0.0"
}
}my-react-vite-app/ ├── src/ │ ├── App.tsx │ ├── main.tsx │ ├── index.css │ └── components/ ├── public/ │ └── vite.svg ├── index.html ├── vite.config.ts ├── tsconfig.json └── package.json
Build Output: dist/ directory
Deploy Command: npm run build
Traditional React setup with Create React App. Works out of the box with zero configuration.
{
"name": "my-cra-app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-router-dom": "^6.22.0",
"web-vitals": "^3.5.0"
},
"devDependencies": {
"@testing-library/react": "^14.1.0",
"@testing-library/jest-dom": "^6.1.0",
"@testing-library/user-event": "^14.5.0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"engines": {
"node": ">=16.0.0"
}
}my-cra-app/ ├── src/ │ ├── App.js │ ├── App.css │ ├── index.js │ ├── index.css │ └── components/ ├── public/ │ ├── index.html │ └── favicon.ico └── package.json
Build Output: build/ directory
Deploy Command: npm run build
Modern Vue 3 application with Composition API, TypeScript, and Vite build tooling.
{
"name": "my-vue-app",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts"
},
"dependencies": {
"vue": "^3.4.0",
"vue-router": "^4.2.0",
"pinia": "^2.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"@vue/tsconfig": "^0.5.0",
"vite": "^5.1.0",
"typescript": "^5.3.0",
"vue-tsc": "^1.8.0",
"eslint": "^8.56.0",
"eslint-plugin-vue": "^9.20.0",
"@typescript-eslint/parser": "^6.20.0"
},
"engines": {
"node": ">=18.0.0"
}
}my-vue-app/ ├── src/ │ ├── App.vue │ ├── main.ts │ ├── router/ │ ├── stores/ │ ├── components/ │ └── assets/ ├── public/ │ └── favicon.ico ├── index.html ├── vite.config.ts ├── tsconfig.json └── package.json
Build Output: dist/ directory
Deploy Command: npm run build
Full-stack Vue framework with server-side rendering, file-based routing, and auto-imports.
{
"name": "my-nuxt-app",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "^3.10.0",
"vue": "^3.4.0",
"vue-router": "^4.2.0"
},
"devDependencies": {
"@nuxt/devtools": "^1.0.0",
"@nuxtjs/tailwindcss": "^6.11.0",
"typescript": "^5.3.0"
},
"engines": {
"node": ">=18.0.0"
}
}my-nuxt-app/ ├── pages/ │ ├── index.vue │ └── about.vue ├── components/ ├── layouts/ │ └── default.vue ├── public/ ├── server/ │ └── api/ ├── nuxt.config.ts ├── tsconfig.json └── package.json
Build Output: .output/ directory
Deploy Command: npm run build (for SSR) or npm run generate (for static)
Specify your Node.js version in package.json to ensure consistent builds:
"engines": {
"node": ">=18.0.0",
"npm": ">=9.0.0"
}Use framework-specific prefixes for client-side environment variables:
CupaDev automatically optimizes your builds, but you can improve build times by: