Next.js React GraphQL Express Apollo Boilerplate

Performance oriented Next.js and React.js application boilerplate with Typescript, Express.js, GraphQL, Apollo and Sass

Table of Contents

• Table of Contents
• Installation
  • Step 1: Set up the Development Environment
  • Step 2: Set up Env
  • Step 3: Install dependencies
  • Step 4: Running Locally
  • Step 5: Deployment
• Features
  • GraphQL
  • Express
  • Next.js
  • React
  • React Apollo
  • Typescript
  • JsonWebToken
  • TSLint
  • Husky
  • Bluebird
  • Cors
• Contributing
  • Step 1
  • Step 2
  • Step 3
• Support
• Donations
• License

Installation

Clone this repo to your local machine using https://github.com/garganurag893/Next.js_GraphQL_Express_Apollo_Boilerplate

Step 1: Set up the Development Environment

You need to set up your development environment before you can do anything.

Install Node.js and NPM

• on OSX use homebrew brew install node
• on Windows use chocolatey choco install nodejs

Install yarn globally

yarn global add yarn

NOTE : If you work with a mac, we recommend to use homebrew for the installation.

Install MongoDB Once Brew is installed, it is time to install MongoDB by issuing the following command on the Terminal:

brew install mongodb

Step 2: Set up Env

Open .env file in a editor and add your configuration for database and other required fields.

NODE_ENV = development;
JWT_SECRET = "somesuperkey";
DB =
  "mongodb://localhost/nextjs_graphql_express_apollo_boilerplate_development";
PORT = 4020;

Step 3: Install dependencies

Navigate to the server, nextjs and react app directories and run the below command:

$ yarn

Step 4: Running Locally

Navigate to the Express Server directory and run the below command in your terminal :

$ yarn start

Now navigate to Nextjs App directory and run the below command in your terminal :

$ yarn dev

Now navigate to React App directory and run the below command in your terminal :

$ yarn start

Step 5: Deployment

To deploy with ZEIT Now through your terminal, you will need to install Now CLI, a frequently updated, and open-source, command-line interface.

You can get Now CLI from either npm or Yarn. Using npm, run the following command from your terminal:

$ npm i -g now

To verify that you have installed Now CLI, try running now help from your terminal.

With Now CLI installed, you can now login using the following command:

$ now login

Navigate to Nextjs App directory and run the below commands in order :

$ now

Once deployed, you will get a preview URL that is assigned on each deployment to share the latest changes under the same address.

Features

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Next.js

Next.js extends React to provide a powerful method for loading a page's initial data, no matter where it is coming from. With a single place to prepopulate page context, server-side rendering with Next.js seamlessly integrates with any existing data-fetching strategy.

React

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

React Apollo

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to do server-side rendering.

Typescript

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript.

JsonWebToken

JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.

TSLint

TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors

Husky

Husky can prevent bad git commit, git push and more 🐶 woof!

Bluebird

Bluebird is a fully featured promise library with focus on innovative features and performance.

Cors

Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served

Contributing

To get started...

Step 1

• Option 1

  • 🍴 Fork this repo!

• Option 2

  • 👯 Clone this repo to your local machine using https://github.com/garganurag893/Next.js_GraphQL_Express_Apollo_Boilerplate

Step 2

• HACK AWAY! 🔨🔨🔨

Step 3

• 🔃 Create a new pull request using https://github.com/garganurag893/Next.js_GraphQL_Express_Apollo_Boilerplate.

Support

Reach out to me at one of the following places!

• Twitter at https://twitter.com/AnuragG94634191
• Medium at https://medium.com/@garganurag893
• Instagram at https://www.instagram.com/the_only_anurag/
• Email at [email protected]

Donations

If this boilerplate help save your valuable time and you feel to help me donate now to help me create more amazing stuff.

+919468026011

License

• MIT license
• Copyright 2020 © Anurag Garg.