docs/1.8/03-Tutorials2/08-Bootstrapping-Boilerplates/03-React-(Fullstack).md
In this quickstart tutorial, you'll learn how to build a fullstack app with React, GraphQL and Node.js. You will use graphql-yoga as your web server. The server is connected to a Prisma database API using prisma-binding.
To learn more about GraphQL server development and the required architecture, read the corresponding Introduction chapters.
The code for this project can be found as a GraphQL boilerplate project on GitHub.
The first thing you need to do is install the command line tools you'll need for this tutorial:
prisma is used continuously to manage your Prisma database APIgraphql-cli is used initially to bootstrap the file structure for your fullstack app with graphql createnpm install -g prisma graphql-cli
Now you can use graphql create to bootstrap your project. With the following command, you name your project my-app and choose to use the react-fullstack-basic boilerplate:
graphql create my-app --boilerplate react-fullstack-basic
cd my-app
Feel free to get familiar with the code. The app contains the following React components:
Post: Renders a single post itemListPage: Renders a list of post itemsCreatePage: Allows to create a new post itemDetailPage: Renders the details of a post item and allows to update and delete itHere is an overview of the generated files in the server directory and their roles in your server setup:
/server
/server/.graphqlconfig.yml GraphQL configuration file containing the endpoints and schema configuration. Used by the graphql-cli and the GraphQL Playground. See graphql-config for more information./server/database
/server/database/prisma.yml: The root configuration file for your database API (documentation)./server/database/datamodel.graphql contains the data model that you define for the project (written in SDL). We'll discuss this next./server/database/seed.graphql: Contains mutations to seed the database with some initial data./server/src
/server/src/schema.graphql defines your application schema. It contains the GraphQL API that you want to expose to your client applications./server/src/generated/prisma.graphql defines the Prisma schema. It contains the definition of the CRUD API for the types in your data model and is generated based on your datamodel.graphql. You should never edit this file manually, but introduce changes only by altering datamodel.graphql and run prisma deploy./server/src/index.js is the entry point of your server, pulling everything together and starting the GraphQLServer from graphql-yoga.Most important for you at this point are database/datamodel.graphql and src/schema.graphql.
database/datamodel.graphql is used to define your data model. This data model is the foundation for the API that's defined in src/schema.graphql and exposed to your React application.
Here is what the data model looks like:
type Post {
id: ID! @unique
isPublished: Boolean! @default(value: "false")
title: String!
text: String!
}
Based on this data model Prisma generates the Prisma database schema, a GraphQL schema that defines a CRUD API for the types in your data model. In your case, this is only the Post type. The database schema is stored in database/schema.generated.graphql and will be updated every time you deploy changes to your data model.
You're now set to start the server! 🚀
Execute the start script that's define in server/package.json:
yarn start
The server is now running on http://localhost:4000.
The last thing to do is actually launching the application 🚀
<Instruction>Navigate back into the root directory of the project and run the app (note that you need to open another tab/window in the terminal because the current tab is used by the GraphQL server):
cd ..
yarn start # open http://localhost:3000 in your browser