RedwoodJS Cheat Sheet

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

File Description
webpack.common.js Base config; merges with development, production, and user-defined configs
webpack.development.js Config used when developing locally
webpack.production.js Config used when building for production
webpack.stat.js Config used when --stats is provided to yarn rw build; merges the production config with Webpack Bundle Analyzer
Plugin Description
HtmlWebpackPlugin Simplifies the creation of HTML files to serve your webpack bundles
DirectoryNamedWebpackPlugin Makes it possible to control what file within directory will be treated as entry file
MiniCssExtractPlugin Extracts CSS into separate files
CopyWebpackPlugin Copies individual files or entire directories, which already exist, to the build directory
DotenvPlugin Expose (a subset of) dotenv variables
10 Likes