DEV Community

Cover image for Fullstack template for React GraphQL project
Tomek Poniatowicz for GraphQL Editor

Posted on • Edited on

Fullstack template for React GraphQL project

In the previous week, we looked into a basic GraphQL Server implementation in TypeScript. In this episode of ...

GraphQL Server in under 5 minutes series

... we will take a look at the full-stack template of React GraphQL app.

React Apollo GraphQL

The Fullstack React GraphQL Boilerplate repo contains minimal, basic & advanced boilerplates, each allowing to bootstrap a GraphQL server in no time, whether you want to build a simple "Hello world!" or a fully-featured enterprise app.

Minimal Basic Advanced
Scalable GraphQL server: The server uses graphql-yoga which is based on Apollo Server & Express ✔️ ✔️ ✔️
Pre-configured Apollo Client: The project comes with a preconfigured setup for Apollo Client ✔️ ✔️ ✔️
GraphQL database: Includes GraphQL database binding to Prisma (running on MySQL) ✔️ ✔️
Tooling: Out-of-the-box support for GraphQL Playground & query performance tracing ✔️ ✔️
Extensible: Simple and flexible data model – easy to adjust and extend ✔️ ✔️
No configuration overhead: Preconfigured graphql-config setup ✔️ ✔️

Getting started

The minimal boilerplate is only two commands away. Just go for:

npm install -g graphql-cli
graphql create my-app
Enter fullscreen mode Exit fullscreen mode

Then yarn start or npm run start will start your basic GraphQL server on a localhost:4000. Basic & advanced setup requires a couple more steps.

After installing GraphQL CLI, bootstrap GraphQL server with:

graphql create my-app
Enter fullscreen mode Exit fullscreen mode

when prompted pick the desired boilerplate & deploy the Prisma service to a _public cluster_, then navigate into server directory of your new project and start it:

cd my-app/server

yarn dev
Enter fullscreen mode Exit fullscreen mode

this will run a server on localhost:4000, along with GraphQL Playground; open new terminal tab & navigate back to my-app, then run the app

cd ..
yarn start
Enter fullscreen mode Exit fullscreen mode

Read more about the structure of the project or available commands in the react-fullstack-graphql repo.

Source: react-fullstack-graphql

Top comments (4)

Collapse
 
wtrocki profile image
Wojtek Trocki

Hi Tomek.

I really love to see this template. It is really powerful and sorts out many problems.
Do you mind if I will integrate this template into graphback.dev

This project will allow people to design their schema and generate resolvers and other useful stuff on top of it. So then people can get server running with their business object in under 2 minutes :) and have 3 minutes for coffee :D

Collapse
 
js2me profile image
Sergey S. Volkov • Edited

See that error:

Whats wrong?

Collapse
 
tomekponiat profile image
Tomek Poniatowicz • Edited

My bad, apparently it got changed. Just go for:

graphql create my-app

and pick boilerplate you want to use when prompted

Collapse
 
js2me profile image
Sergey S. Volkov

Yeah, now it works, thanks :)