Awesome Open Source
Awesome Open Source

fullstack-apollo-express-mongodb-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.

Further Readings:

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
  • MongoDB Database with Mongoose
    • 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 [email protected]:the-road-to-graphql/fullstack-apollo-express-mongodb-boilerplate.git
  • cd fullstack-apollo-express-mongodb-boilerplate
  • touch .env
  • npm install
  • fill out .env file (see below)
  • npm start
  • start MongoDB
  • visit http://localhost:8000 for GraphQL playground

.env file

Since this boilerplate project is using MongoDB, 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 MongoDB with Mongoose in Express Tutorial [TODO: write setup tutorial]. After you have created a MongoDB database, you can fill out the environment variables in the server/.env file.

SECRET=asdlplplfwfwefwekwself.2342.dawasdq

DATABASE_URL=mongodb://localhost:27017/mydatabase

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_URL environment variable in package.json to match your testing database name
  • one terminal: npm run test:run-server
  • second terminal: npm run test:execute-test

Want to learn more about React + GraphQL + Apollo?

Alternatives To Fullstack Apollo Express Mongodb Boilerplate
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,157,785
Reactjs (175,361
Express (32,883
Mongodb (32,068
Authentication (27,097
Tutorials (23,822
Graphql (16,393
Mongo (7,252
Authorization (5,947
Apollo (4,497
Starter Kit (4,023
Full Stack (3,911
Apollo Client (1,124
Apollo Server (734
Mongodb Database (307
React Apollo (145
Apollo Server Express (132
React Apollo Graphql (8