{"id":13398427,"url":"https://github.com/leebenson/reactql","last_synced_at":"2025-05-15T04:04:25.110Z","repository":{"id":17146095,"uuid":"81242375","full_name":"leebenson/reactql","owner":"leebenson","description":"Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR","archived":true,"fork":false,"pushed_at":"2024-10-31T13:06:55.000Z","size":3665,"stargazers_count":1819,"open_issues_count":41,"forks_count":173,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-04-14T04:59:23.890Z","etag":null,"topics":["apollo","apollo-client","brotli","emotion","graphql","gzip","helmet","hot-reload","less","postcss","react","reactjs","sass","server-side-rendering","ssr","starter-kit","typescript","universal","webpack","webpack4"],"latest_commit_sha":null,"homepage":"https://reactql.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leebenson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-07T18:53:12.000Z","updated_at":"2025-04-04T13:35:59.000Z","dependencies_parsed_at":"2025-04-14T14:16:37.692Z","dependency_job_id":null,"html_url":"https://github.com/leebenson/reactql","commit_stats":null,"previous_names":["reactql/cli"],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leebenson%2Freactql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leebenson%2Freactql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leebenson%2Freactql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leebenson%2Freactql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leebenson","download_url":"https://codeload.github.com/leebenson/reactql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","apollo-client","brotli","emotion","graphql","gzip","helmet","hot-reload","less","postcss","react","reactjs","sass","server-side-rendering","ssr","starter-kit","typescript","universal","webpack","webpack4"],"created_at":"2024-07-30T19:00:25.577Z","updated_at":"2025-05-15T04:04:25.041Z","avatar_url":"https://github.com/leebenson.png","language":"TypeScript","readme":"# This is horribly outdated. Please don't use it. Consider [NextJS](https://nextjs.org/) instead.\n\n\n\u003cimg src=\"https://reactql.org/reactql/logo.svg\" alt=\"ReactQL v4.3.0\" width=\"278\" height=\"77\" /\u003e\n\n![license](https://img.shields.io/github/license/leebenson/reactql.svg?style=flat-square) [![Twitter Follow](https://img.shields.io/twitter/follow/reactql.svg?style=social\u0026label=Follow)](https://twitter.com/reactql)\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/leebenson/reactql)\n\nUniversal front-end React + GraphQL starter kit, written in Typescript.\n\nhttps://reactql.org\n\n## Features\n\n### Front-end stack\n\n- [React v16.8](https://facebook.github.io/react/) (the one with [hooks](https://reactjs.org/docs/hooks-intro.html)!) for UI.\n- [Apollo Client 2.5 (React)](http://dev.apollodata.com/react/) for connecting to GraphQL.\n- [MobX-React-Lite](https://github.com/mobxjs/mobx-react-lite) for declarative, type-safe flux/store state management.\n- [Emotion](https://emotion.sh/) CSS-in-JS, with inline `\u003cstyle\u003e` tag generation that contains only the CSS that needs to be rendered.\n- [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [PostCSS](https://postcss.org/) when importing `.css/.scss/.less` files.\n- [React Router 4](https://reacttraining.com/react-router/) for declarative browser + server routes.\n- [GraphQL Code Generator v1.1](https://graphql-code-generator.com/) for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing `\u003cQuery\u003e` / `\u003cMutation\u003e` queries manually\n- Declarative/dynamic `\u003chead\u003e` section, using [react-helmet](https://github.com/nfl/react-helmet).\n\n### Server-side rendering\n\n- Built-in [Koa 2](http://koajs.com/) web server, with async/await routing.\n- Full route-aware server-side rendering (SSR) of initial HTML.\n- Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.\n- Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.\n- MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!\n- Full page React via built-in SSR component - every byte of your HTML is React.\n- SSR in both development and production, even with hot-code reload.\n\n### Real-time\n\n- Hot code reloading; zero refresh, real-time updates in development.\n- Development web server that automatically sends patches on code changes, and restarts the built-in Web server for SSR renders that reflect what you'd see in production.\n- WebSocket `subscription` query support for real-time data (just set `WS_SUBSCRIPTIONS=1` in [.env](.env))\n\n### Code optimisation\n\n- [Webpack v4](https://webpack.js.org/), with [tree shaking](https://webpack.js.org/guides/tree-shaking/) -- dead code paths are automatically eliminated.\n- Asynchronous code loading when `import()`'ing inside a function.\n- Automatic per-vendor chunk splitting/hashing, for aggressive caching (especially good behind a HTTP/2 proxy!)\n- Gzip/Brotli minification of static assets.\n- CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!\n\n### Styles\n\n- [Emotion](https://emotion.sh/), for writing CSS styles inline and generating the minimal CSS required to properly render your components.\n- [PostCSS v7](http://postcss.org/) with [next-gen CSS](https://preset-env.cssdb.org/) and automatic vendor prefixing when importing `.css`, `.scss` or `.less` files.\n- [SASS](http://sass-lang.com) and [LESS](http://lesscss.org/) support (also parsed through PostCSS.)\n- Automatic vendor prefixing - write modern CSS, and let the compiler take care of browser compatibility.\n- Mix and match SASS, LESS and regular CSS - without conflicts!\n- CSS modules - your classes are hashed automatically, to avoid namespace conflicts.\n- Compatible with Foundation, Bootstrap, Material UI and more. Simply configure via a `.global.(css|scss|less)` import to preserve class names.\n\n### Production-ready\n\n- Production bundling via `npm run production`, that generates optimised server and client code.\n- [Static compression](https://webpack.js.org/plugins/compression-webpack-plugin/) using the Gzip and [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) algorithms for the serving of static assets as pre-compressed `.gz` and `.br` files (your entire app's `main.js.bz` - including all dependencies - goes from 346kb -\u003e 89kb!)\n- Static bundling via `npm run build:static`. Don't need server-side rendering? No problem. Easily deploy a client-only SPA to any static web host (Netlify, etc.)\n\n### Developer support\n\n- Written in [Typescript](https://www.typescriptlang.org/) with full type support, out the box (all external `@types/*` packages installed)\n- Heavily documented code\n\n## Quick start\n\nGrab and unpack the latest version, install all dependencies, and start a server:\n\n```\nwget -qO- https://github.com/leebenson/reactql/archive/4.5.1.tar.gz | tar xvz\ncd reactql-4.5.1\nnpm i\nnpm start\n```\n\nYour development server is now running on [http://localhost:3000](http://localhost:3000)\n\n## Building GraphQL HOCs\n\nBy default, your GraphQL schema lives in [schema/schema.graphql](schema/schema.graphql)\n\nTo create fully Typescript-typed Apollo React HOCs based on your schema, simply put the query in a `.graphql` anywhere inside the source folder, and run:\n\n```\nnpm run gen:graphql\n```\n\nYou can then import the query like we do in the [HackerNews demo component](src/components/example/hackernews.tsx):\n\n```ts\n// Query to get top stories from HackerNews\nimport { GetHackerNewsTopStoriesComponent } from \"@/graphql\";\n```\n\nAnd use it as follows:\n\n```ts\n\u003cGetHackerNewsTopStoriesComponent\u003e\n    {({ data, loading, error }) =\u003e (...)}\n\u003c/GetHackerNewsTopStoriesComponent\u003e\n```\n\nTo get access to the underlying `gql`-templated query (in case you need it for refetching, etc), in this case it'd be `GetHackerNewsTopStoriesDocument`.\n\nSee [GraphQL Code Generator](https://graphql-code-generator.com/) for more details on how it works.\n\nYou can also edit [codegen.yml](codegen.yml) in the root to point to a remote schema, or change the file location.\n\n## Development mode\n\nDevelopment mode offers a few useful features:\n\n- Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Emotion, SASS - pretty much anything.\n\n- Full source maps for Javascript and CSS.\n\n- Full server-side rendering, with automatic Koa web server restarting on code changes. This ensures the initial HTML render will always reflect your latest code changes.\n\nTo get started, simply run:\n\n```\nnpm start\n```\n\nA server will be started on [http://localhost:3000](http://localhost:3000)\n\n## Production mode\n\nIn production mode, the following happens:\n\n- All assets are optimised and minified. Javascript, CSS, images, are all compiled down to static files that will appear in `dist`.\n\n- Assets are also compressed into `.gz` (Gzip) and `.br` (Brotli) versions, which are served automatically to all capable browsers.\n\n- If files have been generated in a previous run, they will be re-used on subsequent runs. This ensures really fast server start-up times after the initial build.\n\nTo build and run for production, use:\n\n```\nnpm run production\n```\n\nFiles will be generated in `./dist`, and a server will also be spawned at [http://localhost:3000](http://localhost:3000)\n\nClean the cached production build with `npm run clean`, or run `npm run clean-production` to both clean and re-run the production build, as needed.\n\n# Build mode\n\nIf you only want to build assets and not actually run the server, use:\n\n```\nnpm run build:production\n```\n\nThis is used in the [Dockerfile](Dockerfile), for example, to pre-compile assets and ensure faster start-up times when spawning a new container.\n\n# Static bundling for client-only SPAs\n\nIf you're targeting a client-only SPA and hosting statically, you probably don't want to run a Koa web server to handle HTTP requests and render React.\n\nInstead, you can use _**static mode**_, which produces the client-side JS, CSS and assets files, along with an `index.html` for minimal bootstrapping, and dumps them in `dist/public`.\n\nYou can then upload the contents of that folder wherever you like - et voila, you'll have a working client-side Single Page App!\n\nThere are two static modes available -- for dev and production:\n\n### Development (hot-code reload)\n\nJust like the full-stack version, dev mode gives you hot code reloading, so changes to your local files will be pushed to the browser.\n\nTo activate static dev mode, just run:\n\n```\nnpm run dev:static\n```\n\nYour client-side SPA will be online at [http://localhost:3000](http://localhost:3000), just like normal.\n\n### Production (static deployment)\n\nTo build your client-side files ready for production deployment, run:\n\n```\nnpm run build:static\n```\n\nYou'll get everything in that 'regular' building provides you with plus a `index.html` to bootstrap your JS, just without the server parts.\n\n### Modifying the `index.html` template\n\nIf you want to make changes to the `index.html` file that's used for static bundling, edit [src/views/static.html](src/views/static.html)\n\n## NPM commands\n\nHere's a list of all the NPM script commands available out-the-box:\n\n| Command                    | What it does                                                                                                                                                 |\n| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `npm run build:production` | Builds production-ready client/server bundles, but _doesn't_ start a server.                                                                                 |\n| `npm run build:static`     | Builds production-ready client bundle and `index.html`; ignores server bundling.                                                                             |\n| `npm run clean`            | Removes the `dist` folder, and any previously built client/server bundle.                                                                                    |\n| `npm run dev`              | Runs a univeral dev server in memory; auto restarts on code changes _and_ uses hot-code reload in the browser. Does _not_ output anything to `dist`.         |\n| `npm run dev:static`       | Runs a client-only dev server using [src/views/static.html] as the template; full hot-code reload. Also doesn't output anything to `dist`.                   |\n| `npm run production`       | Builds _and_ runs a production-ready client/server bundle. If previously built, will re-use cached files automatically (run `npm run clean` to clear cache.) |\n| `npm run production:clean` | Same as above, but cleans `dist` first to ensure a fresh re-build.                                                                                           |\n| `npm start`                | Shortcut for `npm run dev`.                                                                                                                                  |\n\n## Project layout\n\nThe important stuff is in [src](src).\n\nHere's a quick run-through of each sub-folder and what you'll find in it:\n\n- [src/components](src/components) - React components. Follow the import flow at [root.tsx](src/components/root.tsx) to figure out the component render chain and routing. I've included an [example](src/components/example) component that shows off some Apollo GraphQL and MobX features, including incrementing a local counter and pulling top news stories from Hacker News (a live GraphQL server endpoint.)\n\n- [src/entry](src/entry) - The client and server entry points, which call on [src/components/root.tsx](src/components/root.tsx) to isomorphically render the React chain in both environments.\n\n- [src/global](src/global) - A good place for anything that's used through your entire app, like global styles. I've started you off with a [styles.ts](src/global/styles.ts) that sets globally inlined Emotion CSS, as well as pulls in a global `.scss` file -- to show you how both types of CSS work.\n\n- [src/lib](src/lib) - Internal libraries/helpers. There's an [apollo.ts](src/lib/apollo.ts) which builds a universal Apollo Client. Plus, Koa middleware to handle hot-code reloading in development and some other Webpack helpers.\n\n- [src/queries](src/queries) - Your GraphQL queries. There's just one by default - for pulling the top stories from Hacker News to display in the example component.\n\n- [src/runner](src/runner) - Development and production runners that spawn the Webpack build process in each environment.\n\n- [src/views](src/views) - View components that fall outside of the usual React component chain, for use on the server. In here, [ssr.tsx](src/views/ssr.tsx) takes care of rendering the root HTML that's sent down the wire to the client. Note this is also a React component - your whole app will render as React! - and [static.html](src/views/static.html) serves as a template for rendering a client-side SPA. Update it as needed.\n\n- [src/webpack](src/webpack) - The Webpack 4 configuration files that do the heavy lifting to transform our Typescript code, images and CSS into optimised and minified assets that wind up in the `dist` folder at the root. Handles both the client and server environments.\n\nYou'll also find some other useful goodies in the [root]()...\n\n- [.env](.env) - Change your `GRAPHQL` server endpoint, `WS_SUBSCRIPTIONS=1` for built-in WebSocket support, `HOST` if you want to bind the server to something other than localhost, and `LOCAL_STORAGE_KEY` to set the root key for saving MobX state locally in the client for automatic re-loading in a later session.\n\n- [.nvmrc](.nvmrc) - Specify your preferred Node.js version, for use with NVM and used by many continuous deployment tools. Defaults to v12.2.0\n\n- [codegen.yml](codegen.yml) - Settings for [GraphQL Code Generator](https://graphql-code-generator.com/) (which you can run with `npm run gen:graphql` to generate types/HOCs based on your GraphQL queries/mutations.)\n\n- [netlify.toml](netlify.toml) - Build instructions for fast [Netlify](https://www.netlify.com/) deployments. **Tip: To quickly deploy a demo ReactQL app, [click here](https://app.netlify.com/start/deploy?repository=https://github.com/leebenson/reactql).**\n\n- [types](types) - Some basic types that allow you to import fonts, images, CSS/SASS/LESS files, and allow use of the global `SERVER` boolean and `GRAPHQL` endpoint data in your IDE.\n\n- Typescript configuration via [tsconfig.json](tsconfig.json)\n\n- A sample multi-build [Dockerfile](Dockerfile) based on Node 11.8 and Alpine, for quickly deploying your code base to production.\n\n# Follow @reactql for updates\n\nGet the latest updates by following us on Twitter: https://twitter.com/reactql\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/reactql.svg?style=social\u0026label=Follow)](https://twitter.com/reactql)\n\n# New to GraphQL? Need help?\n\n\u003cimg src=\"https://reactql.org/assets/ext/slack_mark.png\" alt=\"ReactQL\" width=\"70\" /\u003e\n\n[Join the ReactQL slack channel here.](https://join.slack.com/t/reactql/shared_invite/enQtMjU0MjUzNDEzNzY0LWIyY2MzOGNlYmE1ZjI5ZDZhZTI2ODdiYzM2NjczYzJhZDgxYmJmYzE1NDYzZjRkYmVmNmQ3MzM0NzM3N2M5ODM)\n\nWatch my free [45 minute YouTube video](https://www.youtube.com/watch?v=DNPVqK_woRQ), for a live coding walk-through of putting together a GraphQL server with a database. Learn how to write queries, mutations and handle nested/related data.\n\n# Hire me\n\nI'm a full-stack developer with 20+ years experience. As well as 9 years hands-on dev with Node.js, I'm fluent in Python, Go, SQL and NoSQL. I specialise in building robust, scalable products from scratch, and helping you deploy fast.\n\nIf you're looking for a senior developer who can help you get your product out the door quickly, reach me at [lee@leebenson.com](mailto:lee@leebenson.com). I'm occasionally available to take on remote contracts when I'm not working on my own projects.\n","funding_links":[],"categories":["JavaScript","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleebenson%2Freactql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleebenson%2Freactql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleebenson%2Freactql/lists"}