Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Install / Use
/learn @leebenson/ReactqlREADME
This is horribly outdated. Please don't use it. Consider NextJS instead.
<img src="https://reactql.org/reactql/logo.svg" alt="ReactQL v4.3.0" width="278" height="77" />
Universal front-end React + GraphQL starter kit, written in Typescript.
https://reactql.org
Features
Front-end stack
- React v16.8 (the one with hooks!) for UI.
- Apollo Client 2.5 (React) for connecting to GraphQL.
- MobX-React-Lite for declarative, type-safe flux/store state management.
- Emotion CSS-in-JS, with inline
<style>tag generation that contains only the CSS that needs to be rendered. - Sass, Less and PostCSS when importing
.css/.scss/.lessfiles. - React Router 4 for declarative browser + server routes.
- GraphQL Code Generator v1.1 for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing
<Query>/<Mutation>queries manually - Declarative/dynamic
<head>section, using react-helmet.
Server-side rendering
- Built-in Koa 2 web server, with async/await routing.
- Full route-aware server-side rendering (SSR) of initial HTML.
- Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
- Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
- MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!
- Full page React via built-in SSR component - every byte of your HTML is React.
- SSR in both development and production, even with hot-code reload.
Real-time
- Hot code reloading; zero refresh, real-time updates in development.
- 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.
- WebSocket
subscriptionquery support for real-time data (just setWS_SUBSCRIPTIONS=1in .env)
Code optimisation
- Webpack v4, with tree shaking -- dead code paths are automatically eliminated.
- Asynchronous code loading when
import()'ing inside a function. - Automatic per-vendor chunk splitting/hashing, for aggressive caching (especially good behind a HTTP/2 proxy!)
- Gzip/Brotli minification of static assets.
- CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!
Styles
- Emotion, for writing CSS styles inline and generating the minimal CSS required to properly render your components.
- PostCSS v7 with next-gen CSS and automatic vendor prefixing when importing
.css,.scssor.lessfiles. - SASS and LESS support (also parsed through PostCSS.)
- Automatic vendor prefixing - write modern CSS, and let the compiler take care of browser compatibility.
- Mix and match SASS, LESS and regular CSS - without conflicts!
- CSS modules - your classes are hashed automatically, to avoid namespace conflicts.
- Compatible with Foundation, Bootstrap, Material UI and more. Simply configure via a
.global.(css|scss|less)import to preserve class names.
Production-ready
- Production bundling via
npm run production, that generates optimised server and client code. - Static compression using the Gzip and Brotli algorithms for the serving of static assets as pre-compressed
.gzand.brfiles (your entire app'smain.js.bz- including all dependencies - goes from 346kb -> 89kb!) - 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.)
Developer support
- Written in Typescript with full type support, out the box (all external
@types/*packages installed) - Heavily documented code
Quick start
Grab and unpack the latest version, install all dependencies, and start a server:
wget -qO- https://github.com/leebenson/reactql/archive/4.5.1.tar.gz | tar xvz
cd reactql-4.5.1
npm i
npm start
Your development server is now running on http://localhost:3000
Building GraphQL HOCs
By default, your GraphQL schema lives in schema/schema.graphql
To 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:
npm run gen:graphql
You can then import the query like we do in the HackerNews demo component:
// Query to get top stories from HackerNews
import { GetHackerNewsTopStoriesComponent } from "@/graphql";
And use it as follows:
<GetHackerNewsTopStoriesComponent>
{({ data, loading, error }) => (...)}
</GetHackerNewsTopStoriesComponent>
To get access to the underlying gql-templated query (in case you need it for refetching, etc), in this case it'd be GetHackerNewsTopStoriesDocument.
See GraphQL Code Generator for more details on how it works.
You can also edit codegen.yml in the root to point to a remote schema, or change the file location.
Development mode
Development mode offers a few useful features:
-
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.
-
Full source maps for Javascript and CSS.
-
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.
To get started, simply run:
npm start
A server will be started on http://localhost:3000
Production mode
In production mode, the following happens:
-
All assets are optimised and minified. Javascript, CSS, images, are all compiled down to static files that will appear in
dist. -
Assets are also compressed into
.gz(Gzip) and.br(Brotli) versions, which are served automatically to all capable browsers. -
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.
To build and run for production, use:
npm run production
Files will be generated in ./dist, and a server will also be spawned at http://localhost:3000
Clean 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.
Build mode
If you only want to build assets and not actually run the server, use:
npm run build:production
This is used in the Dockerfile, for example, to pre-compile assets and ensure faster start-up times when spawning a new container.
Static bundling for client-only SPAs
If 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.
Instead, 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.
You can then upload the contents of that folder wherever you like - et voila, you'll have a working client-side Single Page App!
There are two static modes available -- for dev and production:
### Development (hot-code reload)
Just like the full-stack version, dev mode gives you hot code reloading, so changes to your local files will be pushed to the browser.
To activate static dev mode, just run:
npm run dev:static
Your client-side SPA will be online at http://localhost:3000, just like normal.
### Production (static deployment)
To build your client-side files ready for production deployment, run:
npm run build:static
You'll get everything in that 'regular' building provides you with plus a index.html to bootstrap your JS, just without the server parts.
Modifying the index.html template
If you want to make changes to the index.html file that's used for static bundling, edit src/views/static.html
NPM commands
Here's a list of all the NPM script commands available out-the-box:
| Command | What it does |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| npm run build:production | Builds production-ready client/server bundles, but doesn't start
Related Skills
bluebubbles
341.2kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
node-connect
341.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
slack
341.2kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
84.5kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
