redwoodjs/redwood-tutorial

The end state after completing the RedwoodJS introduction tutorial

Redwood Tutorial App

This repo represents the final state of the app created during the Redwood Tutorial. It is meant to be a starting point for those working on the second half of the Tutorial, starting at the Intermission.

This repo contains much more styling than the one we built together in the tutorial, but is functionally identical.

Setup

The tutorial itself contains instructions for getting this repo up and running, but here is a summary of the commands:

git clone https://github.com/redwoodjs/redwood-tutorial
cd redwood-tutorial
yarn install
yarn rw prisma migrate dev
yarn rw prisma db seed
yarn rw dev

redwood-tutorial's Issues

Update src/lib/auth.js to current release candidate template

The template has changed to do a couple more checks, we need to update to the latest here: https://github.com/redwoodjs/redwood/blob/main/packages/cli/src/commands/setup/auth/templates/dbAuth.auth.ts.template

Recommended VSCode extensions

Question: should we have a section in https://redwoodjs.com/docs/how-to/index explaining the recommended extension list with comments what if xxx then do yyy

Examples:

1. If you use MacOS for development then there is no reason to install Microsoft Edge Tools for VS Code extension.
2. Why is ESLint recommended and not required (what would be the consequences of each choice)

There could be some other issues to cover in this context

Command `yarn rw prisma db seed` redundant

Added on Jan 22, 2023

Seeing that this is still an open issue (most likely because it is trivial and I did not close it already), I wanted to verify this problem report using today's version of RW (see the list of files below), I believe that my original report was correct and that the sequence of commands defined in Setup"

Please verify and close either way (eventually remove the line yarn rw prisma db seed from Setup instructions

My final report

The following instructions

git clone https://github.com/redwoodjs/redwood-tutorial
cd redwood-tutorial
yarn install
yarn rw prisma migrate dev
yarn rw prisma db seed
yarn rw dev

have a redundant command yarn rw prisma db seed, because the execution of yarn rw prisma migrate dev "internally" invokes the seed command yarn rw exec seed;

---

Definition of my context

nik$ yarn info
├─ @redwoodjs/core@npm:3.2.0
│  ├─ Version: 3.2.0
│  │
│  ├─ Exported Binaries
│  │  ├─ cross-env
│  │  ├─ eslint
│  │  ├─ jest
│  │  ├─ nodemon
│  │  ├─ redwood
│  │  ├─ rimraf
│  │  ├─ rw
│  │  ├─ rw-api-server-watch
│  │  ├─ rw-gen
│  │  ├─ rw-gen-watch
│  │  ├─ rw-log-formatter
│  │  └─ rwfw
│  │
│  └─ Dependencies
│     ├─ @babel/core@npm:7.19.3 → npm:7.19.3
│     ├─ @babel/runtime-corejs3@npm:7.19.1 → npm:7.19.1
│     ├─ @redwoodjs/cli@npm:3.2.0 → npm:3.2.0
│     ├─ @redwoodjs/eslint-config@npm:3.2.0 → npm:3.2.0
│     ├─ @redwoodjs/internal@npm:3.2.0 → npm:3.2.0
│     ├─ @redwoodjs/testing@npm:3.2.0 → npm:3.2.0
│     ├─ babel-plugin-auto-import@npm:1.1.0 → npm:1.1.0
│     ├─ babel-plugin-module-resolver@npm:4.1.0 → npm:4.1.0
│     ├─ babel-timing@npm:0.9.1 → npm:0.9.1
│     ├─ core-js@npm:3.25.5 → npm:3.25.5
│     ├─ esbuild@npm:0.15.10 → npm:0.15.10
│     ├─ fast-glob@npm:3.2.12 → npm:3.2.12
│     ├─ graphql@npm:16.6.0 → npm:16.6.0
│     ├─ lodash.escaperegexp@npm:4.1.2 → npm:4.1.2
│     ├─ nodemon@npm:2.0.20 → npm:2.0.20
│     ├─ react-refresh@npm:0.14.0 → npm:0.14.0
│     ├─ rimraf@npm:3.0.2 → npm:3.0.2
│     ├─ svg-react-loader@npm:0.4.6 → npm:0.4.6
│     ├─ typescript@patch:[email protected]#~builtin<compat/typescript> → patch:typescript@npm%3A4.7.4#~builtin<compat/typescript>::version=4.7.4&hash=7ad353
│     ├─ webpack-bundle-analyzer@npm:4.5.0 → npm:4.5.0
│     ├─ webpack-merge@npm:5.8.0 → npm:5.8.0
│     ├─ @babel/cli@npm:7.19.3 → npm:7.19.3 [6562c]
│     ├─ @babel/eslint-plugin@npm:7.19.1 → npm:7.19.1 [6562c]
│     ├─ @babel/node@npm:7.19.1 → npm:7.19.1 [6562c]
│     ├─ @babel/plugin-proposal-class-properties@npm:^7.0.0 → npm:7.18.6 [a1e68]
│     ├─ @babel/plugin-proposal-decorators@npm:^7.12.12 → npm:7.19.3 [e4585]
│     ├─ @babel/plugin-proposal-private-methods@npm:^7.12.1 → npm:7.18.6 [e4585]
│     ├─ @babel/plugin-proposal-private-property-in-object@npm:^7.12.1 → npm:7.18.6 [e4585]
│     ├─ @babel/plugin-transform-runtime@npm:7.19.1 → npm:7.19.1 [6562c]
│     ├─ @babel/preset-env@npm:^7.12.11 → npm:7.19.3 [e4585]
│     ├─ @babel/preset-react@npm:^7.12.10 → npm:7.18.6 [e4585]
│     ├─ @babel/preset-typescript@npm:^7.12.7 → npm:7.18.6 [e4585]
│     ├─ @pmmmwh/react-refresh-webpack-plugin@npm:0.5.7 → npm:0.5.7 [6562c]
│     ├─ babel-loader@npm:8.2.5 → npm:8.2.5 [6562c]
│     ├─ babel-plugin-graphql-tag@npm:3.3.0 → npm:3.3.0 [6562c]
│     ├─ babel-plugin-inline-react-svg@npm:2.0.1 → npm:2.0.1 [6562c]
│     ├─ copy-webpack-plugin@npm:11.0.0 → npm:11.0.0 [6562c]
│     ├─ css-loader@npm:6.7.1 → npm:6.7.1 [6562c]
│     ├─ css-minimizer-webpack-plugin@npm:4.0.0 → npm:4.0.0 [6562c]
│     ├─ dotenv-webpack@npm:8.0.1 → npm:8.0.1 [6562c]
│     ├─ file-loader@npm:6.2.0 → npm:6.2.0 [6562c]
│     ├─ graphql-tag@npm:2.12.6 → npm:2.12.6 [73e5c]
│     ├─ html-webpack-plugin@npm:5.5.0 → npm:5.5.0 [6562c]
│     ├─ mini-css-extract-plugin@npm:2.6.1 → npm:2.6.1 [6562c]
│     ├─ null-loader@npm:4.0.1 → npm:4.0.1 [6562c]
│     ├─ style-loader@npm:3.3.1 → npm:3.3.1 [6562c]
│     ├─ url-loader@npm:4.1.1 → npm:4.1.1 [6562c]
│     ├─ webpack-cli@npm:4.10.0 → npm:4.10.0 [6562c]
│     ├─ webpack-dev-server@npm:4.11.0 → npm:4.11.0 [6562c]
│     ├─ webpack-manifest-plugin@npm:5.0.0 → npm:5.0.0 [6562c]
│     ├─ webpack-retry-chunk-load-plugin@npm:3.1.1 → npm:3.1.1 [6562c]
│     └─ webpack@npm:5.74.0 → npm:5.74.0 [6562c]
│
└─ root-workspace-0b6124@workspace:.
   ├─ Version: 0.0.0
   │
   └─ Dependencies
      └─ @redwoodjs/core@npm:3.2.0 → npm:3.2.0

---

Added later

Please ignore this issue (delete it) - I proved to myself that both instructions

yarn rw prisma migrate dev
yarn rw prisma db seed

are needed.

---

---

Summary

The command yarn rw prisma migrate dev implicitly includes the action caused by the following command (yarn rw prisma db seed).

---

The tutorial section using-the-example-repo explains the need to run the following list of six commands;

git clone https://github.com/redwoodjs/redwood-tutorial
cd redwood-tutorial
yarn install
yarn rw prisma migrate dev
yarn rw prisma db seed
yarn rw g secret

needed to make the clone of the Redwood Blog application complete (up to the functionality of the first four chapters of the RedwoodJS Tutorial Application.

The claim written as a title of this issue (Command yarn rw prisma db seed redundant) is easily verified by inspecting the log of the yarn rw prisma migrate dev command (see below)

nik$ yarn rw prisma migrate dev

Running Prisma CLI...
$ yarn prisma migrate dev --schema /Users/nik/dev/work/redwood/rw-community/redwood-tutorial-postgresql/api/db/schema.prisma

Prisma schema loaded from api/db/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:./dev.db"

SQLite database dev.db created at file:./dev.db

Applying migration `20210222013102_init_database`
Applying migration `20220208231150_create_user`

The following migration(s) have been applied:

migrations/
  └─ 20210222013102_init_database/
    └─ migration.sql
  └─ 20220208231150_create_user/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (3.14.0 | library) to ./node_modules/@prisma/client in
 116ms

Running seed command `yarn rw exec seed` ...
[09:17:39] Generating Prisma client [started]
[09:17:39] Generating Prisma client [completed]
[09:17:39] Running script [started]
  Seeded "Welcome to the blog!"
  Seeded "A little more about me"
  Seeded "What is the meaning of life?"

  Seeded admin user:

    Email: [email protected]
    Password: admin

  (Please don't use this login in a production environment)

[09:17:39] Running script [completed]

🌱  The seed command has been executed.

use shorter method definition syntax?

How about using the ES2015 method definition syntax? If it was a class component, the => would be needed, but since it isn't and there's no use of this, it is slightly shorter.

A very minor suggestion, but since this code is going to be copied and pasted a lot, it might be nice if it is actually an improvement.

  const [updatePost, { loading, error }] = useMutation(UPDATE_POST_MUTATION, {
    onCompleted() {
      navigate(routes.posts())
      addMessage('Post updated.', { classes: 'rw-flash-success' })
    },
  })

instead of:

const [updatePost, { loading, error }] = useMutation(UPDATE_POST_MUTATION, {
    onCompleted: () => {
      navigate(routes.posts())
      addMessage('Post updated.', { classes: 'rw-flash-success' })
    },
  })

on https://github.com/redwoodjs/redwood-tutorial/blob/main/web/src/components/EditPostCell/EditPostCell.js

Redwood Tutorial has a dependency on Netlify "too early"

I am using the code in the Redwood Tutorial as the basis for my series of articles on using various Redwood Application databases and (later) various authentication techniques.

The issue I am mentioning here is that building and running the source code defined above results in the following errors

:8910/.netlify/functions/auth?method=getToken:1 
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Granted that there are very many bigger fish to fry, I am reporting this only as a courtesy

Prisma Studio in Tutorial Chapter 2 are planning to stop support

https://www.prisma.io/studio which will get updated later to remove the download links to the Electron app and switch to the CLI usage.

MSW isn't enabled for Storybook

Steps to Reproduce

1 - git clone https://github.com/redwoodjs/redwood-tutorial.git
2 - cd redwood-tutorial
3 - yarn install
4 - yarn rw sb

Open your browser's developer tools -> console, notice the lack of a "[MSW] Mocking enabled." message.

Explanation

It seems the MSW isn't getting started when Storybook is, so queries and mutations aren't mocked.

What I'm expecting (taken from another Redwood app):

What I'm seeing:

All cells will stay in the loading state, with no other error.

You can see another example of this here, in @Kritsatorn's fork - he's also the original one who encountered this.

---

I've seen/heard the tutorial (app) is getting rewritten for v1, not sure how that fits in with this issue (or if it's true).

Typescript support

Quick discussion:
I followed the first half of the redwood tutorial purely using typescript.
Now in the intermission it is heavily suggested to use this repo instead.

I was quite surprised to see that no typescript version of this repo exists - I think it'd be neat to have in the future!

I am also volunteering to implement it - I'm just wondering where to put it :x

Options:
A) different branch
B) different repo
C) same branch, relevant files exist in .js/x and .ts/x

Update codebase for v3

• Update to 3.0.0
• Run codemods
• Check if any code snippets in the actual tutorial need to be updated

Sample tutorial should be updated to newest version to avoid Comment test error

As documented in this issue in the learn.redwood.js repository, the current RedwoodJS version that this tutorial uses includes a bug that results in the following error when running the default 'returns all comments' test (or 'return a list of all comments' test, depending on the version you're reading) in comments.test.js.

Invalid `prisma.executeRaw()` invocation:

      Raw query failed. Code: `23503`. Message: `update or delete on table "Post" violates foreign key constraint "Comment_postId_fkey" on table "Comment"

However, the latest version of RedwoodJS (as of this post it was 0.41.0) includes a fix (see this PR) which resolves this error. Simply upgrading the version of RedwoodJS in the example repo provided to the reader (this repo) will resolve this error for all future readers.

Tutorial needs to be upgraded to user v 0.20.0 to show new use Apollo Client v3 Cache Behavior for GraphQL Mutations

Currently on 19.5 canary but needs rework to show:

Apollo Client v3 Cache Behavior for GraphQL Mutations

Prior to this version, Redwood Cells used Apollo’s cache and network fetch policy. This has been removed in favor of the default policy (see #1250 6). This change, along with the new Apollo v3 behavior, changes the behavior of mutations — state changes will often not render without a page reload.

Unless Tutorial 2.0 will be replacing this.

Test fails

When i run yarn rw test it fails and i can't create storybooks, it give this error:

api/src/services/posts/posts.test.js (43.42 s)
● posts › returns a list of posts

: Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 

5000 ms timeout specified by jest.setTimeout.Error:

  2 | 
  3 | describe('posts', () => {
> 4 |   scenario('returns a list of posts', async (scenario) => {
    |   ^
  5 |     const list = await posts()
  6 | 
  7 |     expect(list.length).toEqual(Object.keys(scenario.post).length)

  at new Spec (../node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
  at scenario (../node_modules/@redwoodjs/core/dist/configs/node/jest.setup.js:106:17)
  at Suite.<anonymous> (src/services/posts/posts.test.js:4:3)
  at Object.<anonymous> (src/services/posts/posts.test.js:3:1)

● posts › returns a single post by ID

expect(received).toEqual(expected) // deep equality

Expected: 1
Received: 2

   5 |     const list = await posts()
   6 | 
>  7 |     expect(list.length).toEqual(Object.keys(scenario.post).length)
     |                         ^
   8 |     expect(list[0].title).toEqual(scenario.post.first.title)
   9 |   })
  10 | 

  at src/services/posts/posts.test.js:7:25
  at Object.<anonymous> (../node_modules/@redwoodjs/core/dist/configs/node/jest.setup.js:133:16)

.env file with session_token required

It's trivial but after running the installation steps in the readme e.g:

git clone https://github.com/redwoodjs/redwood-tutorial
cd redwood-tutorial
yarn install
yarn rw prisma migrate dev
yarn rw dev

I was not able to sign up or login - it failed with 500s

The console I ran yarn rw dev with does show an appropriate message

api | 13:57:13 🚨 NoSessionSecretError dbAuth requires a SESSION_SECRET environment variable that is used to encrypt session cookies. Use `yarn rw g secret` to create one, then add to your `.env` file. DO NOT check this variable in your version control system!! 

I would suggest one of the following options:
A) mention in the README that the .env file with a user created session_secret is required to run it out of the box
B) properly show an error toast when the signup or login button have 500s

Bad reference to the app created in the course of running the tutorial

The section SETUP refers to the source code of the application being created as `

git clone https://github.com/redwoodjs/redwood-tutorial

the correct reference is rather

ttps://github.com/redwoodjs/redwood/tree/main/docs/docs/tutorial

Note that this error invalidates the complete content of the section SETUP.

BlogLayout "loggedIn" story doesn't render user

Overview

I was working with BlogLayout and noticed that the Logged In story does not match what the dev server would render. It should be showing Logout + the user's email address.

Both stories show "Login" for the link, even with the mockUser.

Current State

Logged In Story
Expected: Should see "Logout" with the user's email address
Actual: Nav bar shows "Login"

Logged Out
Shows "Login" as expected

Seemingly irrelevant sentence in the Introducing Form Helpers section

This section

Bad link in the README.md

Paragraph after https://github.com/redwoodjs/redwood-tutorial#setup

This link is https://redwoodjs.com/tutorial2/prerequisites
Should be. https://redwoodjs.com/tutorial/prerequisites

Not having a "proved RW contributor" title, I believe that reporting the problem this way might be easier to process than via a PR.

Command `yarn rw g secret` missing in setup section

The instructions in using-the-example-repo-recommended are correct, so the setup section needs to be corrected

The name of this repo should be Redwood Blog

The name Redwood Tutorial is already reserved for https://github.com/redwoodjs/redwood/tree/main/docs/docs/tutorial

Note that I am using the Redwood Blog name in the https://rw-community.org/ site which is a lot more sensitive to such conflict.

Imprecise statement in the README.md

This repo represents the final state of the app created during the Redwood Tutorial.

It should be "This repo represents the final state of the app created during the first half of Redwood Tutorial".

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @tailwindcss/forms to v0.5.7
• Update dependency @tailwindcss/typography to v0.5.13
• Update dependency autoprefixer to v10.4.19
• Update dependency postcss to v8.4.38
• Update dependency postcss-loader to v7.3.4
• Update dependency tailwindcss to v3.4.3
• Update redwood monorepo to v6.6.4 (@redwoodjs/api, @redwoodjs/auth-dbauth-api, @redwoodjs/auth-dbauth-setup, @redwoodjs/auth-dbauth-web, @redwoodjs/core, @redwoodjs/forms, @redwoodjs/graphql-server, @redwoodjs/router, @redwoodjs/vite, @redwoodjs/web)
• Update dependency postcss-loader to v8
• Update redwood monorepo to v7 (major) (@redwoodjs/api, @redwoodjs/auth-dbauth-api, @redwoodjs/auth-dbauth-setup, @redwoodjs/auth-dbauth-web, @redwoodjs/core, @redwoodjs/forms, @redwoodjs/graphql-server, @redwoodjs/router, @redwoodjs/vite, @redwoodjs/web)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

api/package.json

• @redwoodjs/api 6.3.1
• @redwoodjs/auth-dbauth-api 6.3.1
• @redwoodjs/graphql-server 6.3.1

package.json

• @redwoodjs/auth-dbauth-setup 6.3.1
• @redwoodjs/core 6.3.1

web/package.json

• @redwoodjs/auth-dbauth-web 6.3.1
• @redwoodjs/forms 6.3.1
• @redwoodjs/router 6.3.1
• @redwoodjs/web 6.3.1
• prop-types 15.8.1
• @redwoodjs/vite 6.3.1
• @tailwindcss/aspect-ratio 0.4.2
• @tailwindcss/forms 0.5.6
• @tailwindcss/line-clamp 0.4.4
• @tailwindcss/typography 0.5.10
• autoprefixer 10.4.16
• postcss 8.4.30
• postcss-loader 7.3.3
• tailwindcss 3.3.3

nvm

.nvmrc

---

• Check this box to trigger a request for Renovate to run again on this repository