https://github.com/developer239/react-apollo-graphql

JavaScript meets web. React in tandem with Apollo. Minimal implementation that will help you get started with GraphQL.
https://github.com/developer239/react-apollo-graphql

Last synced: 3 months ago
JSON representation

JavaScript meets web. React in tandem with Apollo. Minimal implementation that will help you get started with GraphQL.

• Host: GitHub
• URL: https://github.com/developer239/react-apollo-graphql
• Owner: developer239
• Archived: true
• Created: 2017-03-08T19:32:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-08-03T20:08:25.000Z (almost 4 years ago)
• Last Synced: 2024-11-07T12:52:23.746Z (8 months ago)
• Language: TypeScript
• Homepage: https://react-apollo-graphql.herokuapp.com/
• Size: 8.02 MB
• Stars: 123
• Watchers: 7
• Forks: 26
• Open Issues: 32
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Actions Status](https://github.com/developer239/react-apollo-graphql/workflows/CI/badge.svg)](https://github.com/developer239/react-apollo-graphql/actions?query=workflow%3A%22CI%22)

[![Test Coverage](https://api.codeclimate.com/v1/badges/8b605e0fb1af6dc86063/test_coverage)](https://codeclimate.com/github/developer239/react-apollo-graphql/test_coverage)

[![Maintainability](https://api.codeclimate.com/v1/badges/8b605e0fb1af6dc86063/maintainability)](https://codeclimate.com/github/developer239/react-apollo-graphql/maintainability)

[![Dependabot](https://badgen.net/dependabot/developer239/react-apollo-graphql/84358471?icon=dependabot)](https://dependabot.com/)

[![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/developer239/react-apollo-graphql&style=flat)](https://mergify.io)

## React Apollo GraphQL [from scratch]

Today you have basically two ways how to start new React application: [NextJs](https://github.com/zeit/next.js/) or [Create React App](https://github.com/facebook/create-react-app). 

However, there is no fun in using other peoples frameworks so I created this application from scratch. If you ever wondered how to set up your own boilerplate. This is a good place to start.

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

## Demo

You can try the application [here](https://react-apollo-graphql.herokuapp.com) (it might take a while before the free server wakes up)

 

📘 Backend API is running [here](https://node-type-orm-graphql.herokuapp.com/graphql). You can find the source code of the backend application [here](https://github.com/developer239/node-type-orm-graphql).

# Development

System Dependencies:

1. `brew install node`

2. `brew install yarn`

Run development server:

1. `yarn install`

2. `yarn apollo:generate-types:watch`

3. `yarn watch`

## Useful Commands

- `yarn lint:ts` lint TS files

- `yarn lint:css` lint CSS

- `yarn lint:circular-dependencies` detect circular dependencies

- `yarn apollo:generate-types` generate TS definitions from GraphQL schema

- `yarn apollo:remove-all-types` remove all automatically generated TS definitions

- `yarn test` run jest

- `docker-compose up` run the application in Docker 🐳 container

## TODO

- [ ] Optimize [antd](https://ant.design/docs/react/introduce) package with [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import)

- [ ] Create custom vendors config with [DllPlugin](https://webpack.js.org/plugins/dll-plugin/)

- [x] Implement _request password reset_ + _request password change_

- [x] Implement _automatic token refresh_

# Production

Keep in mind that `main` and `vendors` packages **are huge**. I plan to implement [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import) and [DllPlugin](https://webpack.js.org/plugins/dll-plugin/) in the future.

1. `SERVER_URL=https://node-type-orm-graphql.herokuapp.com/graphql yarn build`

2. `yarn prod`