Universal React Apollo Example
An example of the app that shows how to use a modern stack (strong accent on GraphQL!).
- GraphQL for fetching data! The most awesome part of the project!
- Universal Rendering (Server Side Rendering)
- ES6/ES2015 with Babel
- React data container for the Apollo Client
- Integrating predictable state container Redux with Apollo
- Hot reloading using React-Hot-Loader
- Recompose as a React utility belt for higher order components
- Development and production bundling by Webpack
- CSSNext: use of official W3C syntax of the future CSS
- Transforming styles with JS plugins by PostCSS
- Wow.js for CSS animations
- Flexbox for resolving layout fatigue and making the app responsive (open the app in desktop, mobile, whatever...). Doesn't work on IE 9, but it should not be a problem nowadays. See browsers usage.
- CSS Modules: say goodbye to global scope in CSS and most of conflicts
- Jest Snapshot Testng, some parts in Enzyme and Sinon
- Linting both JS and CSS, respectively by: ESLint and Stylelint
Running the app
Wordpress GraphQL API Example. You need to run it first, however, you can also set up own endpoints.1. This repository is the frontend for
2. Install Node/npm
Make sure you have Node.js installed (the app has been tested with Node
5.12.0). You can use
yarn for running commands (we prefer
yarn, as it is faster).
3. Clone and install dependencies
git clone https://github.com/WeLikeGraphQL/react-apollo-example.git cd react-apollo-example yarn install
4. Build and run the app
yarn run build:dll yarn run dev
yarn run build yarn start
- Open the client at http://localhost:3000
- You can change ports and other settings in
5. Running Tests
How to Contribute:
Best way to keep up to date is check the issues. We really welcome improvements for all aspects of an app.
- Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
- Coding guidelines: Airbnb's Style Guide