DEV Community

Cover image for Full stack Starterkit - GraphQL-first boilerplate that scales
Tomek Poniatowicz for GraphQL Editor

Posted on • Originally published at blog.graphqleditor.com

Full stack Starterkit - GraphQL-first boilerplate that scales

Configuration of a boilerplate for your newly started projects is a tedious, repeatable job ... which you can forget about thanks to @karanpratapsingh, who has made a full-stack boilerplate following some of the best patterns & practices learned from most-popular codebase and developers he has worked with. All that to make it possible to bootstrap your GraphQL-first app in React with just a couple clicks.

No matter if are starting a simple personal project or enterprise app you are getting a scalable full-stack starter kit following good architecture patterns, which is super significant as your project grows.

Tech stack

  • React (with TypeScript) - the frontend part is powered by React with TypeScript, a JavaScript extension providing types that would save you much time catching errors.
  • GraphQL (with Apollo) - as already mentioned at the beginning, this is a GraphQL-first approach using most popular GraphQL implementation - Apollo,
  • Prisma - Prisma is an open-source modern ORM that makes database access easy with an auto-generated query builder. In this starterkit its begin used for PostgreSQL but the out is open for suggestions so if you would see other ORM or drivers here just submit a PR,
  • Jest - Jest is a JavaScript-based Testing Framework working fine with numerous languages and frameworks, among others, React & TypeScript. The boilerplate comes with sample tests that are easily extendable for future modules as simplicity is one of the Jest's top principles.

Technological stack of Full Stack Startekit

Project architecture

The library is using yarn workspaces which makes it easier to split the monorepo into packages responsible for a database connection, GraphQL part etc. It makes it really helpful if you choose to split GraphQL into its own set of microservices. The packages are organized as below:

Project architecture

Source: karanpratapsingh/fullstack-starterkit

Getting started

If you are ready to start your next GraphQL+React project begin with creating .env files at both backend/.env as well as web/.env following the .env.template files located in those directories. The next step would be installing dependencies. The author recommends using yarn instead of npm as this boilerplate uses yarn workspaces heavily. To run backend & frontend use:

yarn start:backend
yarn start:web
Enter fullscreen mode Exit fullscreen mode

but make sure to provide your own DATABASE_URL rather than default one from .env.template as it might be changed or deleted anytime, as mentioned by the library creator. If you like the idea of GraphQL-first full-stack boilerplate please show its maintainers some love and leave a star :)


Speed up your GraphQL schema development

GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!

GraphQL Editor

Top comments (7)

Collapse
 
speshov profile image
SPeshov

Wiiii πŸ”₯ need to check this out - live the file structure

Collapse
 
speshov profile image
SPeshov

Consider making it a template :)

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Hey Tomek thanks for the shoutout πŸ˜ƒ

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool its another reminder that I should relearn Typescript and GraphQL and this time use them in more real projects to maintain the knowledge. πŸ˜…

Collapse
 
alexandrecoin profile image
Alexandre C.

Will definitely checkout. Thanks !

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Thanks 😊

Collapse
 
huncyrus profile image
huncyrus

Why are components and custom hooks placed outside of the src? Why decided to do so instead of the classical way?