This commit is contained in:
Michael Zhang 2024-12-04 01:50:44 -06:00
commit 84e368f0ed
50 changed files with 18639 additions and 0 deletions

10
.editorconfig Normal file
View file

@ -0,0 +1,10 @@
# editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

19
.env.defaults Normal file
View file

@ -0,0 +1,19 @@
# These environment variables will be used by default if you do not create any
# yourself in .env. This file should be safe to check into your version control
# system. Any custom values should go in .env and .env should *not* be checked
# into version control.
# schema.prisma defaults
DATABASE_URL=file:./dev.db
# location of the test database for api service scenarios (defaults to ./.redwood/test.db if not set)
# TEST_DATABASE_URL=file:./.redwood/test.db
# disables Prisma CLI update notifier
PRISMA_HIDE_UPDATE_MESSAGE=true
# Option to override the current environment's default api-side log level
# See: https://redwoodjs.com/docs/logger for level options, defaults to "trace" otherwise.
# Most applications want "debug" or "info" during dev, "trace" when you have issues and "warn" in production.
# Ordered by how verbose they are: trace | debug | info | warn | error | silent
# LOG_LEVEL=debug

4
.env.example Normal file
View file

@ -0,0 +1,4 @@
# DATABASE_URL=file:./dev.db
# TEST_DATABASE_URL=file:./.redwood/test.db
# PRISMA_HIDE_UPDATE_MESSAGE=true
# LOG_LEVEL=trace

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
.idea
.DS_Store
.env*
!.env.example
!.env.defaults
.netlify
.redwood/*
!.redwood/README.md
dev.db*
dist
dist-babel
node_modules
yarn-error.log
web/public/mockServiceWorker.js
web/types/graphql.d.ts
api/types/graphql.d.ts
api/src/lib/generateGraphiQLHeader.*
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

44
.redwood/README.md Normal file
View file

@ -0,0 +1,44 @@
# .redwood
## What is this directory?
Redwood uses this `.redwood` directory to store transitory data that aids in the smooth and convenient operation of your Redwood project.
## Do I need to do anything with this directory?
No. You shouldn't have to create, edit or delete anything in this directory in your day-to-day work with Redwood.
You don't need to commit any other contents of this directory to your version control system. It's ignored by default.
## What's in this directory?
### Files
| Name | Description |
| :---------------- | :----------------------------------------------------------------------------------------------------------------- |
| commandCache.json | This file contains mappings to assist the Redwood CLI in efficiently executing commands. |
| schema.graphql | This is the GraphQL schema which has been automatically generated from your Redwood project. |
| telemetry.txt | Contains a unique ID used for telemetry. This value is rotated every 24 hours to protect your project's anonymity. |
| test.db | The sqlite database used when running tests. |
### Directories
| Name | Description |
| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| locks | Stores temporary files that Redwood uses to keep track of the execution of async/background tasks between processes. |
| logs | Stores log files for background tasks such as update checking. |
| prebuild | Stores transpiled JavaScript that is generated as part of Redwood's build process. |
| telemetry | Stores the recent telemetry that the Redwood CLI has generated. You may inspect these files to see everything Redwood is anonymously collecting. |
| types | Stores the results of type generation. |
| updateCheck | Stores a file which contains the results of checking for Redwood updates. |
| studio | Used to store data for `rw studio` |
We try to keep this README up to date but you may, from time to time, find other files or directories in this `.redwood` directory that have not yet been documented here. This is likely nothing to worry about but feel free to let us know and we'll update this list.
### Telemetry
RedwoodJS collects completely anonymous telemetry data about general usage. For transparency, that data is viewable in the respective directories and files. To learn more and manage your project's settings, visit [telemetry.redwoodjs.com](https://telemetry.redwoodjs.com).
### Have any questions?
Feel free to reach out to us in the [RedwoodJS Community](https://community.redwoodjs.com/) forum if you have any questions.

14
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,14 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"ofhumanbondage.react-proptypes-intellisense",
"mgmcdermott.vscode-language-babel",
"wix.vscode-import-cost",
"pflannery.vscode-versionlens",
"editorconfig.editorconfig",
"prisma.prisma",
"graphql.vscode-graphql"
],
"unwantedRecommendations": []
}

56
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,56 @@
{
"version": "0.3.0",
"configurations": [
{
"command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
"name": "Run Dev Server",
"request": "launch",
"type": "node-terminal"
},
{
"name": "Attach API debugger",
"port": 18911, // you can change this port, see https://redwoodjs.com/docs/project-configuration-dev-test-build#debugger-configuration
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
"localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"sourceMaps": true,
"restart": true,
"preLaunchTask": "WaitForDevServer",
},
{
"name": "Launch Web debugger",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8910",
"webRoot": "${workspaceRoot}/web/src",
"preLaunchTask": "WaitForDevServer",
},
{
"command": "yarn redwood test api",
"name": "Test api",
"request": "launch",
"type": "node-terminal"
},
{
"command": "yarn redwood test web",
"name": "Test web",
"request": "launch",
"type": "node-terminal"
},
],
"compounds": [
{
"name": "Start Debug",
"configurations": [
"Run Dev Server",
"Attach API debugger",
"Launch Web debugger"
],
"stopAll": true
}
]
}

11
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,11 @@
{
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"[prisma]": {
"editor.formatOnSave": true
}
}

29
.vscode/tasks.json vendored Normal file
View file

@ -0,0 +1,29 @@
{
"version": "2.0.0",
"tasks": [
{
"label": "WaitForDevServer",
"group": "none",
"type": "shell",
"command": "bash",
"args": [
"-c",
"while ! echo -n > /dev/tcp/localhost/18911; do sleep 1; done;"
],
"windows": {
"command": "powershell",
"args": [
"-NoProfile",
"-ExecutionPolicy", "Bypass",
"while (-not (Test-NetConnection -ComputerName localhost -Port 18911)) { Start-Sleep -Seconds 1 };"
]
},
"presentation": {
"reveal": "silent",
"revealProblems": "onProblem",
"panel": "shared",
"close": true
}
},
]
}

15
.yarnrc.yml Normal file
View file

@ -0,0 +1,15 @@
# Yarn's manifest file. You can configure yarn here.
# See https://yarnpkg.com/configuration/yarnrc.
# For `node_modules` (see `nodeLinker` below), this is almost always the preferred option.
compressionLevel: 0
enableGlobalCache: true
# Lets yarn use hardlinks inside `node_modules` to dedupe packages.
# For a more pnpm-like experience, consider `hardlinks-global` where hardlinks point to a global store.
nmMode: hardlinks-local
# How to install Node packages.
# Heads up: right now, Redwood expects this to be `node-modules`.
nodeLinker: node-modules

122
README.md Normal file
View file

@ -0,0 +1,122 @@
# README
Welcome to [RedwoodJS](https://redwoodjs.com)!
> **Prerequisites**
>
> - Redwood requires [Node.js](https://nodejs.org/en/) (=20.x) and [Yarn](https://yarnpkg.com/)
> - Are you on Windows? For best results, follow our [Windows development setup](https://redwoodjs.com/docs/how-to/windows-development-setup) guide
Start by installing dependencies:
```
yarn install
```
Then start the development server:
```
yarn redwood dev
```
Your browser should automatically open to [http://localhost:8910](http://localhost:8910) where you'll see the Welcome Page, which links out to many great resources.
> **The Redwood CLI**
>
> Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal:
>
> ```
> yarn redwood --help
> ```
>
> For all the details, see the [CLI reference](https://redwoodjs.com/docs/cli-commands).
## Prisma and the database
Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the [`schema.prisma`](api/db/schema.prisma) file in `api/db` and replace the `UserExample` model with the following `Post` model:
```prisma
model Post {
id Int @id @default(autoincrement())
title String
body String
createdAt DateTime @default(now())
}
```
Redwood uses [Prisma](https://www.prisma.io/), a next-gen Node.js and TypeScript ORM, to talk to the database. Prisma's schema offers a declarative way of defining your app's data models. And Prisma [Migrate](https://www.prisma.io/migrate) uses that schema to make database migrations hassle-free:
```
yarn rw prisma migrate dev
# ...
? Enter a name for the new migration: create posts
```
> `rw` is short for `redwood`
You'll be prompted for the name of your migration. `create posts` will do.
Now let's generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our `Post` model:
```
yarn redwood generate scaffold post
```
Navigate to [http://localhost:8910/posts/new](http://localhost:8910/posts/new), fill in the title and body, and click "Save".
Did we just create a post in the database? Yup! With `yarn rw generate scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
## Frontend first with Storybook
Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:
```
yarn rw storybook
```
Seeing "Couldn't find any stories"? That's because you need a `*.stories.{tsx,jsx}` file. The Redwood CLI makes getting one easy enough—try generating a [Cell](https://redwoodjs.com/docs/cells), Redwood's data-fetching abstraction:
```
yarn rw generate cell examplePosts
```
The Storybook server should hot reload and now you'll have four stories to work with. They'll probably look a little bland since there's no styling. See if the Redwood CLI's `setup ui` command has your favorite styling library:
```
yarn rw setup ui --help
```
## Testing with Jest
It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and services:
```
yarn rw test
```
To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing#scenarios) and [GraphQL mocking](https://redwoodjs.com/docs/testing#mocking-graphql-calls).
## Ship it
Redwood is designed for both serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:
```
yarn rw setup deploy --help
```
Don't go live without auth! Lock down your app with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third-party auth providers:
```
yarn rw setup auth --help
```
## Next Steps
The best way to learn Redwood is by going through the comprehensive [tutorial](https://redwoodjs.com/docs/tutorial/foreword) and joining the community (via the [Discourse forum](https://community.redwoodjs.com) or the [Discord server](https://discord.gg/redwoodjs)).
## Quick Links
- Stay updated: read [Forum announcements](https://community.redwoodjs.com/c/announcements/5), follow us on [Twitter](https://twitter.com/redwoodjs), and subscribe to the [newsletter](https://redwoodjs.com/newsletter)
- [Learn how to contribute](https://redwoodjs.com/docs/contributing)

24
api/db/schema.prisma Normal file
View file

@ -0,0 +1,24 @@
// Don't forget to tell Prisma about your edits to this file using
// `yarn rw prisma migrate dev` or `yarn rw prisma db push`.
// `migrate` is like committing while `push` is for prototyping.
// Read more about both here:
// https://www.prisma.io/docs/orm/prisma-migrate
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
binaryTargets = "native"
}
// Define your own datamodels here and run `yarn redwood prisma migrate dev`
// to create migrations for them and apply to your dev DB.
// TODO: Please remove the following example:
model UserExample {
id Int @id @default(autoincrement())
email String @unique
name String?
}

8
api/jest.config.js Normal file
View file

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

9
api/package.json Normal file
View file

@ -0,0 +1,9 @@
{
"name": "api",
"version": "0.0.0",
"private": true,
"dependencies": {
"@redwoodjs/api": "8.4.1",
"@redwoodjs/graphql-server": "8.4.1"
}
}

View file

@ -0,0 +1,18 @@
import { mockRedwoodDirective, getDirectiveName } from '@redwoodjs/testing/api'
import requireAuth from './requireAuth'
describe('requireAuth directive', () => {
it('declares the directive sdl as schema, with the correct name', () => {
expect(requireAuth.schema).toBeTruthy()
expect(getDirectiveName(requireAuth.schema)).toBe('requireAuth')
})
it('requireAuth has stub implementation. Should not throw when current user', () => {
// If you want to set values in context, pass it through e.g.
// mockRedwoodDirective(requireAuth, { context: { currentUser: { id: 1, name: 'Lebron McGretzky' } }})
const mockExecution = mockRedwoodDirective(requireAuth, { context: {} })
expect(mockExecution).not.toThrowError()
})
})

View file

@ -0,0 +1,25 @@
import gql from 'graphql-tag'
import type { ValidatorDirectiveFunc } from '@redwoodjs/graphql-server'
import { createValidatorDirective } from '@redwoodjs/graphql-server'
import { requireAuth as applicationRequireAuth } from 'src/lib/auth'
export const schema = gql`
"""
Use to check whether or not a user is authenticated and is associated
with an optional set of roles.
"""
directive @requireAuth(roles: [String]) on FIELD_DEFINITION
`
type RequireAuthValidate = ValidatorDirectiveFunc<{ roles?: string[] }>
const validate: RequireAuthValidate = ({ directiveArgs }) => {
const { roles } = directiveArgs
applicationRequireAuth({ roles })
}
const requireAuth = createValidatorDirective(schema, validate)
export default requireAuth

View file

@ -0,0 +1,10 @@
import { getDirectiveName } from '@redwoodjs/testing/api'
import skipAuth from './skipAuth'
describe('skipAuth directive', () => {
it('declares the directive sdl as schema, with the correct name', () => {
expect(skipAuth.schema).toBeTruthy()
expect(getDirectiveName(skipAuth.schema)).toBe('skipAuth')
})
})

View file

@ -0,0 +1,16 @@
import gql from 'graphql-tag'
import { createValidatorDirective } from '@redwoodjs/graphql-server'
export const schema = gql`
"""
Use to skip authentication checks and allow public access.
"""
directive @skipAuth on FIELD_DEFINITION
`
const skipAuth = createValidatorDirective(schema, () => {
return
})
export default skipAuth

View file

@ -0,0 +1,19 @@
import { createGraphQLHandler } from '@redwoodjs/graphql-server'
import directives from 'src/directives/**/*.{js,ts}'
import sdls from 'src/graphql/**/*.sdl.{js,ts}'
import services from 'src/services/**/*.{js,ts}'
import { db } from 'src/lib/db'
import { logger } from 'src/lib/logger'
export const handler = createGraphQLHandler({
loggerConfig: { logger, options: {} },
directives,
sdls,
services,
onException: () => {
// Disconnect from your database with an unhandled exception.
db.$disconnect()
},
})

0
api/src/graphql/.keep Normal file
View file

32
api/src/lib/auth.ts Normal file
View file

@ -0,0 +1,32 @@
/**
* Once you are ready to add authentication to your application
* you'll build out requireAuth() with real functionality. For
* now we just return `true` so that the calls in services
* have something to check against, simulating a logged
* in user that is allowed to access that service.
*
* See https://redwoodjs.com/docs/authentication for more info.
*/
export const isAuthenticated = () => {
return true
}
export const hasRole = ({ roles }) => {
return roles !== undefined
}
// This is used by the redwood directive
// in ./api/src/directives/requireAuth
// Roles are passed in by the requireAuth directive if you have auth setup
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const requireAuth = ({ roles }) => {
return isAuthenticated()
}
export const getCurrentUser = async () => {
throw new Error(
'Auth is not set up yet. See https://redwoodjs.com/docs/authentication ' +
'to get started'
)
}

26
api/src/lib/db.ts Normal file
View file

@ -0,0 +1,26 @@
// See https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/constructor
// for options.
import { PrismaClient } from '@prisma/client'
import { emitLogLevels, handlePrismaLogging } from '@redwoodjs/api/logger'
import { logger } from './logger'
const prismaClient = new PrismaClient({
log: emitLogLevels(['info', 'warn', 'error']),
})
handlePrismaLogging({
db: prismaClient,
logger,
logLevels: ['info', 'warn', 'error'],
})
/**
* Global Prisma client extensions should be added here, as $extend
* returns a new instance.
* export const db = prismaClient.$extend(...)
* Add any .$on hooks before using $extend
*/
export const db = prismaClient

17
api/src/lib/logger.ts Normal file
View file

@ -0,0 +1,17 @@
import { createLogger } from '@redwoodjs/api/logger'
/**
* Creates a logger with RedwoodLoggerOptions
*
* These extend and override default LoggerOptions,
* can define a destination like a file or other supported pino log transport stream,
* and sets whether or not to show the logger configuration settings (defaults to false)
*
* @param RedwoodLoggerOptions
*
* RedwoodLoggerOptions have
* @param {options} LoggerOptions - defines how to log, such as redaction and format
* @param {string | DestinationStream} destination - defines where to log, such as a transport stream or file
* @param {boolean} showConfig - whether to display logger configuration on initialization
*/
export const logger = createLogger({})

0
api/src/services/.keep Normal file
View file

26
api/tsconfig.json Normal file
View file

@ -0,0 +1,26 @@
{
"compilerOptions": {
"noEmit": true,
"allowJs": true,
"esModuleInterop": true,
"target": "ES2023",
"module": "Node16",
"moduleResolution": "Node16",
"skipLibCheck": false,
"rootDirs": ["./src", "../.redwood/types/mirror/api/src"],
"paths": {
"src/*": ["./src/*", "../.redwood/types/mirror/api/src/*"],
"types/*": ["./types/*", "../types/*"],
"@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/api"]
},
"typeRoots": ["../node_modules/@types", "./node_modules/@types"],
"types": ["jest"],
"jsx": "react-jsx"
},
"include": [
"src",
"../.redwood/types/includes/all-*",
"../.redwood/types/includes/api-*",
"../types"
]
}

11
graphql.config.js Normal file
View file

@ -0,0 +1,11 @@
// This file is used by the VSCode GraphQL extension
const { getPaths } = require('@redwoodjs/project-config')
/** @type {import('graphql-config').IGraphQLConfig} */
const config = {
schema: getPaths().generated.schema,
documents: './web/src/**/!(*.d).{ts,tsx,js,jsx}',
}
module.exports = config

8
jest.config.js Normal file
View file

@ -0,0 +1,8 @@
// This the Redwood root jest config
// Each side, e.g. ./web/ and ./api/ has specific config that references this root
// More info at https://redwoodjs.com/docs/project-configuration-dev-test-build
module.exports = {
rootDir: '.',
projects: ['<rootDir>/{*,!(node_modules)/**/}/jest.config.js'],
}

27
package.json Normal file
View file

@ -0,0 +1,27 @@
{
"private": true,
"workspaces": {
"packages": [
"api",
"web"
]
},
"devDependencies": {
"@redwoodjs/core": "8.4.1",
"@redwoodjs/project-config": "8.4.1"
},
"eslintConfig": {
"extends": "@redwoodjs/eslint-config",
"root": true
},
"engines": {
"node": "=20.x"
},
"prisma": {
"seed": "yarn rw exec seed"
},
"packageManager": "yarn@4.4.0",
"resolutions": {
"@storybook/react-dom-shim@npm:7.6.17": "https://verdaccio.tobbe.dev/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz"
}
}

18
prettier.config.js Normal file
View file

@ -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,
},
},
],
}

21
redwood.toml Normal file
View file

@ -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"]

0
scripts/.keep Normal file
View file

27
scripts/seed.ts Normal file
View file

@ -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@redwoodjs.com' },
// { name: 'Bob', email: 'bob@redwoodjs.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)
}
}

29
scripts/tsconfig.json Normal file
View file

@ -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"
]
}

8
web/jest.config.js Normal file
View file

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

25
web/package.json Normal file
View file

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

43
web/public/README.md Normal file
View file

@ -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)

BIN
web/public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

2
web/public/robots.txt Normal file
View file

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

22
web/src/App.tsx Normal file
View file

@ -0,0 +1,22 @@
import type { ReactNode } from 'react'
import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/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

20
web/src/Routes.tsx Normal file
View file

@ -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 '@redwoodjs/router'
const Routes = () => {
return (
<Router>
<Route notfound page={NotFoundPage} />
</Router>
)
}
export default Routes

0
web/src/components/.keep Normal file
View file

35
web/src/entry.client.tsx Normal file
View file

@ -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>
)
}

0
web/src/index.css Normal file
View file

15
web/src/index.html Normal file
View file

@ -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>

0
web/src/layouts/.keep Normal file
View file

View file

@ -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 '@redwoodjs/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>
))

View file

@ -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>
)

43
web/tsconfig.json Normal file
View file

@ -0,0 +1,43 @@
{
"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/*"],
"@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
},
"typeRoots": [
"../node_modules/@types",
"./node_modules/@types",
"../node_modules/@testing-library"
],
"types": ["jest", "jest-dom"],
"jsx": "preserve"
},
"include": [
"src",
"config",
"../.redwood/types/includes/all-*",
"../.redwood/types/includes/web-*",
"../types",
"./types"
]
}

16
web/vite.config.ts Normal file
View file

@ -0,0 +1,16 @@
import dns from 'dns'
import type { UserConfig } from 'vite'
import { defineConfig } from 'vite'
import redwood from '@redwoodjs/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)

17590
yarn.lock Normal file

File diff suppressed because it is too large Load diff