@launch77-shared/app-template-webapp 1.0.0

package/.env.ci

@@ -0,0 +1,6 @@
+# CI/CD Build Environment Variables
+# These values allow Next.js to build and prerender static pages in CI
+# Real production values are set in deployment platform (Vercel)
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:4000/graphql
+NEXT_PUBLIC_GTM_ID=

package/.env.example

@@ -0,0 +1,9 @@
+# Site Configuration
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+
+# Analytics
+# Get your GTM ID from Google Tag Manager (format: GTM-XXXXXXX)
+NEXT_PUBLIC_GTM_ID=
+
+# Feature Flags (optional)
+# NEXT_PUBLIC_ENABLE_ANALYTICS=true

package/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "rules": {
+    "import/order": "off"
+  }
+}

package/.gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+node_modules/
+
+# Next.js
+.next/
+out/
+build/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+*.log
+npm-debug.log*
+
+# Testing
+coverage/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Vercel
+.vercel

package/README.md.hbs

@@ -0,0 +1,80 @@
+# {{appName}}
+
+{{#if startupName}}Part of the {{startupName}} startup{{/if}}
+
+A web application built with the Launch77 Platform.
+
+## Getting Started
+
+1. Install dependencies (from monorepo root):
+```bash
+npm install
+```
+
+2. Set up environment variables:
+```bash
+cp .env.example .env.local
+```
+
+3. Run the development server:
+```bash
+npm run dev
+```
+
+Open [http://localhost:{{port}}](http://localhost:{{port}}) in your browser.
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run start` - Start production server
+- `npm run lint` - Run ESLint
+- `npm run typecheck` - Run TypeScript type checking
+
+## Launch77 Packages
+
+This app uses the following Launch77 platform packages:
+
+- **@launch77/ui** - Shared component library
+- **@launch77/theme** - Tailwind preset and design tokens
+
+## Project Structure
+
+```
+app/
+├── layout.tsx       # Root layout
+├── page.tsx         # Homepage
+├── dashboard/       # Example dashboard page
+├── about/           # About page
+└── globals.css      # Global styles (imports @launch77/theme)
+```
+
+## Next Steps
+
+1. **Add Authentication**: Implement login/register pages and protect routes
+2. **Connect to API**: Set up API client to connect to your backend
+3. **Add Features**: Build out your application features
+
+## Using UI Components
+
+```tsx
+import { Button, Card, Input } from '@launch77/ui'
+
+export default function MyPage() {
+  return (
+    <Card>
+      <Input placeholder="Enter text" />
+      <Button>Submit</Button>
+    </Card>
+  )
+}
+```
+
+## Customizing Theme
+
+Extend `tailwind.config.ts` for theme customization.
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Launch77 Platform Docs](../../README.md)

package/app/about/page.tsx.hbs

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <h1 className="text-xl font-bold text-gray-900">{{appName}}</h1>
+            <Link
+              href="/"
+              className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              Home
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      <main className="max-w-3xl mx-auto px-4 py-16">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          About {{appName}}
+        </h1>
+        <div className="prose prose-slate">
+          <p className="text-lg text-gray-600 mb-4">
+            This is a web application built with the Launch77 Platform.
+          </p>
+          <p className="text-gray-600 mb-4">
+            Launch77 provides a modern development environment with:
+          </p>
+          <ul className="list-disc list-inside text-gray-600 mb-4 space-y-2">
+            <li>Next.js for server-side rendering and routing</li>
+            <li>Tailwind CSS for styling</li>
+            <li>TypeScript for type safety</li>
+            <li>Plugin-based architecture for adding capabilities</li>
+          </ul>
+        </div>
+      </main>
+    </div>
+  )
+}

package/app/dashboard/page.tsx.hbs

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <h1 className="text-xl font-bold text-gray-900">{{appName}}</h1>
+            <Link
+              href="/"
+              className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              Home
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2">Dashboard</h2>
+          <p className="text-gray-600">
+            This is a protected page example. Add your authentication logic here.
+          </p>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded-lg border border-gray-200 bg-white p-6">
+            <h3 className="font-semibold text-gray-900 mb-2">Card 1</h3>
+            <p className="text-sm text-gray-600">
+              Example content for your dashboard
+            </p>
+          </div>
+          <div className="rounded-lg border border-gray-200 bg-white p-6">
+            <h3 className="font-semibold text-gray-900 mb-2">Card 2</h3>
+            <p className="text-sm text-gray-600">
+              Example content for your dashboard
+            </p>
+          </div>
+          <div className="rounded-lg border border-gray-200 bg-white p-6">
+            <h3 className="font-semibold text-gray-900 mb-2">Card 3</h3>
+            <p className="text-sm text-gray-600">
+              Example content for your dashboard
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/app/globals.css

@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base resets and accessibility styles */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply antialiased;
+  }
+
+  /* Focus styles for accessibility */
+  :focus-visible {
+    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/app/layout.tsx.hbs

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{appName}}',
+  description: '{{appName}} - Built with Launch77 Platform',
+  icons: {
+    icon: '/favicon.ico',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${inter.className} scroll-smooth`}>
+      <body>{children}</body>
+    </html>
+  )
+}

package/app/page.tsx.hbs

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+
+export default function HomePage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-2xl mx-auto px-4 py-16 text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          Welcome to {{appName}}
+        </h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Built with the Launch77 Platform
+        </p>
+        <div className="flex gap-4 justify-center">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+          >
+            Go to Dashboard
+          </Link>
+          <Link
+            href="/about"
+            className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-gray-700 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-colors"
+          >
+            Learn More
+          </Link>
+        </div>
+      </div>
+    </main>
+  )
+}

package/next.config.js

@@ -0,0 +1,99 @@
+// Load .env.ci in CI environments for build-time placeholder variables
+// This allows static page generation to succeed without real env values
+// Real values come from deployment platform (Vercel/Railway)
+if (process.env.CI === 'true') {
+  const path = require('path')
+  require('dotenv').config({ path: path.join(__dirname, '.env.ci') })
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [640, 750, 1080, 1200, 1920],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256],
+    minimumCacheTTL: 60 * 60 * 24 * 365, // 1 year
+  },
+  compress: true,
+  poweredByHeader: false,
+  swcMinify: true,
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
+  headers: async () => [
+    {
+      source: '/:path*',
+      headers: [
+        {
+          key: 'X-DNS-Prefetch-Control',
+          value: 'on',
+        },
+        {
+          key: 'X-Content-Type-Options',
+          value: 'nosniff',
+        },
+        {
+          key: 'X-Frame-Options',
+          value: 'SAMEORIGIN',
+        },
+        {
+          key: 'X-XSS-Protection',
+          value: '1; mode=block',
+        },
+        {
+          key: 'Referrer-Policy',
+          value: 'origin-when-cross-origin',
+        },
+      ],
+    },
+    // Cache static assets aggressively
+    {
+      source: '/(.*).jpg',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'public, max-age=31536000, immutable',
+        },
+      ],
+    },
+    {
+      source: '/(.*).png',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'public, max-age=31536000, immutable',
+        },
+      ],
+    },
+    {
+      source: '/(.*).svg',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'public, max-age=31536000, immutable',
+        },
+      ],
+    },
+    {
+      source: '/(.*).webp',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'public, max-age=31536000, immutable',
+        },
+      ],
+    },
+    {
+      source: '/_next/static/(.*)',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'public, max-age=31536000, immutable',
+        },
+      ],
+    },
+  ],
+}
+
+module.exports = nextConfig

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@launch77-shared/app-template-webapp",
+  "version": "1.0.0",
+  "description": "Launch77 webapp app template",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "**/*",
+    "!node_modules",
+    "!dist"
+  ],
+  "keywords": [
+    "launch77",
+    "template",
+    "webapp",
+    "nextjs"
+  ],
+  "author": "Launch77",
+  "license": "UNLICENSED",
+  "scripts": {
+    "release:connect": "launch77-release-connect",
+    "release:verify": "launch77-release-verify"
+  },
+  "launch77": {
+    "installedPlugins": {
+      "release": {
+        "package": "release",
+        "version": "1.0.0",
+        "installedAt": "2026-01-08T02:52:53.166Z",
+        "source": "local"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/package.json.hbs

@@ -0,0 +1,30 @@
+{
+  "name": "{{#if startupName}}@{{startupName}}/{{appName}}{{else}}{{appName}}{{/if}}",
+  "version": "1.0.0",
+  "private": true,
+  "description": "{{appName}}{{#if startupName}} ({{startupName}}){{/if}} - Built with Launch77 Platform",
+  "scripts": {
+    "dev": "next dev{{#if port}} -p {{port}}{{/if}}",
+    "build": "next build",
+    "start": "next start{{#if port}} -p {{port}}{{/if}}",
+    "test": "echo \"No tests configured\" && exit 0",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^14.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.2.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.3.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/modules/release/README.md

@@ -0,0 +1,164 @@
+# Release Module
+
+This module provides tools to set up and verify npm package publishing with Trusted Publishers.
+
+## Overview
+
+The release module automates the setup process for publishing packages to npm using GitHub Actions with Trusted Publishers (OIDC). This eliminates the need for NPM_TOKEN secrets and provides a more secure publishing workflow.
+
+**Important:** All packages start as `"private": true` by default. This prevents changesets from attempting to publish unprepared packages. Running `release:connect` removes the private flag and configures the package for publishing.
+
+## Available Scripts
+
+### `npm run release:connect`
+
+Interactive script that guides you through the initial npm publishing setup:
+
+1. **Validates package.json** - Checks that license and publishConfig are correct
+2. **Builds the package** - Runs `npm run build` to ensure it compiles
+3. **Creates test tarball** - Runs `npm pack` to create a .tgz file
+4. **Prepares for publishing** - Removes `"private": true` and sets `"publishConfig.access": "public"`
+5. **Publishes to npm** - Performs the initial `npm publish` (required for Trusted Publishers)
+6. **Guides Trusted Publisher setup** - Provides step-by-step instructions
+
+**When to run:** Once per package, before setting up automated releases.
+
+```bash
+npm run release:connect
+```
+
+### `npm run release:verify`
+
+Verification script that checks if your package is properly configured:
+
+- ✓ Checks package is not private
+- ✓ Checks package.json configuration
+- ✓ Verifies package is published to npm
+- ✓ Validates build succeeds
+- ✓ Shows action items if anything is missing
+
+**When to run:** Anytime you want to verify your package is ready for publishing.
+
+```bash
+npm run release:verify
+```
+
+## Setup Process
+
+### Prerequisites
+
+Before running `release:connect`, ensure:
+
+1. **npm organization exists** - Create at https://www.npmjs.com/org/create
+2. **Workspace is connected to GitHub** - Run `launch77 git:connect`
+3. **Release workflow initialized** - Run `launch77 release:init`
+4. **You're logged into npm** - Run `npm login`
+
+### Initial Setup
+
+1. Navigate to your package directory:
+
+   ```bash
+   cd apps/my-app
+   ```
+
+2. Run the connect script:
+
+   ```bash
+   npm run release:connect
+   ```
+
+3. Follow the interactive prompts:
+   - Confirm package.json settings
+   - Build the package
+   - Publish to npm
+   - Configure Trusted Publisher on npm website
+
+4. Verify setup:
+   ```bash
+   npm run release:verify
+   ```
+
+## Trusted Publishers Setup
+
+After running `release:connect`, you need to configure Trusted Publishers on the npm website:
+
+1. Visit your package access page:
+
+   ```
+   https://www.npmjs.com/package/<your-package-name>/access
+   ```
+
+2. Scroll to "Publishing Access" section
+
+3. Click "Configure Trusted Publishers"
+
+4. Add GitHub Actions as a trusted publisher:
+   - **Provider:** GitHub Actions
+   - **Repository owner:** your-github-org
+   - **Repository name:** your-repo-name
+   - **Workflow:** .github/workflows/ci.yml
+   - **Environment:** (leave empty for any)
+
+5. Save the configuration
+
+Full documentation: https://docs.npmjs.com/trusted-publishers
+
+## Publishing Workflow
+
+Once setup is complete, use changesets for version management:
+
+```bash
+# Create a changeset (describe what changed)
+npm run changeset
+
+# Commit and push to main
+git add .
+git commit -m "Add changeset"
+git push
+
+# CI will automatically:
+# 1. Create a "Version Packages" PR
+# 2. When merged, publish to npm via Trusted Publishers
+```
+
+## Troubleshooting
+
+### Build Fails
+
+If `npm run build` fails:
+
+- Fix TypeScript/build errors
+- Ensure all dependencies are installed
+- Check tsconfig.json configuration
+
+### Publish Fails (Organization Not Found)
+
+If `npm publish` fails with "organization not found":
+
+- Create the npm organization first: https://www.npmjs.com/org/create
+- Make sure you're logged in: `npm login`
+- Verify your npm account has access to the organization
+
+### Trusted Publisher Not Working
+
+If GitHub Actions can't publish after Trusted Publisher setup:
+
+- Verify repository owner/name match exactly
+- Check workflow path is correct (.github/workflows/ci.yml)
+- Ensure workflow has `id-token: write` permission
+- Wait a few minutes for npm to propagate changes
+
+### Package.json Validation Fails
+
+Common fixes:
+
+- Set `"license": "UNLICENSED"` for proprietary packages
+- Add `"publishConfig": { "access": "public" }` for scoped packages
+- Ensure `"main"` field points to built output (e.g., "dist/index.js")
+
+## Additional Resources
+
+- [npm Trusted Publishers Documentation](https://docs.npmjs.com/trusted-publishers)
+- [Changesets Documentation](https://github.com/changesets/changesets)
+- [GitHub Actions OIDC](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)

package/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './lib/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      // Add your custom theme extensions here
+      // Example:
+      // colors: {
+      //   brand: {
+      //     500: '#FF5816',
+      //     600: '#F03D00',
+      //   },
+      // },
+    },
+  },
+  plugins: [],
+}
+
+export default config

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "baseUrl": "."
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/vercel.json.hbs

@@ -0,0 +1,7 @@
+{
+  "buildCommand": "cd ../../../.. && npx turbo build --filter={{packageName}}",
+  "installCommand": "cd ../../../.. && npm install",
+  "outputDirectory": ".next",
+  "framework": "nextjs",
+  "ignoreCommand": "npx turbo-ignore"
+}