Example application written using Redwood that leverages Redwood's Storybook integration to highlight Redwood's rich feature set. This includes features such as Layout, and Cells.
To start an ephemeral developer environment and see RedwoodJS in action, click the following button:
If you prefer to set the project up on your local computer, please continue with the following instructions.
RedwoodJS requires Node.js (>=14.x <=16.x) and Yarn (>=1.15).
Source: https://redwoodjs.com/docs/quick-start
Below is a script to help get you started. Each step is documented in more detail.
git clone https://github.com/redwoodjs/example-storybook.git `# clone the repository from GitHub` \
&& cd "$(basename "$_" .git)" `# change directories into the newly cloned repository` \
&& yarn install `# install dependencies` \
&& yarn redwood storybook `# start Redwood's storybook server`note: That should have brought up the browser automatically. If not, by default storybook is running at http://localhost:7910/
Redwood's tutorial has a brief overview of the file structure to help get you oriented.
If you happen to be unfamiliar with the structure, don't worry about trying to memorize it right now. We'll touch upon many of these files and directories as we go.
This repositories contains example stories for cells, pages, layouts, and components
cellsare a declarative approach to data fetching.componentscontain your traditional React components as well as Redwood Cells.layoutscontain HTML/components that wrap your content and are shared across Pages.pagescontain components and are optionally wrapped inside Layouts that can be thought of as the "landing page" for a given URL (e.g. a URL like/articles/hello-worldwill map to one page and/contact-uswill map to another).
- Create a Prisma model
- Scaffold create read update delete (CRUD) user interface (UI)
- Run development server (
yarn redwood dev) to compare dynamic, full-stack site with SB mocks
- Tutorial: getting started and complete overview guide.
- Docs: using the Redwood Router, handling assets and files, list of command-line tools, and more.
- Redwood Community: get help, share tips and tricks, and collaborate on everything about RedwoodJS.
We use Yarn as our package manager. To get the dependencies installed, just do this in the root directory:
yarn install
yarn redwood dev
Your browser should open automatically to http://localhost:8910 to see the web app. Lambda functions run on http://localhost:8911 and are also proxied to http://localhost:8910/.redwood/functions/*.
Redwood comes bundled with a lightweight wrapper around the Prisma CLI, which includes Prisma Studio, a tool for managing your database.
yarn rw prisma studio
A new browser should open to http://localhost:5555 and now you can view and manipulate data in the database directly!