Git Product home page Git Product logo

next-react-graphql-apollo-hooks's Introduction

High performance Next + React + GraphQL starter kit

The purpose of this starter kit is not to be complete solution, but introduction for creating high performance websites with Next.js, React and GraphQL. We use this repository for new projects at Atheros Intelligence and as the repository for our articles at GraphQL Mastery

  • Clone the repository with git clone [email protected]:atherosai/react-next-apollo-graphql.git
  • To preserve secure dependencies in package-lock.json use npm ci to install packages

Node.js version

Even though that the starter kit should work with older Node versions, I would suggest to use latest Node LTS version. In package.json we require npm and node version to be higher.

 "engines": {
    "node": ">=10.0.0",
    "npm": ">6"
  },

Technologies

  • Next.js
  • React
  • GraphQL (Apollo server)
  • Apollo client
  • Node.js

Environment configuration

The solution for environment variables is built using dotnev library and two environment variables. Well known NODE_ENV variable can be set as development or production and our CUSTOM_ENV, which defines the environment. This can be your staging, production, local environment or even your build server. These two variables define the name of .env file in /secrets folder that will be used. If we would like to for example define the config for our staging environment we would create the file called /secrets/production-staging.env and place all the environment variables there. The example for such a file can be for example the following that we can use for development

NODE_ENV=development
CUSTOM_ENV=local
PORT=3000
API_URL=http://localhost:3000/graphql
HOST=http://localhost:3000

Security and audit

You can run security audit on dependencies with. Be sure that you use package-lock.json in our repository.

npm audit

next-react-graphql-apollo-hooks's People

Contributors

a7v8x avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.