Jugendtreffen login

Setup

Prerequisites

• Redwood requires Node.js (=20.x) and Yarn
• Are you on Windows? For best results, follow our 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 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.

Prisma and the database

The Db data model is saved in the schema.prisma file in api/db see Prisma Data Modelling and Prisma with Supabase for further expalination of how all of this works. I wont explain it here.

Redwood uses Prisma, 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 uses that schema to make database migrations hassle-free:

yarn rw prisma migrate dev

# ...

? Enter a name for the new migration: › <YOUR_MIGRATION_NAME>

rw is short for redwood

Custom SQL

I couldn't figure out how to effectively connect the users with their personal Data so I just manually insert this foreign Key, please don't forget to run this before and after creating a new migration! (Otherwise you will get an error)

Remove the fkey causing the trouble:

yarn rw  prisma db execute --file=./api/db/pre_migration.sql

Then execute your migration or push your schema to the db:

yarn rw prisma migrate dev

yarn rw prisma push db

After that add the fkey to the db with:

yarn rw  prisma db execute --file=./api/db/add_personalDatas_users_fkey.sql

Tipp: You can also add the snippet, that creates the fkey, to your migration.sql file

The above methods can be used if you have relations to other schemas in supabase and don't want to touch them.

API

The Api fetches data via GraphQL. There is a Playground where you can run your gql queries, but note that there is authentication needed for most of them.

To Authenticaate use the Headers:

{ "auth-provider": "supabase", "Authorization": "Bearer <token>" }

You can get the token either by copying one of a running session or by the getToken() from the supabase hook. (For example log it into the console)

UI & 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, 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

UI Templates:

Most of the Blocks are borrowed from Flowbite check them out bevore designing something on your own only to find out it already exists, but better.

Also consider taking a look into the Tailwind docs as I used Tailwind extensively.

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 and GraphQL mocking.

Deployment & Furhter Infos

U can use serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:

yarn rw setup deploy --help

This will help setting up the deployment.

How to handle data fetching, Cells, Scaffolds and other Concepts of RedwoodJS please read up in the documentation of Redwood, I wont explain it here.

The best way to learn Redwood is by going through the comprehensive tutorial and joining the community (via the Discourse forum or the Discord server).