How I Built a Product in 3 Days

Thanks to RedwoodJS

Redwhat?

Bringing fullstack

to the JAMstack

JAMstack?

🍯

🍯

JavaScript

APIs

Markup

Performance

Cost

DX

Scalability

Frontend

Backend

Database

React

Backend

Database

React

Serverless

Database

React

Serverless

SQL

Want more buzz?

🐝

GraphQL

Prisma

👨‍💻

CDN

Serves HTML, CSS, JS

Serverless

GraphQL API

Prisma

DB

😅

👩‍💻

DX > all

👩‍💻

Opinionated

👍

👎

👩‍💻

Monorepo

├── api
│   ├── prisma
│   └── src
│       ├── functions
│       ├── graphql
│       ├── lib
│       └── services
└── web
    ├── public
    └── src
        ├── Routes.js
        ├── components
        ├── index.css
        ├── index.html
        ├── index.js
        ├── layouts
        └── pages

👩‍💻

Generators

yarn redwood generate <type>

Save time by generating boilerplate code

Commands:
  rw g auth <provider>       Generate an auth configuration
  rw g component <name>      Generate a component
  rw g deploy <provider>     Generate a deployment configuration
  rw g layout <name>         Generate a layout component
  rw g page <name> [path]    Generate a page and route component
  rw g service <name>        Generate a service component
  ... and a lot more!

👩‍💻

Testing

👩‍💻

Cells

export const QUERY = gql`
  query {
    frameworks {
      id
      name
      isCool
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>No frameworks yet!</div>

export const Failure = ({ error }) => (
  <div>Error loading frameworks: {error.message}</div>
)

export const Success = ({ frameworks }) => {
  return frameworks.map((framework) => (
    <article key={framework.id}>
      <h2>{framework.name}</h2>
      <div>{framework.isCool}</div>
    </article>
  ))
}

👩‍💻

DB schema migrations

datasource DS {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider      = "prisma-client-js"
  binaryTargets = "native"
}

model Framework {
  id     Int     @id @default(autoincrement())
  name   String?
  isCool Boolean
}

👩‍💻

DB schema migrations

yarn redwood db save

Creating database migration... [started]

New datamodel:

model Framework {
  id     Int     @id @default(autoincrement())
  name   String?
  isCool Boolean
}

Prisma Migrate just created your migration

Creating database migration... [completed]
✨  Done in 3.68s.

👩‍💻

DB schema migrations

yarn redwood db up

Migrate database up... [started]

🏋️‍  migrate up

Datamodel that will initialize the db:

model Framework {
  id     Int     @id @default(autoincrement())
  name   String?
  isCool Boolean
}

Checking the datasource for potential data loss...

🚀    Done with 1 migration in 116ms.

👩‍💻

DB data migrations

yarn rw g dataMigration addDefaultCoolBoolean

✔ Generating data migration file...
  ✔ Writing `add-default-cool-boolean.js`...
✔ Next steps...

After writing your migration, you can run it with:

  yarn rw dataMigrate up

✨  Done in 2.01s.

👩‍💻

DB data migrations

export default async ({ db }) => {
  const frameworks = await db.framework.findMany()

  frameworks.forEach(async (framework) => {
    await db.framework.update({
      data: {
        ...framework,
        isCool: false,
      },
      where: { id: framework.id },
    })
  })
}

👩‍💻

Easy deploys

yarn redwood generate deploy netlify

✔ Installing packages...
✔ Updating apiProxyPath...
✔ Adding config...
  ✔ Writing `./netlify.toml`...
✔ One more thing...

You are ready to deploy to Netlify!
See: https://redwoodjs.com/docs/deploy#netlify

✨  Done in 2.72s.

Demo 🚀

🌞🌈

Anthony Morris

@amorriscode

https://anthonymorris.dev

https://bit.ly/2DTphKa

How I Built a Product in 3 Days

By Anthony Morris

How I Built a Product in 3 Days

  • 334