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.
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:
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
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!
Top comments (7)
Wiiii π₯ need to check this out - live the file structure
Consider making it a template :)
Hey Tomek thanks for the shoutout π
Cool its another reminder that I should relearn Typescript and GraphQL and this time use them in more real projects to maintain the knowledge. π
Will definitely checkout. Thanks !
Thanks π
Why are components and custom hooks placed outside of the src? Why decided to do so instead of the classical way?