create-harper 1.7.3 → 1.8.0

package/lib/constants/frameworks.js

@@ -59,6 +59,16 @@ export const frameworks = [
 				display: 'JavaScript',
 				color: yellow,
 			},
+			{
+				name: 'react-ts-ssr',
+				display: 'TypeScript + SSR',
+				color: blue,
+			},
+			{
+				name: 'react-ssr',
+				display: 'JavaScript + SSR',
+				color: yellow,
+			},
 		],
 	},
 	{
@@ -76,6 +86,16 @@ export const frameworks = [
 				display: 'JavaScript',
 				color: yellow,
 			},
+			{
+				name: 'vue-ts-ssr',
+				display: 'TypeScript + SSR',
+				color: blue,
+			},
+			{
+				name: 'vue-ssr',
+				display: 'JavaScript + SSR',
+				color: yellow,
+			},
 		],
 	},
 ];

package/lib/constants/helpMessage.js

@@ -31,5 +31,5 @@ If you are going to deploy your application to https://fabric.harper.fast/, you
 
 Available templates:
 ${yellow('vanilla-ts          vanilla')}
-${cyan('react-ts            react')}
-${green('vue-ts              vue')}`;
+${cyan('react-ts            react               react-ts-ssr        react-ssr')}
+${green('vue-ts              vue                 vue-ts-ssr          vue-ssr')}`;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-harper",
 	"description": "Scaffold a new Harper project in JavaScript or TypeScript.",
-	"version": "1.7.3",
+	"version": "1.8.0",
 	"type": "module",
 	"author": {
 		"name": "HarperDB",
@@ -17,10 +17,14 @@
 		"!lib/**/*.test.js",
 		"template-react/",
 		"template-react-ts/",
+		"template-react-ssr/",
+		"template-react-ts-ssr/",
 		"template-vanilla/",
 		"template-vanilla-ts/",
 		"template-vue/",
-		"template-vue-ts/"
+		"template-vue-ts/",
+		"template-vue-ssr/",
+		"template-vue-ts-ssr/"
 	],
 	"scripts": {
 		"commitlint": "commitlint --edit",

package/template-react/README.md

@@ -81,7 +81,7 @@ These schemas are the heart of a great Harper app, specifying which tables you w
 
 ### View Your Website
 
-Pop open [http://localhost:9926](http://localhost:9926) to view [web/index.html](./web/index.html) in your browser.
+Pop open [http://localhost:9926](http://localhost:9926) to view [index.html](./index.html) in your browser.
 
 ### Use Your API
 
@@ -105,7 +105,11 @@ Take a look at the [default configuration](./config.yaml), which specifies how f
 
 When you are ready, head to [https://fabric.harper.fast/](https://fabric.harper.fast/), log in to your account, and create a cluster.
 
-Come back here and configure your [.env](./.env) file with your secure cluster credentials. Don't commit this file to source control!
+Come back and log in your local CLI to your cluster:
+
+```sh
+harper login
+```
 
 Then you can deploy your app to your cluster:
 

package/template-react/_gitignore

@@ -1,6 +1,5 @@
 .DS_Store
-web
-deploy
+dist
 
 #
 # https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore

package/template-react/config.yaml

@@ -24,6 +24,19 @@ jsResource:
   package: '@harperfast/schema-codegen'
   jsdoc: 'schemas/jsdocTypes.js'
 
-# Bootstraps Vite to build your frontend to HTML/JS/CSS
-'@harperfast/vite-plugin':
-  package: '@harperfast/vite-plugin'
+# Bootstraps Vite to build your frontend to HTML/JS/CSS.
+# In production it builds your app (and recompiles when files in `files` change); the `static`
+# component below serves the built output. Listed before `static` so its dev server wins in `harper dev`.
+'@harperfast/vite':
+  package: '@harperfast/vite'
+  files: 'src/**/*'
+  output: 'dist'
+
+# Serves the built frontend from Vite's output directory. `notFound` + `fallthrough: false` makes
+# client-side routing work (unmatched routes return index.html); the REST routes above take precedence.
+static:
+  files: 'dist/**'
+  notFound:
+    file: 'index.html'
+    statusCode: 200
+  fallthrough: false

package/template-react/package.json

@@ -13,18 +13,20 @@
 		"test": "node --test test/*.test.js",
 		"test:watch": "node --watch --test test/*.test.js",
 		"build": "vite build",
-		"deploy": "rm -Rf deploy && npm run build && mkdir deploy && mv web deploy/ && cp -R deploy-template/* deploy/ && cp -R schemas resources deploy/ && (cd deploy && harper deploy_component . project=web restart=true replicated=true) && rm -Rf deploy"
+		"deploy": "harper deploy_component . restart=true replicated=true"
 	},
-	"devDependencies": {
-		"@eslint/js": "^10.0.1",
+	"dependencies": {
 		"@harperfast/schema-codegen": "^1.0.10",
-		"@harperfast/vite-plugin": "^0.2.1",
+		"@harperfast/vite": "^1.1.0",
 		"@vitejs/plugin-react": "^6.0.1",
-		"eslint": "^10.0.2",
-		"globals": "^17.4.0",
-		"prettier": "^3.8.1",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"vite": "^8.0.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^10.0.1",
+		"eslint": "^10.0.2",
+		"globals": "^17.4.0",
+		"prettier": "^3.8.1"
 	}
 }

package/template-react/src/App.jsx

@@ -1,5 +1,4 @@
 import reactLogo from '/react.svg';
-import typescriptLogo from '/typescript.svg';
 import viteLogo from '/vite.svg';
 import { useCallback, useState } from 'react';
 import { increment } from './counter.js';
@@ -16,13 +15,10 @@ export function App() {
 				<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
 					<img src={viteLogo} className="logo" alt="Vite logo" />
 				</a>
-				<a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
-					<img src={typescriptLogo} className="logo vanilla" alt="TypeScript logo" />
-				</a>
 				<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
 					<img src={reactLogo} className="logo react" alt="React logo" />
 				</a>
-				<h1>Vite + TypeScript + React</h1>
+				<h1>Vite + React</h1>
 				<p>Wow, look at this!</p>
 				<div className="card">
 					<button id="counter" type="button" onClick={countUp}>

package/template-react/vite.config.js

@@ -9,11 +9,11 @@ export default defineConfig({
 	],
 	resolve: {
 		alias: {
-			'@': path.resolve(__dirname, './src'),
+			'@': path.resolve(import.meta.dirname, './src'),
 		},
 	},
 	build: {
-		outDir: 'web',
+		outDir: 'dist',
 		emptyOutDir: true,
 		rolldownOptions: {
 			external: ['**/*.test.*', '**/*.spec.*'],

package/template-react-ssr/README.md

@@ -0,0 +1,124 @@
+# your-project-name-here
+
+Your new app is now ready for development!
+
+Here's what you should do next:
+
+## Installation
+
+To get started, make sure you have [installed Harper](https://docs.harperdb.io/docs/deployments/install-harper):
+
+```sh
+npm install -g harper
+```
+
+## Development
+
+Then you can start your app:
+
+```sh
+npm run dev
+```
+
+### Define Your Schema
+
+1. Create a new yourTableName.graphql file in the [schemas](./schemas) directory.
+2. Craft your schema by hand.
+3. Save your changes.
+
+These schemas are the heart of a great Harper app, specifying which tables you want and what attributes/fields they should have. Any table you `@export` stands up [endpoints automatically](./.agents/skills/harper-best-practices/rules/automatic-apis.md).
+
+### Add Custom Endpoints
+
+1. Create a new greeting.js file in the [resources](./resources) directory.
+
+2. Customize your resource:
+
+   ```javascript
+   export class Greeting extends Resource {
+   	static loadAsInstance = false;
+
+   	async post(
+   		target,
+   		newRecord,
+   	) {
+   		// By default, only super users can access these endpoints.
+   		return { greeting: 'Greetings, post!' };
+   	}
+
+   	async get(target) {
+   		// But if we want anyone to be able to access it, we can turn off the permission checks!
+   		target.checkPermission = false;
+   		return { greeting: 'Greetings, get! ' + process.version };
+   	}
+
+   	async put(
+   		target,
+   		record,
+   	) {
+   		target.checkPermission = false;
+   		if (this.getCurrentUser()?.name?.includes('Coffee')) {
+   			// You can add your own authorization guards, of course.
+   			return new Response('Coffee? COFFEE?!', { status: 418 });
+   		}
+   		return { greeting: 'Sssssssssssssss!' };
+   	}
+
+   	async patch(
+   		target,
+   		record,
+   	) {
+   		return { greeting: 'We can make this work!' };
+   	}
+
+   	async delete(target) {
+   		return true;
+   	}
+   }
+   ```
+
+3. Save your changes.
+
+### View Your Website
+
+Pop open [http://localhost:9926](http://localhost:9926) to view [index.html](./index.html) in your browser.
+
+### Use Your API
+
+Test your application works by querying the `/Greeting` endpoint:
+
+```sh
+curl http://localhost:9926/Greeting
+```
+
+You should see the following:
+
+```json
+{ "greeting": "Hello, world!" }
+```
+
+### Configure Your App
+
+Take a look at the [default configuration](./config.yaml), which specifies how files are handled in your application.
+
+## Deployment
+
+When you are ready, head to [https://fabric.harper.fast/](https://fabric.harper.fast/), log in to your account, and create a cluster.
+
+Come back and log in your local CLI to your cluster:
+
+```sh
+harper login
+```
+
+Then you can deploy your app to your cluster:
+
+```sh
+npm run deploy
+```
+
+## Keep Going!
+
+For more information about getting started with Harper and building applications, see our [getting started guide](https://docs.harperdb.io/docs).
+
+For more information on Harper Components, see the [Components documentation](https://docs.harperdb.io/docs/reference/components).

package/template-react-ssr/_aiignore

@@ -0,0 +1 @@
+.env

package/template-react-ssr/_env

@@ -0,0 +1 @@
+CLI_TARGET='your-fabric.harper.fast-cluster-url-here'

package/template-react-ssr/_env.example

@@ -0,0 +1 @@
+CLI_TARGET='YOUR_FABRIC.HARPER.FAST_CLUSTER_URL_HERE'

package/template-react-ssr/_github/workflow/deploy.yaml

@@ -0,0 +1,33 @@
+name: Deploy to Harper Fabric
+on:
+  workflow_dispatch:
+#  push:
+#    branches:
+#      - main
+
+concurrency:
+  group: main
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+      - name: Set up Node.js
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        with:
+          cache: 'npm'
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run unit tests
+        run: npm test
+      - name: Run lint
+        run: npm run lint
+      - name: Build & deploy
+        run: npm run deploy

package/template-react-ssr/_gitignore

@@ -0,0 +1,148 @@
+.DS_Store
+dist
+
+#
+# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
+#
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/

package/template-react-ssr/_nvmrc

@@ -0,0 +1 @@
+24.13.1

package/template-react-ssr/config.yaml

@@ -0,0 +1,42 @@
+# yaml-language-server: $schema=./node_modules/harper/config-app.schema.json
+
+# This is the configuration file for the application.
+# It specifies built-in Harper components that will load the specified feature and files.
+# For more information, see https://docs.harperdb.io/docs/reference/components/built-in-extensions
+
+# Load Environment Variables from the specified file
+# loadEnv:
+#   files: '.env'
+
+# This provides the HTTP REST interface for all exported resources
+rest: true
+
+# These reads GraphQL schemas to define the schema of database/tables/attributes.
+graphqlSchema:
+  files: 'schemas/*.graphql'
+
+# Loads JavaScript modules such that their exports are exported as resources
+jsResource:
+  files: 'resources/*.js'
+
+# Generates jsdoc types for the schema so your code is schema-aware
+'@harperfast/schema-codegen':
+  package: '@harperfast/schema-codegen'
+  jsdoc: 'schemas/jsdocTypes.js'
+
+# Bootstraps Vite to build your frontend to HTML/JS/CSS.
+# In production it builds your app (and recompiles when files in `files` change) and renders HTML on
+# the server; the `static` component below serves the built assets. Listed before `static` so its dev
+# server wins in `harper dev`.
+'@harperfast/vite':
+  package: '@harperfast/vite'
+  files: 'src/**/*'
+  output: 'dist'
+  # Server-side render entry. Renders HTML on the server; omit to serve a client-only (SPA) app.
+  ssr: 'src/entry-server.jsx'
+
+# Serves the built assets from Vite's output directory. `index: false` because this is an SSR app —
+# the Vite plugin renders index.html; static only serves assets.
+static:
+  files: 'dist/**'
+  index: false

package/template-react-ssr/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js';
+import globals from 'globals';
+
+export default [
+	js.configs.recommended,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+		},
+		rules: {
+			'no-unused-vars': 'warn',
+			'no-console': 'off',
+		},
+	},
+	{
+		ignores: ['node_modules/'],
+	},
+];

package/template-react-ssr/graphql.config.yml

@@ -0,0 +1,3 @@
+schema: schema.graphql
+include: node_modules/harper/schema.graphql
+documents: '**/*.graphql'

package/template-react-ssr/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>your-project-name-here</title>
+  </head>
+  <body>
+    <div id="app"><!--ssr-outlet--></div>
+    <script type="module" src="/src/entry-client.jsx"></script>
+  </body>
+</html>

package/template-react-ssr/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "your-package-name-here",
+	"version": "0.0.0",
+	"type": "module",
+	"repository": "github:HarperFast/create-harper",
+	"scripts": {
+		"agent:run": "npx -y @harperfast/agent@latest",
+		"agent:skills:update": "npx -y skills@latest add harperfast/skills --all --yes",
+		"start": "harper run .",
+		"dev": "harper dev .",
+		"lint": "eslint .",
+		"format": "prettier --write .",
+		"test": "node --test test/*.test.js",
+		"test:watch": "node --watch --test test/*.test.js",
+		"build": "vite build",
+		"deploy": "harper deploy_component . restart=true replicated=true"
+	},
+	"dependencies": {
+		"@harperfast/schema-codegen": "^1.0.10",
+		"@harperfast/vite": "^1.1.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"vite": "^8.0.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^10.0.1",
+		"eslint": "^10.0.2",
+		"globals": "^17.4.0",
+		"prettier": "^3.8.1"
+	}
+}

package/template-react-ssr/public/react.svg

@@ -0,0 +1,14 @@
+<svg
+  width="100%"
+  height="100%"
+  viewBox="-10.5 -9.45 21 18.9"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle cx="0" cy="0" r="2" fill="#58c4dc"></circle>
+  <g stroke="#58c4dc" stroke-width="1" fill="none">
+    <ellipse rx="10" ry="4.5"></ellipse>
+    <ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse>
+    <ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse>
+  </g>
+</svg>