refactor to use components in react-net-templates

Author: mythz

MyApp.Client/app/page.tsx

@@ -1,8 +1,6 @@
 import Intro from "@/components/intro"
 import Layout from "@/components/layout"
 import { CMS_NAME } from "@/lib/constants"
-import GettingStarted from "@/components/getting-started"
-import AutoUis from "@/components/auto-uis"
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -15,11 +13,6 @@ export default function Index() {
     <Layout>
       <div className="max-w-7xl mx-auto px-5">
           <Intro />
-          <div className="mb-32 flex justify-center">
-              <GettingStarted template="next-static" />
-          </div>
-
-          <AutoUis className="mt-60" />
       </div>
     </Layout>
   )

MyApp.Client/components/auto-uis.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react"
 import { TextInput, useClient } from "@servicestack/react"
 import { ApiResult } from "@servicestack/client"
+import { GettingStarted, AutoUis } from "react-net-templates"
 import { CMS_NAME } from "@/lib/constants"
 import { Hello, HelloResponse } from "@/lib/dtos"
 
@@ -22,9 +23,9 @@ const HelloApi = ({ name }:any) => {
     : <div className="ml-3 mt-2 text-gray-900 dark:text-gray-100">{api.response?.result ?? 'loading...'}</div>
 }
 
-const Intro = () => {
+export default function Intro() {
   const [inputValue, setInputValue] = useState<string>("Next.js");
-    return (
+    return (<>
     <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
       <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8 text-gray-900 dark:text-gray-100">
         Next.js
@@ -49,7 +50,11 @@ const Intro = () => {
         </div>
       </div>
     </section>
-  )
+    <div>
+      <div className="mb-32 flex justify-center">
+        <GettingStarted template="next-static" />
+      </div>
+      <AutoUis className="mt-60" />
+    </div>
+  </>)
 }
-
-export default Intro

MyApp.Client/components/getting-started.tsx

@@ -21,6 +21,7 @@
     "next": "^16.0.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-net-templates": "^0.0.1",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {

MyApp.Client/components/intro.tsx

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @source "../node_modules/@servicestack/react/dist/servicestack-react.mjs";
+@source "../../node_modules/react-net-templates/dist/index.js";
 
 @variant dark (.dark &);
 

MyApp.Client/package-lock.json

@@ -47,7 +47,7 @@
 {
     app.UseDeveloperExceptionPage();
     app.UseMigrationsEndPoint();
-        
+
     app.MapNotFoundToNode(nodeProxy);
 }
 else
@@ -62,7 +62,6 @@
 app.MapCleanUrls();
 
 app.UseHttpsRedirection();
-app.UseWebSockets();
 app.UseAuthorization();
 app.MapRazorPages();
 
@@ -73,6 +72,7 @@
 // Proxy development HMR WebSocket and fallback routes to the Next server
 if (app.Environment.IsDevelopment())
 {
+    app.UseWebSockets();
     app.MapNextHmr(nodeProxy);
 
     // Start the Next.js dev server if the Next.js lockfile does not exist

MyApp.Client/package.json

@@ -291,6 +291,7 @@ enable deploying all your Repositories to the same server.
 **Optional**:
 
 | Variable | Example | Description |
+|----------|---------|-------------|
 | `SERVICESTACK_LICENSE` | `...` | ServiceStack license key |
 
 **Inferred** (from GitHub Action context):