Giter Club home page Giter Club logo

redwood's Introduction

Redwood

by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than 250 amazing contributors (see end of file for a full list).

Bighorn Epoch (current development epoch)

NOTE: This section of the Readme is aspirational for the current development epoch we call Bighorn. Bighorn has not yet been released, but when it is, it will fulfill the promises of what you read below. If you’d like to help us on this journey, please say hi in the Community Forums!

Redwood is a framework for quickly creating React-based web applications that provide an amazing end user experience. Our goal is to be simple and approachable enough for use in prototypes and hackathons, but performant and comprehensive enough to evolve into your next startup.

We accomplish this in two primary ways:

  1. Redwood is opinionated and full-stack. We’ve chosen the best technologies in the JS/TS ecosystem and beautifully integrated them into a cohesive framework that lets you get things done instead of endlessly evaluating technology options. You can get started using Redwood without a backend, but the framework really shines when you’re building a data driven application. Our transparent data fetching and optional GraphQL API make building and growing your application easier than you expect!

  2. Redwood’s declarative data fetching and simple form submission features are built on top of RSC + Server Actions and simplify common use cases so you can focus on your users’ experience. Creating the best, most responsive user interfaces requires reasoning about whether code should execute on the server or the client. Redwood makes it easy to choose the best execution context for your code by leveraging the power of React Server Components.

The entire framework is built with TypeScript, so you get type safety from the router to the database and everywhere in-between. If you’d rather build your app with JavaScript, you can do that too, and still enjoy great code completion features in your favorite editor.

TRY BIGHORN: While Bighorn does not yet have a production release, we do publish the latest code as canaries, and we welcome you to experiment with them! The best way to get familiar with these canaries is to keep an eye on the Redwood Blog.

Arapahoe Epoch (current stable release)

Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup.

At the highest level, a Redwood app is a React frontend that talks to a custom GraphQL API. The API uses Prisma to operate on a database. Out of the box you get tightly integrated testing with Jest, logging with Pino, and a UI component catalog with Storybook. Setting up authentication (like Auth0) or CSS frameworks (like Tailwind CSS) are a single command line invocation away. And to top it off, Redwood's architecture allows you to deploy to either serverless providers (e.g. Netlify, Vercel) or traditional server and container providers (e.g. AWS, Render) with nearly no code changes between the two!

By making a lot of decisions for you, Redwood lets you get to work on what makes your application special, instead of wasting cycles choosing and re-choosing various technologies and configurations. Plus, because Redwood is a proper framework, you benefit from continued performance and feature upgrades over time and with minimum effort.

TUTORIAL: The best way to get to know Redwood is by going through the extensive Redwood Tutorial. Have fun!

QUICK START: You can install and run a full-stack Redwood application on your machine with only a couple commands. Check out the Quick Start guide to get started.

DOCS: Visit the full RedwoodJS Documentation for extensive reference docs and guides.

About

Redwood is the latest open source project initiated by Tom Preston-Werner, cofounder of GitHub (most popular code host on the planet), creator of Jekyll (one of the first and most popular static site generators), creator of Gravatar (the most popular avatar service on the planet), author of the Semantic Versioning specification (powers the Node packaging ecosystem), and inventor of TOML (an obvious, minimal configuration language used by many projects).

Technologies

We are obsessed with developer experience and eliminating as much boilerplate as possible. Where existing libraries elegantly solve our problems, we use them; where they don't, we write our own solutions. The end result is a JavaScript development experience you can fall in love with!

Here's a quick taste of the technologies a standard Redwood application will use:

If you'd like to use our optional built-in GraphQL API support, here's our stack:

Roadmap

A framework like Redwood has a lot of moving parts; the Roadmap is a great way to get a high-level overview of where the framework is relative to where we want it to be. And since we link to all of our GitHub project boards, it's also a great way to get involved! Roadmap

Why is it called Redwood?

(A history, by Tom Preston-Werner)

Where I live in Northern California there is a type of tree called a redwood. Redwoods are HUGE, the tallest in the world, some topping out at 115 meters (380 feet) in height. The eldest of the still-living redwoods sprouted from the ground an astonishing 3,200 years ago. To stand among them is transcendent. Sometimes, when I need to think or be creative, I will journey to my favorite grove of redwoods and walk among these giants, soaking myself in their silent grandeur.

In addition, Redwoods have a few properties that I thought would be aspirational for my nascent web app framework. Namely:

  • Redwoods are beautiful as saplings, and grow to be majestic. What if you could feel that way about your web app?

  • Redwood pinecones are dense and surprisingly small. Can we allow you to get more done with less code?

  • Redwood trees are resistant to fire. Surprisingly robust to disaster scenarios, just like a great web framework should be!

  • Redwoods appear complex from afar, but simple up close. Their branching structure provides order and allows for emergent complexity within a simple framework. Can a web framework do the same?

And there you have it.

Contributors

A gigantic "Thank YOU!" to everyone below who has contributed to one or more Redwood projects: Framework, Website, Docs, and Create-Redwood Template. 🚀

Core Team: Leadership


Amy Haywood Dutton

David Price

Tobbe Lundberg

Tom Preston-Werner

Core Team: Maintainer and Community Leads


Dominic Saadi

maintainer

David Thyresson

maintainer

Daniel Choudhury

maintainer

Kris Coulson

maintainer

Keith T Elliot

community

Barrett Burnworth

community

Josh Walker

maintainer

Founders


Tom Preston-Werner

Peter Pistorius

Rob Cameron

David Price

Core Team: Alumni


Aldo Bucchi


Aditya Pandey


Amanda Giannelli


Alice Zhao


Simon Gagnon


Chris van der Merwe


Ryan Lockard


Peter Colapietro

noire.munich

Forrest Hayes


Robert


Anthony Campolo


Claire Froelich


Kim-Adeline Miguel

All Contributors


Anton Moiseev

Mohsen Azimi

Christopher Burns

Terris Kremer

James George

Brett Jackson

Guilherme Pacheco

Kasper Mikiewicz

chris-hailstorm

Jai

Lachlan Campbell

Satya Rohith

Steven Normore

Mads Rosenberg

Ted Stoychev

eurobob

Vikash

Adrian Mato

Anirudh Nimmagadda

Ben McCann

Chris Ball

Suvash Thapaliya

Thieffen Delabaere

swyx

Max Leon

Maxim Geerinck

Niket Patel

0xflotus

Anthony Powell

Aryan J

Brian Ketelsen

Dominic Chapman

Evan Moncuso

Georgy Petukhov

Gianni Moschini

Giel

Jani Monoses

Johan Eliasson

Leonardo Elias

Logan Houp

Loren ☺️

Mark Pollmann

Matthew Leffler

Michele Gerarduzzi

Nick Gill

Nicholas Joy Christ

Olivier Lance

Phuoc Do

Rocky Meza

Sharan Kumar S

Simeon Griggs

Taylor Milliman

Zach Hammer

Przemyslaw T

Hemil Desai

Alessio Montel

Anthony Morris

Beto

Turadg Aleahmad

Paul Karayan

Nikolas

guledali

Yong Joseph Bakos

Gerd Jungbluth

James Highsmith

Troy Rosenberg

Amr Fahim

dfundingsland

Eduardo Reveles

Jeffrey Horn

matthewhembree

Robert Bolender

Shivam Chahar

Aaron Sumner

Alvin Crespo

Chris Ellis

Colin Ross

Dennis Dang

Derrick Pelletier

Jeroen van Baarsen

Matan Kushner

Matthew Rathbone

Michal Weisman

Miguel Oller

Mudassar Ali

Nate Finch

Paweł Kowalski

Punit Makwana

Scott Chacon

scott

Scott Walkinshaw

Stephan van Diepen

bpenno

Tim Trautman

Zachary McKenna

Ryan Hayes

Evan Weaver

cr1at0rs

qooqu

Android Dev Notes

Jeremy Kratz

Monica Powell

Ganesh Rane

Ryan Doyle

Matt Reetz

Punit Makwana

shzmr

esteban-url

Kurt Hutten

António Meireles

Brent Guffens

Santhosh Laguduwa

Marco Bucchi

Johnny Choudhury-Lucas

Steven Almeroth

lumenCodes

_robobunny

Kevin Poston

Davy Hausser

Mohinder Saluja

Lamanda

ryancwalsh

Nick Geerts

miku86

Krisztiaan

Jonathan Derrough

Asdethprime

Brian Solon

Chris Chapman

Joël Galeran

Mariah

Tyler Scott Williams

Vania Kucher

Viren Bhagat

William

dcgoodwin2112

Bennett Rogers

Daniel O'Neill

David Yu

Adithya Sunil

Edward Jiang

Manuel Kallenbach

Nick Schmitt

Jon Meyers

Matthew Bush

Patrick Gallagher

Himank Pathak

Morgan Spencer

Pedro Piñera Buendía

Matt Sutkowski

Justin Etheredge

Zain Fathoni

Shrill Shrestha

Brent Anderson

Vinaya Sathyanarayana

Will Minshew

Tawfik Yasser

Sébastien Lorber

Charlie Ray

Kim, Jang-hwan

TagawaHirotaka

Andrew Lam

Brandon DuRette

Curtis Reimer

Kevin Brown

Nikolaj Ivancic

Nuno Pato

Renan Andrade

Sai Deepesh

bl-ue

Sven Hanssen

Mudassar Ali

SangHee Kim

Subhash Chandra

KimSeonghyeon

Zhihao Cui

Kyle Corbitt

Sean Doughty

Zak Mandhro

bozdoz

Isaac Tait

Jace

Noah Bernsohn

rene-demonsters

Sergey Sharov

Tim Pap

in-in

mlabate

Pablo Dejuan

bugsfunny

Luís Pinto

Leigh Halliday

BlackHawkSigma

Devin MacGillivray

Francisco Jaramillo

Orta Therox

Tharshan Muthulingam

Brian Liu

allen joslin

Ryan Wang

Vashiru

Ron Dyar

Todd Pressley

Zack Sheppard

AlbertGao

vchoy

Daniel Macovei

Peter Perlepes

Benedict Adams

Hampus Kraft

Harun Kilic

Mike Nikles

Mohammad Shahbaz Alam

Moulik Aggarwal

Omar El-Domeiri

Paul McKellar

Sarthak Mohanty

Justin Jurenka

Jens Lindström

Hampus Kraft

Ryan Chenkie

George Cameron

John

Shannon Smith

Bob

facinick

Teodoro Villaneuva

Sarvesh Limaye

Shantanu Zadbuke

Duke Manh

Michael Marino

Igor Savin

Jacob Arriola

Jingying Gu

Tim Kolberger

nzdjb

Hannah Vivian Shaw

usman kareemee

watway

Edward Mason

Mateo Carriquí

kataqatsi

Jeff Schroeder

mnm

BBurnworth

Jonathan

Rishabh Poddar

Vitalii Melnychuk

Buck DeFore

Kamarel Malanda

Manuel Vila

Arda TANRIKULU

Tristan Lee

Agustina Chaer

Charles Tison

Josema Sar

Ken Greeff

Wiktor Sienkiewicz

Alejandro Frias

Aleksandra

Ian McPhail

Kyle Stewart

Laurin Quast

Martin Juhasz

Odee

Stephen Handley

Syeda Zainab

joriswill

szainab

twodotsmax

Michael Shilman

nickpdemarco

davidlcorbitt

ROZBEH

Anh Le (Andy)

IsaacHook

Matt Sears

MthBarber

Safi Nettah

dietler

Guedis

rkmitra1

m3t

Brandon Bayer

Matt Murphy

jessicard

Pete McCarthy

Philzen

Vik

Carl Hallén Jansson

Chen Liu

Manish

Zach Peters

Benas Mandravickas

COCL2022

Ella

Eric Kitaif

Giuseppe Caruso

Ian Walter

Jedde Bowman

Johan Eliasson

Lee Staples

Leo Thorp

Matthieu Napoli

Nik F P

Olyno

Robert Tirta

The Ape Collector

ccnklc

cremno

dkmooers

hbellahc

hello there

llmaboi

Changsoon Bok

Kristoffer K.

Justin Kuntz

Paine Leffler

Paul Venable

Peter Chen

Yann

Andre Wruszczak

Anton Mihaylov

Miguel Parramón

Fabio Lazzaroni

Rushabh Javeri

Anders Søgaard

kunalarya

Aleph Retamal

Alon

Bouzid Badreddine

Charly POLY

Guillaume Mantopoulos

Jan Henning

Jonas Oberschweiber

Jordan Rolph

Jorge Venegas

Kolja Lampe

Leon

Masvoras

Min ho Kim

Pin Sern

RUI OKAZAKI

Syahrizal Ardana

craineum

hello there

Matt Driscoll

paikwiki

Mark Wiemer

Alex Hughes

Erica Pisani

Fatih Altinok

Kris

Krupali Makadiya

Malted

Michelle Greer

Nikola Hristov

Swarit Choudhari

Lina

pwellner

Jay O'Conor

Stan Duprey

Victor Savkin

Łukasz Sowa

Andrew Lam

Daniel Jalkut

Eli

NoahC5

Tommy Marshall

Zachary Vander Velden

pantheredeye

Kirby Douglas Ellingson

Sergio Guzman

Eric Howey

Erik Guzman

IRSHAD WANI

Niall

Nikola Hristov

Rui Okazaki

Sunjay Armstead

Justin

kam c.

makdeb

payapula

willks

Josh GM Walker

Ari Mendelow

Jake Zhao

psirus0588

Eric Rabinowitz

Maximilian Raschle

nikolaxhristov

Alon Bukai

Han Ke

Matt Chapman

Rowin Mol

Christopher Burns

Alex Lilly

dphuang2

Daniel Escoto

James Hester

Guillaume Mantopoulos

Linus Timm

Mina Abadir

Tom Dickson

Tyler

Christian Bergschneider

Emre Erdoğan

Toshinori Tsugita

Ajit Kumar Goel

Tai Vo

Sam Huang

Stefanos Anagnostou

dennemark

Aaron Rackley (EverydayTinkerer)

Brent Scheibelhut

Cal Courtney

Jai Srivastav

Tilmann

cheddar

Bryan Clark

Carl Lange

Chris Davis

David Kus

Flouse

Hannes Tiede

Lucas-Bide

Martin Váňa

Chris Rogers

Samanvay Karambhe

alireza rais sattari

aslaker

zach-withcoherence

tuxcommunity

Ted

Dalton Craven

Drikus Roor

Eka

ModupeD

Nemi Shah

Rodrigo Medina

Russell Anthony

Jason Daniel

ray hatfield

swyx.io

BWizard06

Bigood

Cristi Ciobanu

Gilliard Macedo

Lee Ravenberg

Matthew Phillips

Rui Lima

Sheng Chou

yahhuh

Redwood projects (mostly) follow the all-contributions specification. Contributions of any kind are welcome.

redwood's People

Contributors

ahaywood avatar aldonline avatar antonmoiseev avatar callingmedic911 avatar cannikin avatar cjreimer avatar dac09 avatar dependabot[bot] avatar dhausser avatar dthyresson avatar forresthayes avatar jeliasson avatar josh-walker-gm avatar jtoar avatar kimadeline avatar krisztiaan avatar mohsen1 avatar mojombo avatar noire-munich avatar orta avatar peterp avatar philzen avatar pi0neerpat avatar redwood-bot avatar renovate[bot] avatar robertbroersma avatar terris avatar thedavidprice avatar tobbe avatar virtuoushub avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redwood's Issues

Favicon support

It would be nice to have proper Favicon support, let's see if we can find a library that works properly.

redwood generate fails in distribution due to referencing source directory

👋 Using @redwoodjs/cli@^0.0.1-alpha.16, redwood generate references the source src directory that isn't included in the built distribution, which is served from the dist directory. This results in an error where generators can't find templates. The offending lines appear to be where templateRoot is set.

export const templateRoot = path.join(
__dirname,
'..',
'..',
'src',
'commands',
'Generate',
'templates'
)

The diff below seems to fix generators in the distribution, however, there appear to be some existing failures in the tests suite, so I wasn't able to quickly verify this didn't break things in other places.

diff --git a/packages/cli/src/lib/index.js b/packages/cli/src/lib/index.js
index b6ee780..409bf3a 100644
--- a/packages/cli/src/lib/index.js
+++ b/packages/cli/src/lib/index.js
@@ -8,8 +8,6 @@ import lodash from 'lodash/string'
 export const templateRoot = path.join(
   __dirname,
   '..',
-  '..',
-  'src',
   'commands',
   'Generate',
   'templates'

And the stack trace here:

Stack trace
The above error occurred in the <Router> component:
    in Router
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
(node:83292) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/src/commands/Generate/templates/layout/layout.js.template'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at readFile (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/lib/index.js:44:40)
    at generateTemplate (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/lib/index.js:37:45)
    at files (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/commands/Generate/generators/layout.js:24:46)
    at Object.files (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/commands/Generate/generators/layout.js:37:18)
    at Object.Generate [as default] (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/commands/Generate/Generate.js:106:29)
    at Router (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/index.js:32:31)
    at renderWithHooks (/Users/justin/.config/yarn/global/node_modules/react-reconciler/cjs/react-reconciler.development.js:6036:18)
    at mountIndeterminateComponent (/Users/justin/.config/yarn/global/node_modules/react-reconciler/cjs/react-reconciler.development.js:8570:13)
(node:83292) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:83292) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

P.S. Redwood is looking great so far! I was able to quickly get a non-trivial app up and running in far less time than I would have if I were starting from a typical react bootstrap.

Generators: add ability to destroy generated files

In Rails there is a destroy command that acts as the evil twin of generate:

rails generate scaffold Post
rails destroy scaffold Post

Let's do the same thing in Redwood. The generators themselves just return a list of files/routes so we should be able to use those lists in a destroy process to remove the files created and match and remove the routes.

Add ability to coerce route variables

Add the ability to specify types or coercion methods to use on route variables before making them available to pages via props or useParams.

Proposed syntax was something like:

<Route path="/posts/{id:Int}" page={PostPage} name="post" />

Redwood on JS Party?!

Howdy from JS Party! 👋

We'd love to have you on the show sometime soon. It seems like Redwood is in a great state to begin a conversation around it. We've been talking JAMStack a fair bit, but until now we haven't seen anyone step up to the plate with a full-stack, opinionated offering to tie all the concepts together.

Interested? Please email [email protected] to coordinate.

Looking forward to it! 💚

Checklist to get Tutorial Working

  • Scaffold generator #27 @cannikin
  • No index.js required for a Cell
  • No import required for pages in Router (in progress, @mojombo)
  • No resolvers required in SDL files (in progress, @peterp)
  • Include form helpers from example-blog into redwood proper
  • Automatically run yarn install after redwood new is finished building app structure
  • Get hot reloads working again

my last name is hammer

if you're looking for contributors, i would love to support anything that advances my last name

Error in DB setup for new app: Raw mode is not supported on the current process.stdin

Looks like this is caused because we run db:up once yarn install completes, and the first time you run db:up prisma tries to create the database which requires user input (two options are given for creating the DB). I'm guessing however the original yarn install process hooks into stdin/stdout is not setup to allow user input so this error occurs.

The command actually did complete but there was a big error thrown in the middle when trying to prompt the user what to do about creating the database:

rob$ redwood new generator-test
Created /Users/rob/Sites/redwoodjs/generator-test
Downloading https://api.github.com/repos/redwoodjs/create-redwood-app/zipball/v0.0.1-alpha.16...
Extracting...
Added 47 files in /Users/rob/Sites/redwoodjs/generator-test
Installing packages...
yarn install v1.19.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@redwoodjs/cli > [email protected]" has unmet peer dependency "@types/react@>=16.8.0".
warning "@redwoodjs/eslint-config > [email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@redwoodjs/eslint-config > [email protected]" has unmet peer dependency "babel-plugin-module-resolver@^3.0.0".
warning "@redwoodjs/eslint-config > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
[-/17] ⠄ waiting...
[-/17] ⠄ waiting...
[11/17] ⠄ api
[4/17] ⠄ fsevents
error /Users/rob/Sites/redwoodjs/generator-test/node_modules/api: Command failed.
Exit code: 1
Command: yarn db:up
Arguments: 
Directory: /Users/rob/Sites/redwoodjs/generator-test/node_modules/api
Output:
yarn run v1.19.2
$ yarn prisma2 lift up && yarn prisma2 generate
$ /Users/rob/Sites/redwoodjs/generator-test/node_modules/.bin/prisma2 lift up
You are trying to apply a migration for Sqlite database /dev.db.
A database with that name doesn't exist at file:./dev.db.
Do you want to create the database?

    Yes            Create new Sqlite database /dev.db
    No             Don't create the database
Error in Create Database Dialog
Error: Raw mode is not supported on the current process.stdin, which Ink uses as
 input stream by default.
Read about how to prevent this error on https://github.com/vadimdemedes/ink/#isr
awmodesupported
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:106885:17
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:126056:9
    at commitHookEffectList (/Users/rob/Sites/redwoodjs/generator-test/node_modu
Error in Create Database Dialog
Error: Raw mode is not supported on the current process.stdin, which Ink uses as
 input stream by default.
Read about how to prevent this error on https://github.com/vadimdemedes/ink/#isr
awmodesupported
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:106885:17
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:126056:9
    at commitHookEffectList (/Users/rob/Sites/redwoodjs/generator-test/node_modu
les/prisma2/build/index.js:190512:26)
    at commitPassiveHookEffects (/Users/rob/Sites/redwoodjs/generator-test/node_
modules/prisma2/build/index.js:190542:11)
    at Object.invokeGuardedCallbackImpl (/Users/rob/Sites/redwoodjs/generator-te
st/node_modules/prisma2/build/index.js:190051:10)
    at invokeGuardedCallback (/Users/rob/Sites/redwoodjs/generator-test/node_mod
ules/prisma2/build/index.js:190235:31)
    at flushPassiveEffectsImpl (/Users/rob/Sites/redwoodjs/generator-test/node_m
odules/prisma2/build/index.js:193399:7)
    at unstable_runWithPriority (/Users/rob/Sites/redwoodjs/generator-test/node_
modules/prisma2/build/index.js:121924:12)
    at runWithPriority (/Users/rob/Sites/redwoodjs/generator-test/node_modules/p
risma2/build/index.js:181530:10)
    at flushPassiveEffects (/Users/rob/Sites/redwoodjs/generator-test/node_modul
es/prisma2/build/index.js:193372:10)
/usr/local/Cellar/node/13.2.0/bin/node[99406]: ../src/signal_wrap.cc:159:void node::DecreaseSignalHandlerCount(int): Assertion `(new_handler_count) >= (0)' failed.
 1: 0x100b8ff9a node::Abort() (.cold.1) [/usr/local/Cellar/node/13.2.0/bin/node]
 2: 0x1000832c4 node::FatalError(char const*, char const*) [/usr/local/Cellar/node/13.2.0/bin/node]
 3: 0x10008307c node::AppendExceptionLine(node::Environment*, v8::Local<v8::Value>, v8::Local<v8::Message>, node::ErrorHandlingMode) [/usr/local/Cellar/node/13.2.0/bin/node]
 4: 0x1000f7e52 node::HasSignalJSHandler(int) [/usr/local/Cellar/node/13.2.0/bin/node]
 5: 0x1000f85ad node::(anonymous namespace)::SignalWrap::Close(v8::Local<v8::Value>) [/usr/local/Cellar/node/13.2.0/bin/node]
 6: 0x10003eb76 node::Environment::CleanupHandles() [/usr/local/Cellar/node/13.2.0/bin/node]
 7: 0x10003ed2f node::Environment::RunCleanup() [/usr/local/Cellar/node/13.2.0/bin/node]
 8: 0x1000b4a3a node::NodeMainInstance::Run() [/usr/local/Cellar/node/13.2.0/bin/node]
 9: 0x100060f13 node::Start(int, char**) [/usr/local/Cellar/node/13.2.0/bin/node]
10: 0x7fff71e557fd start [/usr/lib/system/libdyld.dylib]
11: 0x4 
Created /Users/rob/Sites/redwoodjs/generator-test
Downloading https://api.github.com/repos/redwoodjs/create-redwood-app/zipball/v0.0.1-alpha.16...
Extracting...
Added 47 files in /Users/rob/Sites/redwoodjs/generator-test
Installing packages...
rob$ 

Automatically collect props passed to Cell into `variables` object for QUERY

Given the following call to a Cell:

<PostCell id={id} />

And a QUERY inside that cell:

export const QUERY = gql`
  query FIND_POST_BY_ID($id: ID!) {
    post: findPostById(id: $id) {
      id
      title
      body
      postedAt
    }
  }
`

The id prop should automatically be transformed into { variables: { id } }. Currently we need to define a beforeQuery and do this manually:

export const beforeQuery = ({ id }) => {
  return { variables: { id } }
}

Generators: rollback changes if an error occurs

Right now if an error occurs while the generators are running anything that was already done (create files, append routes) will be left in place.

We should keep track of all changes that are made and roll them back if an error occurs during a generator.

Hammer CLI generators

As I'm working through the tutorial I'm coming upon places we should be able to generate various Hammer aspects for the user.

The namespace for all of these generators is generate. It can also be shorted to just g. The following two commands are equivalent:

hammer generate page Foo /foo
hammer g page Foo /foo

Pages

hammer generate page [name] [route]

Generates a page component and adds a route for it.

Syntax

  • The [name] can be lowercase or CamelCase and the generator will create the correct case in its generated output. "post" and "Post" would create the same "PostPage" component.
  • If the [name] is suffixed with "page" already then it should not be added again. For example: "homePage", "home_page" or "HomePage" should all generate "HomePage".
  • The [route] is copied verbatim to the path part of the <Route> declaration.

Example Usage

hammer generate page post /

This would generate web/src/pages/PostPage/PostPage.js component containing a barebones implementation:

const PostPage = (props) => {
  return (
    <h1>Post</h1>
    <p>Find me in web/src/pages/PostPage/PostPage.js</p>
  )
}

export default PostPage

The generator would also and add the following to web/Routes.js:

<Router>
  <Route path="/" page={PostPage} name="post" />

  // exiting routes...
</Router>

Note the route is prefixed to the top of the file for simplicity. Otherwise we'll be in a cat and mouse game of trying to find where user-defined routes start and stop and have to worry about precedence. This way the newly created path is first and always "wins" if there are conflicts. It will be up to the user to fix any conflict and/or move the route to a more natural spot in the file.

Outstanding Questions

  • What to do about something like "homepage" (no snake_case or CamelCase to delimit where the word "page" is?

Layouts

hammer generate layout [name]

Generates a layout component.

Syntax

  • [name] should follow the same case rules as Pages.
  • If the [name] is already suffixed with "layout" it should not be added again. "my_layout", "MyLayout" and "myLayout" should all create a layout component named "MyLayout".

Example Usage

hammer generate layout blog

Generates web/src/layouts/BlogLayout/BlogLayout.js with a basic structure:

const BlogLayout = (props) => {
  return { props.children }
}

export default BlogLayout

Outstanding Questions

  • What to do about something like "bloglayout" (no snake_case or CamelCase to delimit where the word "layout" is?

Components

hammer generate component [name]

Creates a single component with the given [name]

Syntax

  • Names don't contain the word "component" so it shouldn't try to auto-add/remove anything from the given name

Example Usage

hammer generate component Post

Creates web/src/components/Post/Post.js with a barebones structure:

const Post = () => {
  return null
}

export default Post

Outstanding Questions

  • Maybe we could have generated components actually output something, like their own name: return "Post Component"? Would this help people who want to generate components and then immediately drop them into a page before fleshing them out? Or is it just a nuisance? I think we have to keep return null because React will raise an error if there is no return statement at all.

Cells

hammer generate cell [name]

Creates a single cell component with the given [name].

Syntax

  • Follows the same rules as page naming

Example Usage

hammer generate cell Post

Creates web/src/components/PostCell/PostCell.js with a barebones structure:

export const Query = gql`
  query {
    posts {
      id
    }
  }
`

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

export const Empty = () => <div>Empty</div>

export const Failure = ({ message }) => <div>Error: {message}</div>

export const Success = ({ posts }) => {
  return posts.toString()
}

The cell generator assumes there was an SDL generated with the same name and so pre-fills the "findMany" GraphQL query that it would generate along with a single id column (since all DB tables should have one). The Success component just dumps the data structure to a string to verify that it worked.

Outstanding Questions

  • Maybe add a flag that lets you create the SDL for this cell at the same time? Something like hammer generate cell Post --sdl If so we could add the inverse on the SDL generator with a --cell flag
  • Should there be an --empty flag that generates no actual query or component content? Components would just render null and the page may actually error out if there is no query body at all?
  • Or maybe we could do the opposite: generate the empty one by default and set a flag if you want to include the basic query/component content, --sample or something

SDL

hammer generate sdl [name]

Introspects the database for a table named [name] and builds:

  • GraphQL type, query and mutations endpoints for retrieving one or many rows from that table, creating a new one, updating an existing one and deleting one
  • Creates the service with photon calls to CRUD behaviors (findMany, findOne, create, update, delete)

Sytanx

Example Usage

Service

hammer generate service [name] [optional list of function names]

Creates api/src/services/[name].js as a shell to start writing a service. If given an optional list of method names (separated with spaces) then those names are added as function names in the service.

Syntax

  • [name] should follow the rules for Page names
  • [optional list of method names] is a space-separated list of function names to add to the generated service

Example Usage

hammer generate service Posts all one save
const Posts = {
  all: ({}) => {
    return null
  },
  one: ({}) => {
    return null
  },
  save: ({}) => {
    return null
  }
}

Scaffold

hammer generate scaffold [name]

Generates Pages, SDL and a Service to perform basic CRUD operations on a corresponding database table. This is the mother of all generators actually invokes a couple of others (SDL and cells) behind the scenes.

Sytanx

  • [name] should be the name of a database table as created by Prisma

Example Usage

hammer generate scaffold Post

Generates:

  • api/src/graphql/posts.sdl.js
  • api/src/services/posts.js
  • web/src/components/PostsCell/PostsCell.js - displaying all posts
  • web/src/components/PostCell/PostCell.js - displaying a single post
  • web/src/components/EditPostCell/EditPostCell.js - editing a post
  • web/src/components/Post/Post.js - post display component
  • web/pages/PostsPage/PostsPage.js
  • web/pages/PostsPage/PostPage.js
  • web/pages/PostsPage/NewPostPage.js
  • web/pages/PostsPage/EditPostPage.js

As well as cooresponding routes to the pages:

<Router>
  <Route path="/posts" page={PostsPage} name="posts" />
  <Route path="/posts/:id" page={PostsPage} name="post" />
  <Route path="/posts/new" page={PostsPage} name="newPost" />
  <Route path="/posts/:id/edit" page={PostsPage} name="editPost" />
  // existing routes...
</Router>

Outstanding Questions

  • How to handle pluralization here? The database table is singular but feels more "human" to name things like the SDL and service plural. Likewise there is a PostsPage page (all posts) and a PostPage page (only a single post). This is the Rails Way™ but is it the Hammer Way™®©?

Prisma improvements

  • Add integrated seeding workflow [blocked by https://github.com/prisma/prisma/issues/9]
  • Easy switching between SQLite (for local dev) and another DB (for prod) [blocked by https://github.com/prisma/prisma/issues/265]
  • Get rid of packages/photon directory [blocked by https://github.com/prisma/prisma/issues/664]
  • Allow specification of schema.prisma path [blocked by https://github.com/prisma/prisma2/issues/225]
  • Default env vars [blocked by https://github.com/prisma/prisma/issues/222]

How to enable SSR by default?

Hi! First of all, thanks for making this happen, I've been playing with the different examples and I can't wait to see the progress on this, it's already really promising. I love the idea of having an end-to-end framework that answers the most recurrent questions.

I was wondering what will be the easiest way to enable SSR. I understand it shouldn't be that difficult as the stack is already using Apollo, any pointers?

I also would love to know how much of an impact will be on SEO having/not having SSR in the modern world, I've heard mixed opinions on the matter.

Thanks!

Disconnect after a photon request

Prisma recommends explicitly disconnecting after a photon request is made.

We want to simplify DB setup for the tutorial and that means avoiding having to include a connection proxy in front of the DB (many services don't have them yet). If we disconnect after each request then we shouldn't 😬 have any problems overflowing our connection limit.

Upgrade Prisma to preview20

  • upgrade to latest version of prisma.
  • fix imports in create-redwood-app.
  • fix imports in example-blog/ example-todo.
  • use --watch in redwood dev
  • change dev commands in web/api to use redwood dev --api / redwood dev --web
  • remove references to db:up and db:save in tutorial and documents.

Can't install packages with yarn

When trying to yarn install on a fresh clone of redwood I'm getting build errors for the sharp package on macOS 10.15.2 (Catalina).

If it just turns out there is some other dependency that's required we should note that in the README. The sharp docs mention the following for MacOS installation:

libvips and its dependencies are fetched and stored within node_modules/sharp/vendor during npm install. This involves an automated HTTPS download of approximately 8MB.

To use your own version of libvips instead of the provided binaries, make sure it is at least the version listed under config.libvips in the package.json file and that it can be located using pkg-config --modversion vips-cpp.

rob$ yarn
yarn install v1.19.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/cli > [email protected]" has unmet peer dependency "@types/react@>=16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react-dom@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react-dom@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/react-components > @apollo/[email protected]" has unmet peer dependency "react@^16.8.0".
[4/4] 🔨  Building fresh packages...
[-/15] ⠄ waiting...
[-/15] ⠄ waiting...
[-/15] ⠄ waiting...
[-/15] ⠄ waiting...
error /Users/rob/Sites/redwoodjs/redwood/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
Arguments: 
Directory: /Users/rob/Sites/redwoodjs/redwood/node_modules/sharp
Output:
info sharp Using cached /Users/rob/.npm/_libvips/libvips-8.7.4-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=13.2.0 runtime=node arch=x64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp info find Python using Python version 2.7.16 found at "/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/rob/Sites/redwoodjs/redwood/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/rob/Library/Caches/node-gyp/13.2.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/rob/Library/Caches/node-gyp/13.2.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/rob/Library/Caches/node-gyp/13.2.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/rob/Sites/redwoodjs/redwood/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
  CXX(target) Release/obj.target/sharp/src/metadata.o
  CXX(target) Release/obj.target/sharp/src/stats.o
../src/stats.cc:130:19: error: no matching member function for call to 'Set'
        channels->Set(i, channelStat);
        ~~~~~~~~~~^~~
/Users/rob/Library/Caches/node-gyp/13.2.0/include/node/v8.h:3547:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
  V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context,
                                    ^
/Users/rob/Library/Caches/node-gyp/13.2.0/include/node/v8.h:3550:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
  V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context, uint32_t index,
                                    ^
1 error generated.
make: *** [Release/obj.target/sharp/src/stats.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/usr/local/Cellar/node/13.2.0/bin/node" "/Users/rob/Sites/redwoodjs/redwood/node_modules/.bin/node-gyp" "rebuild"
gyp ERR! cwd /Users/rob/Sites/redwoodjs/redwood/node_modules/sharp

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.