Command Line Interface
The following is a comprehensive reference of the Redwood CLI. You can get a glimpse of all the commands by scrolling the aside to the right.
The Redwood CLI has two entry-point commands:
- redwood (alias
rw
), which is for developing an application, and - redwood-tools (alias
rwt
), which is for contributing to the framework.
This document covers the redwood
command . For redwood-tools
, see Contributing in the Redwood repo.
A Quick Note on Syntax
We use yargs and borrow its syntax here:
yarn redwood generate page <name> [path] --option
redwood g page
is the command.<name>
and[path]
are positional arguments.<>
denotes a required argument.[]
denotes an optional argument.
--option
is an option.
Every argument and option has a type. Here <name>
and [path]
are strings and --option
is a boolean.
You'll also sometimes see arguments with trailing ..
like:
yarn redwood build [side..]
The ..
operator indicates that the argument accepts an array of values. See Variadic Positional Arguments.
create redwood-app
Create a Redwood project using the yarn create command:
yarn create redwood-app <project directory> [option]
Arguments & Options | Description |
---|---|
project directory | Specify the project directory [Required] |
--yarn-install | Enables the yarn install step and version-requirement checks. You can pass --no-yarn-install to disable this behavior |
--typescript , --ts | Generate a TypeScript project. JavaScript by default |
--overwrite | Create the project even if the specified project directory isn't empty |
--no-telemetry | Disable sending telemetry events for this create command and all Redwood CLI commands: https://telemetry.redwoodjs.com |
--yarn1 | Use yarn 1 instead of yarn 3 |
--git-init , --git | Initialize a git repo during the install process, disabled by default |
If you run into trouble during the yarn install step, which may happen if you're developing on an external drive and in other miscellaneous scenarios, try the --yarn1
flag:
yarn create redwood-app my-redwood-project --yarn1
build
Build for production.
yarn redwood build [side..]
We use Babel to transpile the api side into ./api/dist
and Webpack to package the web side into ./web/dist
.
Arguments & Options | Description |
---|---|
side | Which side(s) to build. Choices are api and web . Defaults to api and web |
--stats | Use Webpack Bundle Analyzer to visualize the size of Webpack output files via an interactive zoomable treemap |
--verbose, -v | Print more information while building |
Usage
See Builds.
Example
Running yarn redwood build
without any arguments generates the Prisma client and builds both sides of your project:
~/redwood-app$ yarn redwood build
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood build
✔ Generating the Prisma client...
✔ Building "api"...
✔ Building "web"...
Done in 17.37s.
Files are output to each side's dist
directory:
├── api
│ ├ ── dist
│ ├── prisma
│ └── src
└── web
├── dist
├── public
└── src
check (alias diagnostics)
Get structural diagnostics for a Redwood project (experimental).
yarn redwood check
Example
~/redwood-app$ yarn redwood check
yarn run v1.22.4
web/src/Routes.js:14:5: error: You must specify a 'notfound' page
web/src/Routes.js:14:19: error: Duplicate Path
web/src/Routes.js:15:19: error: Duplicate Path
web/src/Routes.js:17:40: error: Page component not found
web/src/Routes.js:17:19: error (INVALID_ROUTE_PATH_SYNTAX): Error: Route path contains duplicate parameter: "/{id}/{id}"
console (alias c)
Launch an interactive Redwood shell (experimental):
- This has not yet been tested on Windows.
- The Prisma Client must be generated prior to running this command, e.g.
yarn redwood prisma generate
. This is a known issue.
yarn redwood console
Right now, you can only use the Redwood console to interact with your database:
Example
~/redwood-app$ yarn redwood console
yarn run v1.22.4
> await db.user.findMany()
> [ { id: 1, email: 'tom@redwoodjs.com', name: 'Tom' } ]
dataMigrate
Data migration tools.
yarn redwood dataMigrate <command>
Command | Description |
---|---|
install | Appends DataMigration model to schema.prisma , creates api/db/dataMigrations directory |
up | Executes outstanding data migrations |
dataMigrate install
- Appends a
DataMigration
model toschema.prisma
for tracking which data migrations have already run. - Creates a DB migration using
yarn redwood prisma migrate dev --create-only create_data_migrations
. - Creates
api/db/dataMigrations
directory to contain data migration scripts
yarn redwood dataMigrate install
dataMigrate up
Executes outstanding data migrations against the database. Compares the list of files in api/db/dataMigrations
to the records in the DataMigration
table in the database and executes any files not present.
If an error occurs during script execution, any remaining scripts are skipped and console output will let you know the error and how many subsequent scripts were skipped.
yarn redwood dataMigrate up
dev
Start development servers for api and web.
yarn redwood dev [side..]
yarn redwood dev api
starts the Redwood dev server and yarn redwood dev web
starts the Webpack dev server with Redwood's config.
Argument | Description |
---|---|
side | Which dev server(s) to start. Choices are api and web . Defaults to api and web |
--forward, --fwd | String of one or more Webpack Dev Server config options. See example usage below. See the Redwood Webpack Doc for more details and examples. |
Usage
If you're only working on your sdl and services, you can run just the api server to get GraphQL Playground on port 8911:
~/redwood-app$ yarn redwood dev api
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood dev api
$ /redwood-app/node_modules/.bin/dev-server
15:04:51 api | Listening on http://localhost:8911
15:04:51 api | Watching /home/dominic/projects/redwood/redwood-app/api
15:04:51 api |
15:04:51 api | Now serving
15:04:51 api |
15:04:51 api | ► http://localhost:8911/graphql/
Using --forward
(alias --fwd
), you can pass one or more Webpack Dev Server config options. The following will run the dev server, set the port to 1234
, and disable automatic browser opening.
~/redwood-app$ yarn redwood dev --fwd="--port=1234 --open=false"
You may need to access your dev application from a different host, like your mobile device or an SSH tunnel. To resolve the “Invalid Host Header” message, run the following:
~/redwood-app$ yarn redwood dev --fwd="--allowed-hosts all"
For the full list of Webpack Dev Server settings, see this documentation.
For the full list of Server Configuration settings, see this documentation.
deploy
Deploy your redwood project to a hosting provider target.
Netlify, Vercel, and Render
For hosting providers that auto deploy from Git, the deploy command runs the set of steps to build, apply production DB changes, and apply data migrations. In this context, it is often referred to as a Build Command. Note: for Render, which uses traditional infrastructure, the command also starts Redwood's api server.
AWS
This command runs the steps to both build your project and deploy it to AWS.
yarn redwood deploy <target>
Commands | Description |
---|---|
serverless | Deploy to AWS using Serverless framework |
netlify [...commands] | Build command for Netlify deploy |
render <side> [...commands] | Build command for Render deploy |
vercel [...commands] | Build command for Vercel deploy |
deploy serverless
Deploy to AWS CloudFront and Lambda using Serverless framework
yarn redwood deploy serverless
Options & Arguments | Description |
---|---|
--side | which Side(s)to deploy [choices: "api", "web"] [default: "web","api"] |
--stage | serverless stage, see serverless stage docs [default: "production"] |
--pack-only | Only package the build for deployment |
--first-run | Use this flag the first time you deploy. The first deploy wizard will walk you through configuring your web side to connect to the api side |
deploy netlify
Build command for Netlify deploy
yarn redwood deploy netlify
Options | Description |
---|---|
--build | Build for production [default: "true"] |
--prisma | Apply database migrations [default: "true"] |
--data-migrate, --dm | Migrate the data in your database [default: "true"] |
Example The following command will build, apply Prisma DB migrations, and skip data migrations.
yarn redwood deploy netlify --no-data-migrate
While you may be tempted to use the Netlify CLI commands to build and deploy your project directly from you local project directory, doing so will lead to errors when deploying and/or when running functions. I.e. errors in the function needed for the GraphQL server, but also other serverless functions.
The main reason for this is that these Netlify CLI commands simply build and deploy -- they build your project locally and then push the dist folder. That means that when building a RedwoodJS project, the Prisma client is generated with binaries matching the operating system at build time -- and not the OS compatible with running functions on Netlify. Your Prisma client engine may be darwin
for OSX or windows
for Windows, but it needs to be debian-openssl-1.1.x
or rhel-openssl-1.1.x
. If the client is incompatible, your functions will fail.
Therefore, please follow the instructions in the Tutorial to sync your GitHub (or other compatible source control service) repository with Netlify and allow their build and deploy system to manage deployments.
The Netlify CLI still works well for linking your project to your site, testing local builds and also using their dev or dev --live to share your local dev server via a tunnel.
deploy render
Build (web) and Start (api) command for Render deploy. (For usage instructions, see the Render Deploy Redwood doc.)
yarn redwood deploy render <side>
Options & Arguments | Description |
---|---|
side | select side to build [choices: "api", "web"] |
--prisma | Apply database migrations [default: "true"] |
--data-migrate, --dm | Migrate the data in your database [default: "true"] |
--serve | Run server for api in production [default: "true"] |
Example The following command will build the Web side for static-site CDN deployment.
yarn redwood deploy render web
The following command will apply Prisma DB migrations, run data migrations, and start the api server.
yarn redwood deploy render api
deploy vercel
Build command for Vercel deploy
yarn redwood deploy vercel
Options | Description |
---|---|
--build | Build for production [default: "true"] |
--prisma | Apply database migrations [default: "true"] |
--data-migrate, --dm | Migrate the data in your database [default: "true"] |
Example The following command will build, apply Prisma DB migrations, and skip data migrations.
yarn redwood deploy vercel --no-data-migrate
destroy (alias d)
Rollback changes made by the generate command.
yarn redwood destroy <type>
Command | Description |
---|---|
cell <name> | Destroy a cell component |
component <name> | Destroy a component |
function <name> | Destroy a Function |
layout <name> | Destroy a layout component |
page <name> [path] | Destroy a page and route component |
scaffold <model> | Destroy pages, SDL, and Services files based on a given DB schema Model |
sdl <model> | Destroy a GraphQL schema and service component based on a given DB schema Model |
service <name> | Destroy a service component |
directive <name> | Destroy a directive |
graphiql | Destroy a generated graphiql file |
exec
Execute scripts generated by yarn redwood generate script <name>
to run one-off operations, long-running jobs, or utility scripts.
Usage
You can pass any flags to the command and use them within your script:
❯ yarn redwood exec syncStripeProducts foo --firstParam 'hello' --two 'world'
[18:13:56] Generating Prisma client [started]
[18:13:57] Generating Prisma client [completed]
[18:13:57] Running script [started]
:: Executing script with args ::
{ _: [ 'exec', 'foo' ], firstParam: 'hello', two: 'world', '$0': 'rw' }
[18:13:58] Running script [completed]
✨ Done in 4.37s.
Examples of CLI scripts:
- One-off scripts—such as syncing your Stripe products to your database
- A background worker you can off-load long running tasks
- Custom seed scripts for your application during development
See this how to for an example of using exec to run a background worker.
generate (alias g)
Save time by generating boilerplate code.
yarn redwood generate <type>
Some generators require that their argument be a model in your schema.prisma
. When they do, their argument is named <model>
.
Command | Description |
---|---|
cell <name> | Generate a cell component |
component <name> | Generate a component component |
dataMigration <name> | Generate a data migration component |
dbAuth | Generate sign in, sign up and password reset pages for dbAuth |
deploy <provider> | Generate a deployment configuration |
function <name> | Generate a Function |
layout <name> | Generate a layout component |
page <name> [path] | Generate a page component |
scaffold <model> | Generate Pages, SDL, and Services files based on a given DB schema Model. Also accepts <path/model> |
sdl <model> | Generate a GraphQL schema and service object |
secret | Generate a secret key using a cryptographically-secure source of entropy |
service <name> | Generate a service component |
types | Generate types and supplementary code |
script <name> | Generate a script that can use your services/libs to execute with redwood exec script <name> |
TypeScript generators
If your project is configured for TypeScript (see the TypeScript docs), the generators will automatically detect and generate .ts
/.tsx
files for you
Undoing a Generator with a Destroyer
Most generate commands (i.e., everything but yarn redwood generate dataMigration
) can be undone by their corresponding destroy command. For example, yarn redwood generate cell
can be undone with yarn redwood destroy cell
.
generate cell
Generate a cell component.
yarn redwood generate cell <name>
Cells are signature to Redwood. We think they provide a simpler and more declarative approach to data fetching.
Arguments & Options | Description |
---|---|
name | Name of the cell |
--force, -f | Overwrite existing files |
--typescript, --ts | Generate TypeScript files Enabled by default if we detect your project is TypeScript |
--query | Use this flag to specify a specific name for the GraphQL query. The query name must be unique |
--list | Use this flag to generate a list cell. This flag is needed when dealing with irregular words whose plural and singular is identical such as equipment or pokemon |
--tests | Generate test files [default: true] |
--stories | Generate Storybook files [default: true] |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
The cell generator supports both single items and lists. See the Single Item Cell vs List Cell section of the Cell documentation.
See the Cells section of the Tutorial for usage examples.
Destroying
yarn redwood destroy cell <name>
Example
Generating a user cell:
~/redwood-app$ yarn redwood generate cell user
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g cell user
✔ Generating cell files...
✔ Writing `./web/src/components/UserCell/UserCell.test.js`...
✔ Writing `./web/src/components/UserCell/UserCell.js`...
Done in 1.00s.
A cell defines and exports four constants: QUERY
, Loading
, Empty
, Failure
, and Success
:
export const QUERY = gql`
query {
user {
id
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ user }) => {
return JSON.stringify(user)
}
generate component
Generate a component.
yarn redwood generate component <name>
Redwood loves function components and makes extensive use of React Hooks, which are only enabled in function components.
Arguments & Options | Description |
---|---|
name | Name of the component |
--force, -f | Overwrite existing files |
--typescript, --ts | Generate TypeScript files Enabled by default if we detect your project is TypeScript |
--tests | Generate test files [default: true] |
--stories | Generate Storybook files [default: true] |
--rollback | Rollback changes if an error occurs [default: true] |
Destroying
yarn redwood destroy component <name>
Example
Generating a user component:
~/redwood-app$ yarn redwood generate component user
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g component user
✔ Generating component files...
✔ Writing `./web/src/components/User/User.test.js`...
✔ Writing `./web/src/components/User/User.js`...
Done in 1.02s.
The component will export some jsx telling you where to find it.
const User = () => {
return (
<div>
<h2>{'User'}</h2>
<p>{'Find me in ./web/src/components/User/User.js'}</p>
</div>
)
}
export default User
generate dataMigration
Generate a data migration script.
yarn redwood generate dataMigration <name>
Creates a data migration script in api/db/dataMigrations
.
Arguments & Options | Description |
---|---|
name | Name of the data migration, prefixed with a timestamp at generation time |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
See the Data Migration docs.
Usage
See the Deploy docs.
generate dbAuth
Generate log in, sign up, forgot password and password reset pages for dbAuth
yarn redwood generate dbAuth
Arguments & Options | Description |
---|---|
--username-label | The label to give the username field on the auth forms, e.g. "Email". Defaults to "Username". If not specified you will be prompted |
--password-label | The label to give the password field on the auth forms, e.g. "Secret". Defaults to "Password". If not specified you will be prompted |
--webAuthn | Whether or not to add webAuthn support to the log in page. If not specified you will be prompted |
--rollback | Rollback changes if an error occurs [default: true] |
If you don't want to create your own log in, sign up, forgot password and password reset pages from scratch you can use this generator. The pages will be available at /login, /signup, /forgot-password, and /reset-password. Check the post-install instructions for one change you need to make to those pages: where to redirect the user to once their log in/sign up is successful.
If you'd rather create your own, you might want to start from the generated pages anyway as they'll contain the other code you need to actually submit the log in credentials or sign up fields to the server for processing.
generate directive
Generate a directive.
yarn redwood generate directive <name>
Arguments & Options | Description |
---|---|
name | Name of the directive |
--force, -f | Overwrite existing files |
--typescript, --ts | Generate TypeScript files (defaults to your projects language target) |
--type | Directive type [Choices: "validator", "transformer"] |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
See Redwood Directives.
Destroying
yarn redwood destroy directive <name>
Example
Generating a myDirective
directive using the interactive command:
yarn rw g directive myDirective
? What type of directive would you like to generate? › - Use arrow-keys. Return to submit.
❯ Validator - Implement a validation: throw an error if criteria not met to stop execution
Transformer - Modify values of fields or query responses
generate function
Generate a Function.
yarn redwood generate function <name>
Not to be confused with Javascript functions, Capital-F Functions are meant to be deployed to serverless endpoints like AWS Lambda.
Arguments & Options | Description |
---|---|
name | Name of the function |
--force, -f | Overwrite existing files |
--typescript, --ts | Generate TypeScript files Enabled by default if we detect your project is TypeScript |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
See the Custom Function how to.
Destroying
yarn redwood destroy function <name>
Example
Generating a user function:
~/redwood-app$ yarn redwood generate function user
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g function user
✔ Generating function files...
✔ Writing `./api/src/functions/user.js`...
Done in 16.04s.
Functions get passed context
which provides access to things like the current user:
export const handler = async (event, context) => {
return {
statusCode: 200,
body: `user function`,
}
}
Now if we run yarn redwood dev api
:
~/redwood-app$ yarn redwood dev api
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood dev api
$ /redwood-app/node_modules/.bin/dev-server
17:21:49 api | Listening on http://localhost:8911
17:21:49 api | Watching /home/dominic/projects/redwood/redwood-app/api
17:21:49 api |
17:21:49 api | Now serving
17:21:49 api |
17:21:49 api | ► http://localhost:8911/graphql/
17:21:49 api | ► http://localhost:8911/user/
generate layout
Generate a layout component.
yarn redwood generate layout <name>
Layouts wrap pages and help you stay DRY.
Arguments & Options | Description |
---|---|
name | Name of the layout |
--force, -f | Overwrite existing files |
--typescript, --ts | Generate TypeScript files Enabled by default if we detect your project is TypeScript |
--tests | Generate test files [default: true] |
--stories | Generate Storybook files [default: true] |
--skipLink | Generate a layout with a skip link [default: false] |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
See the Layouts section of the tutorial.
Destroying
yarn redwood destroy layout <name>
Example
Generating a user layout:
~/redwood-app$ yarn redwood generate layout user
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g layout user
✔ Generating layout files...
✔ Writing `./web/src/layouts/UserLayout/UserLayout.test.js`...
✔ Writing `./web/src/layouts/UserLayout/UserLayout.js`...
Done in 1.00s.
A layout will just export it's children:
const UserLayout = ({ children }) => {
return <>{children}</>
}
export default UserLayout
generate model
Generate a RedwoodRecord model.
yarn redwood generate model <name>
Arguments & Options | Description |
---|---|
name | Name of the model (in schema.prisma) |
--force, -f | Overwrite existing files |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
See the RedwoodRecord docs.
Example
~/redwood-app$ yarn redwood generate model User
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g model User
✔ Generating model file...
✔ Successfully wrote file `./api/src/models/User.js`
✔ Parsing datamodel, generating api/src/models/index.js...
Wrote /Users/rob/Sites/redwoodjs/redwood_record/.redwood/datamodel.json
Wrote /Users/rob/Sites/redwoodjs/redwood_record/api/src/models/index.js
✨ Done in 3.74s.
Generating a model automatically runs yarn rw record init
as well.
generate page
Generates a page component and updates the routes.
yarn redwood generate page <name> [path]
path
can include a route parameter which will be passed to the generated
page. The syntax for that is /path/to/page/{routeParam}/more/path
. You can
also specify the type of the route parameter if needed: {routeParam:Int}
. If
path
isn't specified, or if it's just a route parameter, it will be derived
from name
and the route parameter, if specified, will be added to the end.
This also updates Routes.js
in ./web/src
.
Arguments & Options | Description |
---|---|
name | Name of the page |
path | URL path to the page. Defaults to name |
--force, -f | Overwrite existing files |
--typescript, --ts | Generate TypeScript files Enabled by default if we detect your project is TypeScript |
--tests | Generate test files [default: true] |
--stories | Generate Storybook files [default: true] |
--rollback | Rollback changes if an error occurs [default: true] |
Destroying
yarn redwood destroy page <name> [path]
Examples
Generating a home page:
~/redwood-app$ yarn redwood generate page home /
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g page home /
✔ Generating page files...
✔ Writing `./web/src/pages/HomePage/HomePage.test.js`...
✔ Writing `./web/src/pages/HomePage/HomePage.js`...
✔ Updating routes file...
Done in 1.02s.
The page returns jsx telling you where to find it:
const HomePage = () => {
return (
<div>
<h1>HomePage</h1>
<p>Find me in ./web/src/pages/HomePage/HomePage.js</p>
</div>
)
}
export default HomePage
And the route is added to Routes.js
:
const Routes = () => {
return (
<Router>
<Route path="/" page={HomePage} name="home" />
<Route notfound page={NotFoundPage} />
</Router>
)
}
Generating a page to show quotes:
~/redwood-app$ yarn redwood generate page quote {id}
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g page quote {id}
✔ Generating page files...
✔ Writing `./web/src/pages/QuotePage/QuotePage.stories.js`...
✔ Writing `./web/src/pages/QuotePage/QuotePage.test.js`...
✔ Writing `./web/src/pages/QuotePage/QuotePage.js`...
✔ Updating routes file...
Done in 1.02s.
The generated page will get the route parameter as a prop:
import { Link, routes } from '@redwoodjs/router'
const QuotePage = ({ id }) => {
return (
<>
<h1>QuotePage</h1>
<p>Find me in "./web/src/pages/QuotePage/QuotePage.js"</p>
<p>
My default route is named "quote", link to me with `
<Link to={routes.quote({ id: 42 })}>Quote 42</Link>`
</p>
<p>The parameter passed to me is {id}</p>
</>
)
}
export default QuotePage
And the route is added to Routes.js
, with the route parameter added:
const Routes = () => {
return (
<Router>
<Route path="/quote/{id}" page={QuotePage} name="quote" />
<Route notfound page={NotFoundPage} />
</Router>
)
}
generate scaffold
Generate Pages, SDL, and Services files based on a given DB schema Model. Also accepts <path/model>
.
yarn redwood generate scaffold <model>
A scaffold quickly creates a CRUD for a model by generating the following files and corresponding routes:
- sdl
- service
- layout
- pages
- cells
- components
The content of the generated components is different from what you'd get by running them individually.
Arguments & Options | Description |
---|---|
model | Model to scaffold. You can also use <path/model> to nest files by type at the given path directory (or directories). For example, redwood g scaffold admin/post |
--docs | Use or set to true to generated comments in SDL to use in self-documentating your app's GraphQL API. See: Self-Documenting GraphQL API [default:false] |
--force, -f | Overwrite existing files |
--tailwind | Generate TailwindCSS version of scaffold.css (automatically set to true if TailwindCSS config exists) |
--typescript, --ts | Generate TypeScript files Enabled by default if we detect your project is TypeScript |
--rollback | Rollback changes if an error occurs [default: true] |
Usage
Nesting of Components and Pages
By default, redwood will nest the components and pages in a directory named as per the model. For example (where post
is the model):
yarn rw g scaffold post
will output the following files, with the components and pages nested in a Post
directory:
√ Generating scaffold files...
√ Successfully wrote file `./api/src/graphql/posts.sdl.js`
√ Successfully wrote file `./api/src/services/posts/posts.js`
√ Successfully wrote file `./api/src/services/posts/posts.scenarios.js`
√ Successfully wrote file `./api/src/services/posts/posts.test.js`
√ Successfully wrote file `./web/src/layouts/PostsLayout/PostsLayout.js`
√ Successfully wrote file `./web/src/pages/Post/EditPostPage/EditPostPage.js`
√ Successfully wrote file `./web/src/pages/Post/PostPage/PostPage.js`
√ Successfully wrote file `./web/src/pages/Post/PostsPage/PostsPage.js`
√ Successfully wrote file `./web/src/pages/Post/NewPostPage/NewPostPage.js`
√ Successfully wrote file `./web/src/components/Post/EditPostCell/EditPostCell.js`
√ Successfully wrote file `./web/src/components/Post/Post/Post.js`
√ Successfully wrote file `./web/src/components/Post/PostCell/PostCell.js`
√ Successfully wrote file `./web/src/components/Post/PostForm/PostForm.js`
√ Successfully wrote file `./web/src/components/Post/Posts/Posts.js`
√ Successfully wrote file `./web/src/components/Post/PostsCell/PostsCell.js`
√ Successfully wrote file `./web/src/components/Post/NewPost/NewPost.js`
√ Adding layout import...
√ Adding set import...
√ Adding scaffold routes...
√ Adding scaffold asset imports...
If it is not desired to nest the components and pages, then redwood provides an option that you can set to disable this for your project.
Add the following in your redwood.toml
file to disable the nesting of components and pages.
[generate]
nestScaffoldByModel = false
Setting the nestScaffoldByModel = true
will retain the default behavior, but is not required.
Notes:
- The nesting directory is always set to be PascalCase.
Namespacing Scaffolds
You can namespace your scaffolds by providing <path/model>
. The layout, pages, cells, and components will be nested in newly created dir(s). In addition, the nesting folder, based upon the model name, is still applied after the path for components and pages, unless turned off in the redwood.toml
as described above. For example, given a model user
, running yarn redwood generate scaffold admin/user
will nest the layout, pages, and components in a newly created Admin
directory created for each of the layouts
, pages
, and components
folders:
~/redwood-app$ yarn redwood generate scaffold admin/user
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/redwood g scaffold admin/user
✔ Generating scaffold files...
✔ Successfully wrote file `./api/src/graphql/users.sdl.js`
✔ Successfully wrote file `./api/src/services/users/users.js`
✔ Successfully wrote file `./api/src/services/users/users.scenarios.js`
✔ Successfully wrote file `./api/src/services/users/users.test.js`
✔ Successfully wrote file `./web/src/layouts/Admin/UsersLayout/UsersLayout.js`
✔ Successfully wrote file `./web/src/pages/Admin/User/EditUserPage/EditUserPage.js`
✔ Successfully wrote file `./web/src/pages/Admin/User/UserPage/UserPage.js`
✔ Successfully wrote file `./web/src/pages/Admin/User/UsersPage/UsersPage.js`
✔ Successfully wrote file `./web/src/pages/Admin/User/NewUserPage/NewUserPage.js`
✔ Successfully wrote file `./web/src/components/Admin/User/EditUserCell/EditUserCell.js`
✔ Successfully wrote file `./web/src/components/Admin/User/User/User.js`
✔ Successfully wrote file `./web/src/components/Admin/User/UserCell/UserCell.js`
✔ Successfully wrote file `./web/src/components/Admin/User/UserForm/UserForm.js`
✔ Successfully wrote file `./web/src/components/Admin/User/Users/Users.js`
✔ Successfully wrote file `./web/src/components/Admin/User/UsersCell/UsersCell.js`
✔ Successfully wrote file `./web/src/components/Admin/User/NewUser/NewUser.js`
✔ Adding layout import...
✔ Adding set import...
✔ Adding scaffold routes...
✔ Adding scaffold asset imports...
Done in 1.21s.
The routes wrapped in the Set
component with generated layout will be nested too:
const Routes = () => {
return (
<Router>
<Set wrap={UsersLayout}>
<Route path="/admin/users/new" page={AdminUserNewUserPage} name="adminNewUser" />
<Route path="/admin/users/{id:Int}/edit" page={AdminUserEditUserPage} name="adminEditUser" />
<Route path="/admin/users/{id:Int}" page={AdminUserUserPage} name="adminUser" />
<Route path="/admin/users" page={AdminUserUsersPage} name="adminUsers" />
</Set>
<Route notfound page={NotFoundPage} />
</Router>
)
}
Notes:
- Each directory in the scaffolded path is always set to be PascalCase.
- The scaffold path may be multiple directories deep.
Destroying
yarn redwood destroy scaffold <model>
Notes:
- You can also use
<path/model>
to destroy files that were generated under a scaffold path. For example,redwood d scaffold admin/post
- The destroy command will remove empty folders along the path, provided they are lower than the folder level of component, layout, page, etc.
- The destroy scaffold command will also follow the
nestScaffoldbyModel
setting in theredwood.toml
file. For example, if you have an existing scaffold that you wish to destroy, that does not have the pages and components nested by the model name, you can destroy the scaffold by temporarily setting:
[generate]
nestScaffoldByModel = false
Troubleshooting
If you see Error: Unknown type: ...
, don't panic!
It's a known limitation with GraphQL type generation.
It happens when you generate the SDL of a Prisma model that has relations before the SDL for the related model exists.
Please see Troubleshooting Generators for help.