feat: Use new templates from NPM

Author: dawsontoth

src/features/instance/applications/components/NewApplication/CLIInstructions.tsx

@@ -1,9 +1,8 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
-import { CheckIcon, CopyIcon, TerminalIcon } from 'lucide-react';
+import { CheckIcon, CopyIcon } from 'lucide-react';
 import { FormState, UseFormWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { NewApplicationSchema } from './schema';
@@ -54,13 +53,6 @@ export function CLIInstructions({
 								</Button>
 							</div>
 							{cliStep.note && <p className="text-muted-foreground text-sm mt-2">{cliStep.note}</p>}
-
-							{cliStep.alert && (
-								<Alert className="mt-2">
-									<TerminalIcon className="w-4 h-4" />
-									<AlertDescription>{cliStep.alert}</AlertDescription>
-								</Alert>
-							)}
 						</div>
 
 						<Separator className="bg-black" />

src/features/instance/applications/components/NewApplication/templates.ts

@@ -4,14 +4,16 @@ export const templates = [
 		name: 'Web + REST ORM',
 		description: "Define your entities in schema.graphql, add your HTML/CSS/JS in web, and you're cooking!",
 		tags: ['Harper', 'ORM', 'REST', 'GraphQL'],
-		githubUrl: 'https://github.com/HarperFast/application-template/tree/fabric',
+		npm: '@harperfast/template-vanilla-studio',
+		githubUrl: 'https://github.com/HarperFast/create-harper/tree/main/template-vanilla',
 	},
 	{
 		id: 'harper-ts',
 		name: 'TypeScript',
 		description: 'The same Web + REST ORM from the first template, but with TypeScript sprinkled in.',
 		tags: ['Harper', 'TypeScript', 'GraphQL'],
-		githubUrl: 'https://github.com/HarperFast/application-template/tree/fabric-typescript',
+		npm: '@harperfast/template-vanilla-ts-studio',
+		githubUrl: 'https://github.com/HarperFast/create-harper/tree/main/template-vanilla-ts',
 	},
 	// {
 	// 	id: 'nextjs',

src/features/instance/applications/components/NewApplication/useCLISteps.tsx

@@ -2,6 +2,7 @@ import { isLocalStudio } from '@/config/constants';
 import { useInstanceClientParams } from '@/config/useInstanceClient';
 import { useInstanceAuth } from '@/hooks/useAuth';
 import { Cluster, Instance } from '@/integrations/api/api.patch';
+import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { toKebabCase } from '@/lib/string/to-kebab-case';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
@@ -20,29 +21,29 @@ export function useCLISteps(appName: string) {
 
 	return useMemo(() => {
 		const directoryName = toKebabCase(appName);
+		const createArgs = [
+			user?.username && ` --deploymentUsername="${user?.username}"`,
+			target && ` --deploymentURL="${target}"`,
+		].filter(excludeFalsy).join('');
 		return [
 			{
 				title: 'Install Harper CLI',
 				code: 'npm install -g harperdb',
 			},
 			{
-				title: 'Clone Template',
-				code: `git clone https://github.com/HarperFast/application-template.git ${directoryName}
-cd ${directoryName}`,
+				title: 'Set up your app',
+				code: `npm create harper ${directoryName}${createArgs.length ? ' --' : ''}${createArgs}`,
+				note: 'You will be asked some easy questions to get you started. To make deployments easy, enter your'
+					+ ' password for this cluster. It will get saved into your local .env file.',
 			},
 			{
 				title: 'Start Local Harper Instance',
 				code: 'npm run dev',
-				alert: 'You will be prompted to configure your instance',
+				note: 'You will be prompted to configure your instance.',
 			},
 			{
 				title: 'Make Changes!',
-				code: `pico schema.graphql`,
-			},
-			{
-				title: 'Configure your .env file',
-				code: `npm run login ${user?.username}@${target}`,
-				note: `Your credentials are your own! Remember to exclude the .env file from source control.`,
+				code: `pico schemas/examplePeople.graphql`,
 			},
 			{
 				title: 'Deploy Application',

src/features/instance/applications/components/NewApplication/useCreateFromTemplate.ts

@@ -35,7 +35,7 @@ export function useCreateFromTemplate(
 		}
 		mutate({
 			project,
-			template: template.githubUrl,
+			template: template.npm || template.githubUrl,
 			...instanceParams,
 		}, {
 			onSuccess: () => {

src/features/instance/applications/lib/parseReadMe.ts

@@ -11,7 +11,9 @@ export function parseReadMe(
 		contents = contents.replaceAll(/https?:\/\/localhost:9926/g, rest9926URL);
 	}
 	if (response.project) {
-		contents = contents.replaceAll('Your New Harper Fabric App', response.project);
+		contents = contents
+			.replaceAll('Your New Harper Fabric App', response.project)
+			.replaceAll('your-project-name-here', response.project);
 	}
 	return contents;
 }

src/integrations/api/instance/applications/addComponent.ts

@@ -18,7 +18,7 @@ async function addComponent({
 		project,
 		template,
 		replicated: entityType === 'cluster',
-	});
+	}, { timeout: 300_000 });
 	return data;
 }