Zurück zum Ranking

the-road-to-graphql/fullstack-apollo-express-postgresql-boilerplate

JavaScriptroadtoreact.com

💥 A sophisticated GraphQL with Apollo, Express and PostgreSQL boilerplate project.

reactreactjsreact-apolloreact-apollo-graphqlapollographqlapollo-clientapollo-serverapollo-server-expressauthenticationauthorizationboilerplatefullstack
Sterne-Wachstum
Sterne
1.2k
Forks
260
Wochenwachstum
Issues
27
5001k
Mai 2018Jan. 2021Okt. 2023Juli 2026
Artefaktenpmnpm install fullstack-apollo-express-postgresql-boilerplate
README

fullstack-apollo-express-postgresql-boilerplate

Build Status Slack Greenkeeper badge

A full-fledged Apollo Server with Apollo Client starter project with React and Express. Read more about it in this tutorial to build it yourself.

Family of universal fullstack repositories:

Server Applications:

Client Applications:

Features of Client + Server

  • React (create-react-app) with Apollo Client
    • Queries, Mutations, Subscriptions
  • Node.js with Express and Apollo Server
    • cursor-based Pagination
  • PostgreSQL Database with Sequelize
    • entities: users, messages
  • Authentication
    • powered by JWT and local storage
    • Sign Up, Sign In, Sign Out
  • Authorization
    • protected endpoint (e.g. verify valid session)
    • protected resolvers (e.g. e.g. session-based, role-based)
    • protected routes (e.g. session-based, role-based)
  • performance optimizations
    • example of using Facebook's dataloader
  • E2E testing

Installation

  • git clone git@github.com:the-road-to-graphql/fullstack-apollo-express-postgresql-boilerplate.git
  • cd fullstack-apollo-express-postgresql-boilerplate
  • touch .env
  • npm install
  • fill out .env file (see below)
  • start PostgreSQL database
  • npm start
  • visit http://localhost:8000 for GraphQL playground

.env file

Since this boilerplate project is using PostgreSQL, you have to install it for your machine and get a database up and running. You find everything for the set up over here: Setup PostgreSQL with Sequelize in Express Tutorial. After you have created a database and a database user, you can fill out the environment variables in the server/.env file.

DATABASE=mydatabase

DATABASE_USER=postgres
DATABASE_PASSWORD=postgres

SECRET=asdlplplfwfwefwekwself.2342.dawasdq

The SECRET is just a random string for your authentication. Keep all these information secure by adding the .env file to your .gitignore file. No third-party should have access to this information.

Testing

  • adjust test:run-server npm script with TEST_DATABASE environment variable in package.json to match your testing database name
    • to match it from package.json: createdb mytestdatabase with psql
  • one terminal: npm run test:run-server
  • second terminal: npm run test:execute-test

Want to learn more about React + GraphQL + Apollo?

Ähnliche Repositories
freeCodeCamp/freeCodeCamp

freeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.

TypeScriptnpmBSD 3-Clause "New" or "Revised" Licenselearn-to-codenonprofits
contribute.freecodecamp.org
452.2k45.6k
react/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
246.6k51.3k
facebook/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
233k47.8k
vercel/next.js

The React Framework

JavaScriptnpmMIT Licensereactserver-rendering
nextjs.org
141k31.5k
react/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
126.2k25.2k
facebook/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
120.9k24.5k
shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

TypeScriptnpmMIT Licensecomponentsnextjs
ui.shadcn.com
119.4k9.5k
justjavac/free-programming-books-zh_CN

:books: 免费的计算机编程类中文书籍,欢迎投稿

GNU General Public License v3.0pythonjavascript
weibo.com/justjavac
117.7k28.2k
nextlevelbuilder/ui-ux-pro-max-skill

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

PythonPyPIMIT Licenseai-skillsantigravity
uupm.cc
108.2k11.5k
react/create-react-app

Set up a modern web app by running one command.

JavaScriptnpmMIT Licensereactzero-configuration
create-react-app.dev
103.3k26.9k
facebook/create-react-app

Set up a modern web app by running one command.

JavaScriptnpmMIT Licensereactzero-configuration
create-react-app.dev
103.1k27k
ant-design/ant-design

An enterprise-class UI design language and React UI library

TypeScriptnpmMIT Licensereactui-kit
ant.design
98.8k54.7k