# CedarJS

> CedarJS is the full-stack web framework designed to help you grow from side project to startup. CedarJS features an end-to-end development workflow that weaves together the best parts of React, GraphQL, Prisma, TypeScript, Vitest, and Storybook.


## Introduction

- [Introduction](/docs/introduction.md): CedarJS is the full-stack web framework designed to help you grow from side project to startup

## Quick Start

- [Quick Start](/docs/quick-start.md): CedarJS quick start

## Tutorial

- [Afterword](/docs/tutorial/afterword.md): You made it! Get yourself some ice cream or a slice of pie: you definitely deserve it.
- [What is CedarJS?](/docs/tutorial/chapter0/what-is-cedarjs.md): What follows is a high-level description of CedarJS and how it works. If you want to get right to the meat and potatoes of building something, skip ahead to Chapter 1.
- [Cedar File Structure](/docs/tutorial/chapter1/file-structure.md): Let's take a look at the files and directories that were created for us (config files have been excluded for now):
- [Our First Page](/docs/tutorial/chapter1/first-page.md): Let's give our users something to look at besides the (awesome) Cedar welcome page (thanks @alicelovescake!). We'll use the cedar command line tool to create a page for us:
- [Installation & Starting Development](/docs/tutorial/chapter1/installation.md): We'll use yarn (yarn is a requirement) to create the basic structure of our app:
- [Layouts](/docs/tutorial/chapter1/layouts.md): One way to solve the duplication of the ` would be to create a  component and include it in both HomePage and AboutPage. That works, but is there a better solution? Ideally there should only be one reference to the ` anywhere in our code.
- [Prerequisites](/docs/tutorial/chapter1/prerequisites.md): Cedar is composed of several popular libraries to make full-stack web development easier. Unfortunately, we can't teach all of those technologies from scratch during this tutorial, so we're going to assume you are already familiar with a few core concepts:
- [A Second Page and a Link](/docs/tutorial/chapter1/second-page.md): Let's create an "About" page for our blog so everyone knows about the geniuses behind this achievement. We'll create another page using cedar:
- [Cells](/docs/tutorial/chapter2/cells.md): The features we listed at the end of the last page (loading state, error messaging, blank slate text) are common in most web apps. We wanted to see if there was something we could do to make developers' lives easier when it comes to adding them to a typical component. We think we've come up with something to help. We call them Cells. Cells provide a simpler and more declarative approach to data fetching. (Read the full documentation about Cells.)
- [Getting Dynamic](/docs/tutorial/chapter2/getting-dynamic.md): <iframe
- [Routing Params](/docs/tutorial/chapter2/routing-params.md): Now that we have our homepage listing all the posts, let's build the "detail" page—a canonical URL that displays a single post. First we'll generate the page and route:
- [Side Quest: How Cedar Works with Data](/docs/tutorial/chapter2/side-quest.md): Cedar likes GraphQL. We think it's the API of the future. Our GraphQL implementation is built with Apollo (on the client) and GraphQL Yoga & Envelop (on the server). Remember in our file system layout, there was a directory api/src/functions and a single file in there, graphql.{js,ts}. If you were to deploy your app to a serverless stack (which we will do later in the Deployment section), that graphql.{js,ts} file would be compiled into a serverless function and would become the GraphQL API endpoint. Here's how a typical GraphQL query works its way through your app:
- [Building a Form](/docs/tutorial/chapter3/forms.md): <iframe
- [Saving Data](/docs/tutorial/chapter3/saving-data.md): Add a Contact Model
- [Authentication](/docs/tutorial/chapter4/authentication.md): An Admin Section
- [Deployment](/docs/tutorial/chapter4/deployment.md): The whole reason we started building Cedar was to make full-stack web apps easier to build and deploy on the Jamstack. While technically we already deployed in the previous section, it doesn't actually work yet. Let's fix that.
- [Our First Story](/docs/tutorial/chapter5/first-story.md): Let's say that on our homepage we only want to show the first couple of sentences in our blog post as a short summary, and then you'll have to click through to see the full post.
- [Our First Test](/docs/tutorial/chapter5/first-test.md): So if Storybook is the first phase of creating/updating a component, phase two must be confirming the functionality with a test. Let's add a test for our new summary feature.
- [Introduction to Storybook](/docs/tutorial/chapter5/storybook.md): Let's see what this Storybook thing is all about. Run this command to start up the Storybook server (you could stop your dev or test runners and then run this, or start another new terminal instance):
- [Introduction to Testing](/docs/tutorial/chapter5/testing.md): Let's run the test suite to make sure everything is working as expected (you can keep the dev server running and start this in a new terminal window):
- [Creating a Comment Form](/docs/tutorial/chapter6/comment-form.md): Let's generate a component to house our new comment form, build it out and integrate it via Storybook, then add some tests:
- [Adding Comments to the Schema](/docs/tutorial/chapter6/comments-schema.md): Let's take a moment to appreciate how amazing this is—we built, designed and tested a completely new component for our app, which displays data from an API call (which would pull that data from a database) without actually having to build any of that backend functionality! Cedar let us provide fake data to Storybook and Jest so we could get our component working.
- [Multiple Comments](/docs/tutorial/chapter6/multiple-comments.md): Our amazing blog posts will obviously garner a huge and passionate fanbase and we will very rarely have only a single comment. Let's work on displaying a list of comments.
- [Building a Component the Cedar Way](/docs/tutorial/chapter6/the-redwood-way.md): What's our blog missing? Comments. Let's add a simple comment engine so people can leave
- [Accessing currentUser in the API side](/docs/tutorial/chapter7/api-side-currentuser.md): As our blog has evolved into a multi-million dollar enterprise, we find ourselves so busy counting our money that we no longer have the time to write actual blog posts! Let's hire some authors to write them for us.
- [Role-Based Access Control (RBAC)](/docs/tutorial/chapter7/rbac.md): Imagine a few weeks in the future of our blog when every post hits the front page of the New York Times and we're getting hundreds of comments a day. We can't be expected to come up with quality content each day and moderate the endless stream of (mostly well-meaning) comments! We're going to need help. Let's hire a comment moderator to remove obvious spam and any comments that don't heap praise on our writing ability. You know, to help make the internet a better place.
- [CedarJS: The Tutorial](/docs/tutorial/foreword.md): Welcome to CedarJS! If you haven't yet, check out the CedarJS README to get a little background on why we created CedarJS and the problems it's meant to solve. CedarJS brings several existing technologies together for the first time into what we think is the future of database-backed single page applications.
- [Intermission](/docs/tutorial/intermission.md): Let's take a break! If you really went through the whole tutorial so far tsk, tsk!

## Reference

- [Accessibility (aka a11y)](/docs/accessibility.md): Accessibility is a core feature that's built-in
- [Assets and Files](/docs/assets-and-files.md): How to include assets—like images—in your app
- [Auth0 Authentication](/docs/auth/auth0.md): To get started, run the setup command:
- [Azure Active Directory Authentication](/docs/auth/azure.md): To get started, run the setup command:
- [Clerk Authentication](/docs/auth/clerk.md): If you set up Clerk a while ago, you may be using a deprecated authDecoder that's subject to rate limiting.
- [Custom Authentication](/docs/auth/custom.md): If Cedar doesn't officially integrate with the auth provider you want to use, you're not out of luck just yet: Cedar has an API you can use to integrate your auth provider of choice.
- [Self-hosted Authentication (dbAuth)](/docs/auth/dbauth.md): Cedar's own dbAuth provides several benefits:
- [Firebase Authentication](/docs/auth/firebase.md): To get started, run the setup command:
- [Netlify Identity Authentication](/docs/auth/netlify.md): To get started, run the setup command:
- [Supabase Authentication](/docs/auth/supabase.md): To get started, run the setup command:
- [SuperTokens Authentication](/docs/auth/supertokens.md): To get started, run the setup command:
- [Authentication](/docs/authentication.md): Set up an authentication provider
- [Background Jobs](/docs/background-jobs.md): No one likes waiting in line. This is especially true of your website: users don't want to wait for things to load that don't directly impact the task they're trying to accomplish. For example, sending a "welcome" email when a new user signs up. The process of sending the email could take as long or longer than the sum total of everything else that happens during that request. Why make the user wait for it? As long as they eventually get the email, everything is good.
- [Builds](/docs/builds.md): What happens when you build your app
- [Cells](/docs/cells.md): Declarative data fetching with Cells
- [Command Line Interface](/docs/cli-commands.md): A comprehensive reference of Cedar's CLI
- [Connection Pooling](/docs/connection-pooling.md): Scale your serverless functions
- [Contributing: Overview and Orientation](/docs/contributing.md): There's several ways to contribute to Cedar
- [Contributing: Step-by-Step Walkthrough (with Video)](/docs/contributing-walkthrough.md): Watch a video of the contributing process
- [CORS](/docs/cors.md): For when you need to worry about CORS
- [Create Cedar App](/docs/create-cedar-app.md): Instructions and usage examples for Create Cedar App
- [Data Migrations](/docs/data-migrations.md): Track changes to database content
- [Database Seeds](/docs/database-seeds.md): Seeds are data that are required in order for your app to function. Think of
- [Introduction to Baremetal](/docs/deploy/baremetal.md): Have complete control by hosting your own code
- [Deploy to Coherence](/docs/deploy/coherence.md): Serverful deploys on GCP or AWS via Coherence's full-lifecycle environment automation
- [Deploy to Edgio](/docs/deploy/edgio.md): ⚠️ Deprecated
- [Deploy to AWS with Flightcontrol](/docs/deploy/flightcontrol.md): How to deploy a Cedar app to AWS via Flightcontrol
- [Introduction to Deployment](/docs/deploy/introduction.md): Deploy to serverless or serverful providers
- [Deploy to Netlify](/docs/deploy/netlify.md): The serverless git deploy you know and love
- [Deploy to Render](/docs/deploy/render.md): Serverful deploys via Render's unified cloud
- [Deploy to AWS with Serverless Framework](/docs/deploy/serverless.md): Deploy to AWS with Serverless Framework
- [Universal Deploy](/docs/deploy/universal-deploy.md): Deploy anywhere with Universal Deploy
- [Deploy to Vercel](/docs/deploy/vercel.md): Deploy serverless in an instant with Vercel
- [Deployment](/docs/deployment/index.md)
- [Directives](/docs/directives.md): Customize GraphQL execution
- [Docker](/docs/docker.md): Cedar's Dockerfile
- [Environment Variables](/docs/environment-variables.md): How to use environment variables on the api and web sides
- [Forms](/docs/forms.md): Cedar makes building forms easier with helper components
- [GraphQL](/docs/graphql.md): GraphQL is a fundamental part of Cedar
- [GraphQL Caching](/docs/graphql/caching.md): Client Caching
- [Fragments](/docs/graphql/fragments.md): GraphQL fragments are reusable units of GraphQL queries that allow developers to define a set of fields that can be included in multiple queries. Fragments help improve code organization, reduce duplication, and make GraphQL queries more maintainable. They are particularly useful when you want to request the same set of fields on different parts of your data model or when you want to share query structures across multiple components or pages in your application.
- [gqlorm](/docs/graphql/gqlorm.md): Prisma-inspired GraphQL query builder with automatic schema generation and live queries
- [GraphQL](/docs/graphql/index.md)
- [Mocking GraphQL Requests](/docs/graphql/mocking-graphql-requests.md): Mock GraphQL requests to test your components
- [GraphQL Realtime (Subscriptions and Live Queries)](/docs/graphql/realtime.md): In GraphQL, there are two options for real-time updates: live queries and
- [Trusted Documents](/docs/graphql/trusted-documents.md): CedarJS can be setup to enforce persisted operations – alternatively called Trusted Documents.
- [Introduction to Servers](/docs/intro-to-servers.md): How to get started connecting to and deploying to a real server
- [Local Postgres Setup](/docs/local-postgres-setup.md): Setup a Postgres database to develop locally
- [Logger](/docs/logger.md): Use the Logger to observe your application
- [Mailer](/docs/mailer.md): CedarJS offers a convenient Mailer for sending emails to your users. It's not just about sending an email; delivery matters too. The way you deliver the feature requiring email is as significant as how you prepare the mail to be delivered by the infrastructure that sends emails over the internet.
- [Monitoring](/docs/monitoring/index.md)
- [Sentry](/docs/monitoring/sentry.md): Monitor errors, performance and more in your Cedar app using Sentry
- [Prerender](/docs/prerender.md): Render pages ahead of time
- [Project Configuration: Dev, Test, Build](/docs/project-configuration-dev-test-build.md): Advanced project configuration
- [Realtime (GraphQL Subscriptions and Live Queries)](/docs/realtime.md): Setup and implementation guide for GraphQL Subscriptions and Live Queries in Cedar apps
- [RedwoodRecord](/docs/redwoodrecord.md): An ORM with a natural interface
- [Reference](/docs/reference.md)
- [Router](/docs/router.md): About the built-in router for Cedar apps
- [Prisma Relations and Cedar's Generators](/docs/schema-relations.md): How Prisma relations work with scaffolds
- [Security](/docs/security.md): Build and deploy secure applications
- [SEO & <meta> tags](/docs/seo-head.md): Use meta tags to set page info for SEO
- [Server File](/docs/server-file.md): The entry point to CedarJS's api server is the server file at api/src/server.ts.
- [Serverless Functions (API Endpoints)](/docs/serverless-functions.md): Create, develop, and run serverless functions
- [Services](/docs/services.md): Put all your business logic in one place
- [Storybook](/docs/storybook.md): A component-driven development workflow
- [Studio](/docs/studio.md): CedarJS Studio is a package used during development to gain runtime insights into a project.
- [Testing](/docs/testing.md): A comprehensive reference for testing your app
- [Toast Notifications](/docs/toast-notifications.md): Toast notifications with react-hot-toast
- [TypeScript](/docs/typescript.md)
- [Generated Types](/docs/typescript/generated-types.md): A look at automatic type generation in Cedar
- [TypeScript in Cedar](/docs/typescript/introduction.md): Getting started & Core Concepts
- [TypeScript Strict Mode](/docs/typescript/strict-mode.md): TS Strict mode tips and tricks
- [Cedar Utility Types](/docs/typescript/utility-types.md): Utility types exposed by Cedar
- [Uploads & Storage](/docs/uploads.md): The storage and upload functionality is currently experimental.
- [Vite Configuration](/docs/vite-configuration.md): If you have to configure Vite, here's how
- [Webhooks](/docs/webhooks.md): Securely integrate third-party services

## How To

- [How To](/docs/how-to.md)
- [Build Dashboards Fast with Tremor](/docs/how-to/build-dashboards-fast-with-tremor.md): Learn how to build dashboards fast using the Tremor React library of data visualization components.
- [Creating a Background Worker with Exec and Faktory](/docs/how-to/creating-a-background-worker-with-exec-and-faktory.md): In this how to, we'll use Cedar's exec CLI command to create a background worker using Faktory.
- [Custom Function](/docs/how-to/custom-function.md): You may not have noticed, but when you're making GraphQL calls, you're actually calling a Function (not to be confused with a Javascript function) on the API side. Capital-F Functions are meant to be deployed to serverless providers like AWS Lambda. (We're using Netlify's nomenclature when we call them Functions.)
- [Setting up dbAuth to be passwordless](/docs/how-to/dbauth-passwordless.md): Security is really important. Sometimes you don't want to integrate with a third-party authentication services. Whatever the reason, Cedar has you covered with Cedar's dbAuth to authenticate users. This is a great option.
- [Disable API/Database](/docs/how-to/disable-api-database.md): Did you know you could deploy your Cedar app without an API layer or database? Maybe you have a simple static site that doesn't need any external data, or you only need to digest a simple JSON data structure that changes infrequently. So infrequently that changing the data can mean just editing a plain text file and deploying your site again.
- [File Uploads](/docs/how-to/file-uploads.md): As you've probably heard, Cedar thinks the future is serverless. This concept introduces some interesting problems you might not have had to worry about in the past. For example, where do files go when you upload them? There's no server! Like many tasks you may have done yourself in the past, this is another job that we can farm out to a third-party service.
- [GoTrue Auth](/docs/how-to/gotrue-auth.md): If you've completed the Authentication section of The Tutorial, you've seen how you can add the Netlify Identity Widget to your Cedar app in a matter of minutes.
- [Mocking GraphQL in Storybook](/docs/how-to/mocking-graphql-in-storybook.md): Pre-requisites
- [OAuth](/docs/how-to/oauth.md): If you're using an auth provider like Auth0, OAuth login to third party services (GitHub, Google, Facebook) is usually just a setting you can toggle on in your provider's dashboard. But if you're using dbAuth you'll only have username/password login to start. But, adding one or more OAuth clients isn't hard. This recipe will walk you through it from scratch, adding OAuth login via GitHub.
- [Pagination](/docs/how-to/pagination.md): This tutorial will show you one way to implement pagination in an app built using CedarJS. It builds on top of the tutorial and I'll assume you have a folder with the code from the tutorial that you can continue working on. (If you don't, you can clone this repo//github.com/thedavidprice/redwood-tutorial-test)
- [Role-based Access Control (RBAC)](/docs/how-to/role-based-access-control-rbac.md): Role-based access control (RBAC) in CedarJS aims to be a simple, manageable approach to access management. It adds control over who can access routes, see features, or invoke services or functions to the existing useAuth() hook on the web side and requireAuth() helper on the api side.
- [Self-hosting Cedar (Serverful)](/docs/how-to/self-hosting-redwood.md): This doc has been deprecated in favor of the Baremetal docs.
- [Sending Emails](/docs/how-to/sending-emails.md): Something a lot of applications will eventually have to do is send emails. To demonstrate how you can do that with CedarJS we're going to build a simple list of users and their email addresses, and allow you to trigger an email to them. We'll also include some auditing features, so you get a history of emails you sent to your users. The audit logs will be implemented by using one service from within another service &mdash; a powerful CedarJS feature.
- [Supabase Auth](/docs/how-to/supabase-auth.md): Let's call this how to a port of the Cedar GoTrue Auth how to to Supabase.
- [Testing Cedar in GitHub actions](/docs/how-to/test-in-github-actions.md): A good testing strategy is important for any project. Cedar offers a few different types of tests that you can write to make your app more robust—to ship with confidence. In this guide we'll focus on how to run your Cedar tests in GitHub Actions, so you can test your app on every push or pull request.
- [Using a Third Party API](/docs/how-to/using-a-third-party-api.md): The time will come when you'll need data from a source you don't own. This how to will present the scenario of accessing a third party's API from a Cedar app. We'll show an example of accessing an API from both the client side and the server side.
- [Using nvm](/docs/how-to/using-nvm.md): What is nvm?
- [Using Ona](/docs/how-to/using-ona.md): What is Ona?
- [Using Yarn](/docs/how-to/using-yarn.md): What is Yarn?
- [Windows Development Setup](/docs/how-to/windows-development-setup.md): This guide provides a simple setup to start developing a CedarJS project on Windows. Many setup options exist, but this aims to make getting started as easy as possible. This is the recommended setup unless you have experience with some other shell, like PowerShell.

## Upgrade Guides

- [Upgrade Guides](/docs/upgrade-guides.md)
- [Migrating from RedwoodJS to CedarJS](/docs/upgrade-guides/redwood-to-cedar.md): How to switch from RedwoodJS/RedwoodGraphQL to CedarJS
- [Background Jobs](/docs/upgrade-guides/v8.md): Getting started & Core Concepts

## Docs

- [App Configuration: cedar.toml](/docs/app-configuration-cedar-toml.md): Configure your app with cedar.toml
- [Mailer](/docs/mailer/index.md)
- [Mailer - Handler - Resend](/docs/mailer/resend.md): Prerequisites