Redwood File Structure
Let's take a look at the files and directories that were created for us (config files have been excluded for now):

At the top level we have two directories, api
and web
. Redwood separates the backend (api
) and frontend (web
) concerns into their own paths in the codebase. (Yarn refers to these as "workspaces". In Redwood, we refer to them as "sides.") When you add packages going forward you'll need to specify which workspace they should go in. For example (don't run these commands, we're just looking at the syntax):
yarn workspace web add marked
yarn workspace api add better-fs
The /api Directory
Within api
there are two directories:
prisma
contains the plumbing for the database:schema.prisma
contains the database schema (tables and columns)seeds.js
is used to populate your database with any data that needs to exist for your app to run at all (maybe an admin user or site configuration).
After we add our first database table there will also be a SQLite database file named
dev.db
and a directory calledmigrations
created for us.migrations
contains the files that act as snapshots of the database schema changing over time.src
contains all other backend code.api/src
contains three more directories:functions
will contain any lambda functions your app needs in addition to thegraphql.js
file auto-generated by Redwood. This file is required to use the GraphQL API.graphql
contains your GraphQL schema written in a Schema Definition Language (the files will end in.sdl.js
).services
contains business logic related to your data. When you're querying or mutating data for GraphQL, that code ends up here, but in a format that's resuable in other places in your application.
That's it for the backend.
The /web Directory
src
contains several subdirectories:components
contain your traditional React components as well as Redwood Cells (more about those soon).layouts
contain HTML/components that wrap your content and are shared across Pages.pages
contain components and are optionally wrapped inside Layouts and are the "landing page" for a given URL (a URL like/articles/hello-world
will map to one page and/contact-us
will map to another). There are two pages included in a new app:NotFoundPage.js
will be served when no other route is found (seeRoutes.js
below).FatalErrorPage.js
will be rendered when there is an uncaught error that can't be recovered from and would otherwise cause our application to really blow up (normally rendering a blank page).
public
contains assets not used by React components (they will be copied over unmodified to the final app's root directory):favicon.png
is the icon that goes in a browser tab when your page is open (apps start with the RedwoodJS logo).robots.txt
can be used to control what web indexers are allowed to do.README.md
explains how, and when, to use thepublic
folder for static assets. It also covers best practices for importing assets within components via Webpack. You can read it on Github here.
index.css
is a generic place to put your CSS, but there are many options.index.html
is the standard React starting point for our app.index.js
the bootstraping code to get our Redwood app up and running.Routes.js
the route definitions for our app which map a URL to a Page.