# 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):
├── api │ ├── db │ │ ├── schema.prisma │ │ └── seed.js │ └── src │ ├── functions │ │ └── graphql.js │ ├── graphql │ ├── lib │ │ └── db.js │ └── services └── web ├── public │ ├── README.md │ ├── favicon.png │ └── robots.txt └── src ├── Routes.js ├── components ├── index.css ├── index.html ├── App.js ├── layouts └── pages ├── FatalErrorPage │ └── FatalErrorPage.js └── NotFoundPage └── NotFoundPage.js
At the top level we have two directories,
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
api there are two directories:
dbcontains the plumbing for the database:
schema.prismacontains the database schema (tables and columns)
seed.jsis 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.dband a directory called
migrationscreated for us.
migrationscontains the files that act as snapshots of the database schema changing over time.
srccontains all other backend code.
api/srccontains four more directories:
functionswill contain any lambda functions your app needs in addition to the
graphql.jsfile auto-generated by Redwood. This file is required to use the GraphQL API.
graphqlcontains your GraphQL schema written in a Schema Definition Language (the files will end in
libcontains one file,
db.js, which instantiates the Prisma database client. You are free to send additional options, if necessary. You can use this directory for other code related to the API side that doesn't fit in
servicescontains 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 reusable in other places in your application.
That's it for the backend.
# The /web Directory
srccontains several subdirectories:
componentscontain your traditional React components as well as Redwood Cells (more about those soon).
layoutscontain HTML/components that wrap your content and are shared across Pages.
pagescontain components and are optionally wrapped inside Layouts and are the "landing page" for a given URL (a URL like
/articles/hello-worldwill map to one page and
/contact-uswill map to another). There are two pages included in a new app:
NotFoundPage.jswill be served when no other route is found (see
FatalErrorPage.jswill 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).
index.cssis a generic place to put your CSS, but there are many options.
index.htmlis the standard React starting point for our app.
App.jsthe application component that wraps your entire app
Routes.jsthe route definitions for our app which map a URL to a Page.
publiccontains assets not used by React components (they will be copied over unmodified to the final app's root directory):
favicon.pngis the icon that goes in a browser tab when your page is open (apps start with the RedwoodJS logo).
robots.txtcan be used to control what web indexers are allowed to do.
README.mdexplains how, and when, to use the
publicfolder for static assets. It also covers best practices for importing assets within components via Webpack. You can also read this README.md file on GitHub.
Note that there's no
web/src/index.jswhere you'll see a traditional
React.render(<App />). Redwood handles this internally for you, but if you need to get inside of that process somewhere to add custom code, you can generate the
index.jsfile with the following command:
yarn redwood setup custom-web-index
Redwood will then use that
index.jsinstead of it's internal version!