<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][README.md]" value="# SolidStart

Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);

## Creating a project

```bash
# create a new project in the current directory
npm init solid@latest

# create a new project in my-app
npm init solid@latest my-app
```

## Developing

Once you&#39;ve created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

Solid apps are built with _presets_, which optimise your project for deployment to different environments.

By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
">
<input type="hidden" name="project[files][app.config.ts]" value="import { defineConfig } from &quot;@solidjs/start/config&quot;;

export default defineConfig({});
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;example-with-trpc&quot;,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vinxi dev&quot;,&quot;build&quot;:&quot;vinxi build&quot;,&quot;start&quot;:&quot;vinxi start&quot;},&quot;dependencies&quot;:{&quot;@solidjs/meta&quot;:&quot;^0.29.4&quot;,&quot;@solidjs/router&quot;:&quot;^0.15.0&quot;,&quot;@solidjs/start&quot;:&quot;https://pkg.pr.new/solidjs/solid-start/@solidjs/start@819b35d&quot;,&quot;@trpc/client&quot;:&quot;^10.45.2&quot;,&quot;@trpc/server&quot;:&quot;^10.45.2&quot;,&quot;@typeschema/valibot&quot;:&quot;^0.13.4&quot;,&quot;solid-js&quot;:&quot;^1.9.5&quot;,&quot;valibot&quot;:&quot;^0.29.0&quot;,&quot;vinxi&quot;:&quot;^0.5.7&quot;},&quot;engines&quot;:{&quot;node&quot;:&quot;&gt;=22&quot;}}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ESNext&quot;,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;moduleResolution&quot;: &quot;bundler&quot;,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;jsxImportSource&quot;: &quot;solid-js&quot;,
    &quot;allowJs&quot;: true,
    &quot;strict&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;types&quot;: [&quot;vinxi/types/client&quot;],
    &quot;isolatedModules&quot;: true,
    &quot;paths&quot;: {
      &quot;~/*&quot;: [&quot;./src/*&quot;]
    }
  }
}
">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/ff3dc56a-fe42-44fa-b5f6-dff7bf81b761">
<input type="hidden" name="project[files][src/app.css]" value="body {
  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;
}

a {
  margin-right: 1rem;
}

main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h1 {
  color: #335d92;
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 100;
  line-height: 1.1;
  margin: 4rem auto;
  max-width: 14rem;
}

p {
  max-width: 14rem;
  margin: 2rem auto;
  line-height: 1.35;
}

@media (min-width: 480px) {
  h1 {
    max-width: none;
  }

  p {
    max-width: none;
  }
}
">
<input type="hidden" name="project[files][src/app.tsx]" value="import { MetaProvider, Title } from &quot;@solidjs/meta&quot;;
import { Router } from &quot;@solidjs/router&quot;;
import { FileRoutes } from &quot;@solidjs/start/router&quot;;
import { Suspense } from &quot;solid-js&quot;;
import &quot;./app.css&quot;;

export default function App() {
  return (
    &lt;Router
      root={props =&gt; (
        &lt;MetaProvider&gt;
          &lt;Title&gt;SolidStart - Basic&lt;/Title&gt;
          &lt;a href=&quot;/&quot;&gt;Index&lt;/a&gt;
          &lt;a href=&quot;/about&quot;&gt;About&lt;/a&gt;
          &lt;Suspense&gt;{props.children}&lt;/Suspense&gt;
        &lt;/MetaProvider&gt;
      )}
    &gt;
      &lt;FileRoutes /&gt;
    &lt;/Router&gt;
  );
}
">
<input type="hidden" name="project[files][src/entry-client.tsx]" value="// @refresh reload
import { mount, StartClient } from &quot;@solidjs/start/client&quot;;

mount(() =&gt; &lt;StartClient /&gt;, document.getElementById(&quot;app&quot;)!);
">
<input type="hidden" name="project[files][src/entry-server.tsx]" value="// @refresh reload
import { createHandler, StartServer } from &quot;@solidjs/start/server&quot;;

export default createHandler(() =&gt; (
  &lt;StartServer
    document={({ assets, children, scripts }) =&gt; (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
          {assets}
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id=&quot;app&quot;&gt;{children}&lt;/div&gt;
          {scripts}
        &lt;/body&gt;
      &lt;/html&gt;
    )}
  /&gt;
));
">
<input type="hidden" name="project[files][src/global.d.ts]" value="/// &lt;reference types=&quot;@solidjs/start/env&quot; /&gt;
">
<input type="hidden" name="project[files][src/components/Counter.css]" value=".increment {
  font-family: inherit;
  font-size: inherit;
  padding: 1em 2em;
  color: #335d92;
  background-color: rgba(68, 107, 158, 0.1);
  border-radius: 2em;
  border: 2px solid rgba(68, 107, 158, 0);
  outline: none;
  width: 200px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.increment:focus {
  border: 2px solid #335d92;
}

.increment:active {
  background-color: rgba(68, 107, 158, 0.2);
}">
<input type="hidden" name="project[files][src/components/Counter.tsx]" value="import { createSignal } from &quot;solid-js&quot;;
import &quot;./Counter.css&quot;;

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    &lt;button class=&quot;increment&quot; onClick={() =&gt; setCount(count() + 1)} type=&quot;button&quot;&gt;
      Clicks: {count()}
    &lt;/button&gt;
  );
}
">
<input type="hidden" name="project[files][src/lib/api.ts]" value="import {
  createTRPCProxyClient,
  httpBatchLink,
  loggerLink,
} from &#39;@trpc/client&#39;;
import { AppRouter } from &quot;~/server/api/root&quot;;

const getBaseUrl = () =&gt; {
  if (typeof window !== &quot;undefined&quot;) return &quot;&quot;;
  // replace example.com with your actual production url
  if (process.env.NODE_ENV === &quot;production&quot;) return &quot;https://example.com&quot;;
  return `http://localhost:${process.env.PORT ?? 3000}`;
};

// create the client, export it
export const api = createTRPCProxyClient&lt;AppRouter&gt;({
  links: [
      // will print out helpful logs when using client
      loggerLink(),
      // identifies what url will handle trpc requests
      httpBatchLink({ url: `${getBaseUrl()}/api/trpc` })
  ],
});
">
<input type="hidden" name="project[files][src/routes/%5B...404%5D.tsx]" value="import { Title } from &quot;@solidjs/meta&quot;;
import { HttpStatusCode } from &quot;@solidjs/start&quot;;

export default function NotFound() {
  return (
    &lt;main&gt;
      &lt;Title&gt;Not Found&lt;/Title&gt;
      &lt;HttpStatusCode code={404} /&gt;
      &lt;h1&gt;Page Not Found&lt;/h1&gt;
      &lt;p&gt;
        Visit{&quot; &quot;}
        &lt;a href=&quot;https://start.solidjs.com&quot; target=&quot;_blank&quot;&gt;
          start.solidjs.com
        &lt;/a&gt;{&quot; &quot;}
        to learn how to build SolidStart apps.
      &lt;/p&gt;
    &lt;/main&gt;
  );
}
">
<input type="hidden" name="project[files][src/routes/about.tsx]" value="import { Title } from &quot;@solidjs/meta&quot;;

export default function About() {
  return (
    &lt;main&gt;
      &lt;Title&gt;About&lt;/Title&gt;
      &lt;h1&gt;About&lt;/h1&gt;
    &lt;/main&gt;
  );
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { Title } from &quot;@solidjs/meta&quot;;
import { createAsync } from &quot;@solidjs/router&quot;;
import Counter from &quot;~/components/Counter&quot;;
import { api } from &quot;~/lib/api&quot;;

export default function Home() {
  const hello = createAsync(() =&gt; api.example.hello.query(&quot;world&quot;));
  return (
    &lt;main&gt;
      &lt;Title&gt;Hello World&lt;/Title&gt;
      &lt;h1&gt;Hello world!&lt;/h1&gt;
      &lt;Counter /&gt;
      &lt;p&gt;
        Visit{&quot; &quot;}
        &lt;a href=&quot;https://start.solidjs.com&quot; target=&quot;_blank&quot;&gt;
          start.solidjs.com
        &lt;/a&gt;{&quot; &quot;}
        to learn how to build SolidStart apps.
      &lt;/p&gt;
      &lt;pre&gt;
        &lt;code&gt;{JSON.stringify(hello(), null, 2)}&lt;/code&gt;
      &lt;/pre&gt;
    &lt;/main&gt;
  );
}
">
<input type="hidden" name="project[files][src/server/api/root.ts]" value="import { exampleRouter } from &quot;./routers/example&quot;;
import { createTRPCRouter } from &quot;./utils&quot;;

export const appRouter = createTRPCRouter({
  example: exampleRouter
});

export type AppRouter = typeof appRouter;
">
<input type="hidden" name="project[files][src/server/api/utils.ts]" value="import { initTRPC } from &quot;@trpc/server&quot;;

export const t = initTRPC.create();

export const createTRPCRouter = t.router;
export const publicProcedure = t.procedure;
">
<input type="hidden" name="project[files][src/server/api/routers/example.ts]" value="import { wrap } from &quot;@typeschema/valibot&quot;;
import { string } from &quot;valibot&quot;;
import { createTRPCRouter, publicProcedure } from &quot;../utils&quot;;

export const exampleRouter = createTRPCRouter({
  hello: publicProcedure
    .input(wrap(string()))
    .query(({ input }) =&gt; {
      return `Hello ${input}!`;
    })
});
">
<input type="hidden" name="project[files][src/routes/api/trpc/%5Btrpc%5D.ts]" value="import type { APIEvent } from &quot;@solidjs/start/server&quot;;
import { fetchRequestHandler } from &quot;@trpc/server/adapters/fetch&quot;;
import { appRouter } from &quot;~/server/api/root&quot;;

const handler = (event: APIEvent) =&gt;
  // adapts tRPC to fetch API style requests
  fetchRequestHandler({
    // the endpoint handling the requests
    endpoint: &quot;/api/trpc&quot;,
    // the request object
    req: event.request,
    // the router for handling the requests
    router: appRouter,
    // any arbitrary data that should be available to all actions
    createContext:  () =&gt; event
  });

export const GET = handler;
export const POST = handler;
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="example-with-trpc">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>