Something I’m seeing more often on doc sites as projects get more and more complicated are cheat sheets and glossaries for the whole library:
This isn’t the same as something like a comprehensive API reference which makes a great reference document but isn’t optimized for a person to quickly look over.
Since I’ve been in the docs a lot while writing about Redwood I’ve definitely gotten the feeling that things are a little spread out and it can take a little searching and scrolling to get that one specific term or command you’re looking for.
Redwood is a really big project and requires a lot of explaining so it’s inevitable and I think that’s why we’re seeing more projects create these single page reference docs. You want to have a quick reference manual without sacrificing comprehensive documentation.
Here’s a first pass, feel free to make suggestions for anything that could be added. If we like it after a few iterations I’ll make a pull request for redwoodjs.com.
Web side configuration
| Key |
Description |
Default |
Context |
host |
Hostname to listen on |
'localhost' |
development |
port |
Port to listen on |
8910 |
development |
path |
Path to the web side |
'./web' |
both |
target |
Target for the web side |
TargetEnum.BROWSER |
both |
apiProxyPath |
Proxy path to the api side |
'/.netlify/functions' |
production |
includeEnvironmentVariables |
Environment variables to whitelist |
|
both |
API side configuration
| Key |
Description |
Default |
Context |
host |
Hostname to listen on |
'localhost' |
development |
port |
Port to listen on |
8911 |
development |
path |
Path to the api side |
'./api' |
both |
target |
Target for the api side |
TargetEnum.NODE |
both |
Browser target configuration
| Key |
Description |
Default |
Context |
open |
Open the browser to web’s host:port after the dev server starts |
false |
development |
CLI Commands
| Command |
Description |
build |
Build for production |
dataMigrate |
Data migration tools |
install |
Appends a DataMigration model to schema.prisma for tracking which data migrations have already run |
up |
Executes outstanding data migrations against the database |
db |
Database tools |
down |
Migrate your database down |
generate |
Generate the Prisma client |
introspect |
Introspect your database and generate models in ./api/prisma/schema.prisma, overwriting existing models |
save |
Create a new migration |
seed |
Seed your database with test data |
studio |
Start Prisma Studio, a visual editor for your database |
up |
Generate the Prisma client and apply migrations |
dev |
Start development servers for api and web |
destroy (alias d) |
Rollback changes made by the generate command |
diagnostics |
Get structural diagnostics for a Redwood project (experimental) |
generate (alias g) |
Save time by generating boilerplate code |
auth |
Generate an auth configuration |
cell |
Generate a cell component |
component |
Generate a component |
function |
Generate a Function |
layout |
Generate a layout component |
page |
Generates a page component and updates the routes |
scaffold |
Generate Pages, SDL, and Services files based on a given DB schema Model |
sdl |
Generate a GraphQL schema and service object |
service |
Generate a service component |
info |
Print your system environment information |
lint |
Lint your files |
open |
Open your project in your browser |
redwood-tools (alias rwt) |
Redwood’s companion CLI development tool |
test |
Run Jest tests for api and web |
upgrade |
Upgrade all @redwoodjs packages via an interactive CLI |
Form Components
| Component |
Description |
<Form> |
surrounds all form elements and provides contexts for errors and form submission |
<FormError> |
displays an error message, typically at the top of your form, containing error messages from the server |
<Label> |
used in place of the HTML <label> tag and can respond to errors with different styling |
<SelectField> |
used in place of the HTML <select> tag and responds to errors with different styling |
<TextAreaField> |
used in place of the HTML <textarea> tag and can accept validation options and be styled differently in the presence of an error |
<FieldError> |
will display error messages from form validation and server errors |
<Submit> |
used in place of <button type="submit"> and will trigger a validation check and “submission” of the form |
HTML <input> types |
Available as a component <TypeField> where Type is one of the official HTML types. |
Redwood Router
| Component |
Description |
Props |
Router |
Contains all of your routes |
notfound, page, path, name, pageLoadingDelay
|
Route |
Each route is specified with a Route
|
unauthenticated, redirectTo
|
Private |
All Routes nested in <Private> require authentication |
|
Link |
Generate a link to one of your routes and access URL generators from the routes object |
routes, to
|
NavLink |
Special version of Link that will add an activeClassName to the rendered element when it matches the current URL |
activeClassName |
| Hook |
Description |
useAuth |
Determines if the user is authenticated |
useMatch |
Create your own component with active styles |
useParams |
Pull in a route parameter without needing to have it passed in |
useLocation |
Returns a read-only location object representing the current URL |
navigate |
Programmatically navigate to a different page |
Redirect |
Declaratively redirect to a different page |
usePageLoadingContext |
Show a loading indicator to signal something is happening |
Webpack Configuration
11 Likes