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