create-redmix-app 0.0.1

package/templates/ts/package.json

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "api",
+      "web"
+    ]
+  },
+  "devDependencies": {
+    "@redmix/core": "0.0.1",
+    "@redmix/project-config": "0.0.1"
+  },
+  "eslintConfig": {
+    "extends": "@redmix/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": "=20.x"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "yarn@4.6.0",
+  "resolutions": {
+    "@storybook/react-dom-shim@npm:7.6.20": "https://verdaccio.tobbe.dev/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz",
+    "react-is": "19.0.0-rc-f2df5694-20240916"
+  }
+}

package/templates/ts/prettier.config.js

@@ -0,0 +1,18 @@
+// https://prettier.io/docs/en/options.html
+/** @type {import('prettier').RequiredOptions} */
+module.exports = {
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'always',
+  overrides: [
+    {
+      files: 'Routes.*',
+      options: {
+        printWidth: 999,
+      },
+    },
+  ],
+}

package/templates/ts/redwood.toml

@@ -0,0 +1,21 @@
+# This file contains the configuration settings for your Redwood app.
+# This file is also what makes your Redwood app a Redwood app.
+# If you remove it and try to run `yarn rw dev`, you'll get an error.
+#
+# For the full list of options, see the "App Configuration: redwood.toml" doc:
+# https://redwoodjs.com/docs/app-configuration-redwood-toml
+
+[web]
+  title = "Redwood App"
+  port = 8910
+  apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
+  includeEnvironmentVariables = [
+    # Add any ENV vars that should be available to the web side to this array
+    # See https://redwoodjs.com/docs/environment-variables#web
+  ]
+[api]
+  port = 8911
+[browser]
+  open = true
+[notifications]
+  versionUpdates = ["latest"]

package/templates/ts/scripts/seed.ts

@@ -0,0 +1,27 @@
+// import { db } from 'api/src/lib/db'
+
+// Manually apply seeds via the `yarn rw prisma db seed` command.
+//
+// Seeds automatically run the first time you run the `yarn rw prisma migrate dev`
+// command and every time you run the `yarn rw prisma migrate reset` command.
+//
+// See https://redwoodjs.com/docs/database-seeds for more info
+
+export default async () => {
+  try {
+    // Create your database records here! For example, seed some users:
+    //
+    // const users = [
+    //   { name: 'Alice', email: 'alice@redmix.com' },
+    //   { name: 'Bob', email: 'bob@redmix.com' },
+    // ]
+    //
+    // await db.user.createMany({ data: users })
+
+    console.info(
+      '\n  No seed data, skipping. See scripts/seed.ts to start seeding your database!\n'
+    )
+  } catch (error) {
+    console.error(error)
+  }
+}

package/templates/ts/scripts/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "ES2023",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "paths": {
+      "$api/*": ["../api/*"],
+      "api/*": ["../api/*"],
+      "$api/src/*": ["../api/src/*", "../.redwood/types/mirror/api/src/*"],
+      "api/src/*": ["../api/src/*", "../.redwood/types/mirror/api/src/*"],
+      "$web/*": ["../web/*"],
+      "web/*": ["../web/*"],
+      "$web/src/*": ["../web/src/*", "../.redwood/types/mirror/web/src/*"],
+      "web/src/*": ["../web/src/*", "../.redwood/types/mirror/web/src/*"],
+      "types/*": ["../types/*", "../web/types/*", "../api/types/*"]
+    },
+    "typeRoots": ["../node_modules/@types"],
+    "jsx": "preserve"
+  },
+  "include": [
+    ".",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types"
+  ]
+}

package/templates/ts/web/jest.config.js

@@ -0,0 +1,8 @@
+// More info at https://redwoodjs.com/docs/project-configuration-dev-test-build
+
+const config = {
+  rootDir: '../',
+  preset: '@redmix/testing/config/jest/web',
+}
+
+module.exports = config

package/templates/ts/web/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "browserslist": {
+    "development": [
+      "last 1 version"
+    ],
+    "production": [
+      "defaults"
+    ]
+  },
+  "dependencies": {
+    "@redmix/forms": "0.0.1",
+    "@redmix/router": "0.0.1",
+    "@redmix/web": "0.0.1",
+    "react": "19.0.0-rc-f2df5694-20240916",
+    "react-dom": "19.0.0-rc-f2df5694-20240916"
+  },
+  "devDependencies": {
+    "@redmix/vite": "0.0.1",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19"
+  }
+}

package/templates/ts/web/public/README.md

@@ -0,0 +1,43 @@
+# Static Assets
+
+Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Vite builds for production). They will also be available during development when you run `yarn rw dev`.
+
+> Note: files will _not_ hot reload while the development server is running. You'll need to manually stop/start to access file changes.
+
+### Example Use
+
+A file like `favicon.png` will be copied to `/dist/favicon.png`. A folder containing a file such as `static-files/my-logo.jpg` will be copied to `/dist/static-files/my-logo.jpg`. These can be referenced in your code directly without any special handling, e.g.
+
+```
+<link rel="icon" type="image/png" href="/favicon.png" />
+```
+
+and
+
+```
+<img src="/static-files/my-logo.jpg"> alt="Logo" />
+```
+
+## Best Practices
+
+Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.
+
+In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the `dist` folder with a hash.
+
+### Example Asset Import with Vite
+
+Instead of handling our logo image as a static file per the example above, we can do the following:
+
+```
+import React from "react"
+import logo from "./my-logo.jpg"
+
+
+function Header() {
+  return <img src={logo} alt="Logo" />
+}
+
+export default Header
+```
+
+See Vite's docs for [static asset handling](https://vitejs.dev/guide/assets.html)

package/templates/ts/web/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/templates/ts/web/src/App.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+
+import { FatalErrorBoundary, RedwoodProvider } from '@redmix/web'
+import { RedwoodApolloProvider } from '@redmix/web/apollo'
+
+import FatalErrorPage from 'src/pages/FatalErrorPage'
+
+import './index.css'
+
+interface AppProps {
+  children?: ReactNode
+}
+
+const App = ({ children }: AppProps) => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>{children}</RedwoodApolloProvider>
+    </RedwoodProvider>
+  </FatalErrorBoundary>
+)
+
+export default App

package/templates/ts/web/src/Routes.tsx

@@ -0,0 +1,20 @@
+// In this file, all Page components from 'src/pages` are auto-imported. Nested
+// directories are supported, and should be uppercase. Each subdirectory will be
+// prepended onto the component name.
+//
+// Examples:
+//
+// 'src/pages/HomePage/HomePage.js'         -> HomePage
+// 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
+
+import { Router, Route } from '@redmix/router'
+
+const Routes = () => {
+  return (
+    <Router>
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+export default Routes

package/templates/ts/web/src/entry.client.tsx

@@ -0,0 +1,35 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+import Routes from './Routes'
+
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://react.dev/reference/react-dom/client/hydrateRoot
+ */
+const redwoodAppElement = document.getElementById('redwood-app')
+
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it " +
+      "exists in your 'web/src/index.html' file."
+  )
+}
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(
+    redwoodAppElement,
+    <App>
+      <Routes />
+    </App>
+  )
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(
+    <App>
+      <Routes />
+    </App>
+  )
+}

package/templates/ts/web/src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/favicon.png" />
+</head>
+
+<body>
+  <!-- Please keep this div empty -->
+  <div id="redwood-app"></div>
+</body>
+
+</html>

package/templates/ts/web/src/pages/FatalErrorPage/FatalErrorPage.tsx

@@ -0,0 +1,57 @@
+// This page will be rendered when an error makes it all the way to the top of the
+// application without being handled by a Javascript catch statement or React error
+// boundary.
+//
+// You can modify this page as you wish, but it is important to keep things simple to
+// avoid the possibility that it will cause its own error. If it does, Redwood will
+// still render a generic error page, but your users will prefer something a bit more
+// thoughtful :)
+
+// This import will be automatically removed when building for production
+import { DevFatalErrorPage } from '@redmix/web/dist/components/DevFatalErrorPage'
+
+export default DevFatalErrorPage ||
+  (() => (
+    <main>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+              html, body {
+                margin: 0;
+              }
+              html * {
+                box-sizing: border-box;
+              }
+              main {
+                display: flex;
+                align-items: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+                text-align: center;
+                background-color: #E2E8F0;
+                height: 100vh;
+              }
+              section {
+                background-color: white;
+                border-radius: 0.25rem;
+                width: 32rem;
+                padding: 1rem;
+                margin: 0 auto;
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+              }
+              h1 {
+                font-size: 2rem;
+                margin: 0;
+                font-weight: 500;
+                line-height: 1;
+                color: #2D3748;
+              }
+            `,
+        }}
+      />
+      <section>
+        <h1>
+          <span>Something went wrong</span>
+        </h1>
+      </section>
+    </main>
+  ))

package/templates/ts/web/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,44 @@
+export default () => (
+  <main>
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+              html, body {
+                margin: 0;
+              }
+              html * {
+                box-sizing: border-box;
+              }
+              main {
+                display: flex;
+                align-items: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+                text-align: center;
+                background-color: #E2E8F0;
+                height: 100vh;
+              }
+              section {
+                background-color: white;
+                border-radius: 0.25rem;
+                width: 32rem;
+                padding: 1rem;
+                margin: 0 auto;
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+              }
+              h1 {
+                font-size: 2rem;
+                margin: 0;
+                font-weight: 500;
+                line-height: 1;
+                color: #2D3748;
+              }
+            `,
+      }}
+    />
+    <section>
+      <h1>
+        <span>404 Page Not Found</span>
+      </h1>
+    </section>
+  </main>
+)

package/templates/ts/web/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": false,
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/web/src",
+      "../api/src",
+      "../.redwood/types/mirror/api/src"
+    ],
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/web/src/*",
+        "../api/src/*",
+        "../.redwood/types/mirror/api/src/*"
+      ],
+      "$api/*": ["../api/*"],
+      "types/*": ["./types/*", "../types/*"],
+      "@redmix/testing": ["../node_modules/@redmix/testing/web"]
+    },
+    "typeRoots": [
+      "../node_modules/@types",
+      "./node_modules/@types",
+      "../node_modules/@testing-library"
+    ],
+    "types": ["jest", "jest-dom"],
+    "jsx": "preserve"
+  },
+  "include": [
+    "src",
+    "config",
+    ".storybook/**/*",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types",
+    "./types"
+  ]
+}

package/templates/ts/web/vite.config.ts

@@ -0,0 +1,16 @@
+import dns from 'dns'
+
+import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
+
+import redwood from '@redmix/vite'
+
+// So that Vite will load on localhost instead of `127.0.0.1`.
+// See: https://vitejs.dev/config/server-options.html#server-host.
+dns.setDefaultResultOrder('verbatim')
+
+const viteConfig: UserConfig = {
+  plugins: [redwood()],
+}
+
+export default defineConfig(viteConfig)