Skip to content
This repository was archived by the owner on Oct 31, 2024. It is now read-only.

Commit 03f8760

Browse files
committed
v4.5
- Bumps Node to v12.2 - Fixes `Dockerfile` - Replaces MobX with MobX React Lite - compatible with hooks! - Replaces `ts-loader` with Babel 7 Typescript preset - Refactors `tsconfig.json` and imports to use module interop (e.g. no more `import * as...`) - Removes `src/data` folder; routes are now defined directly in components, and store data is added via MobX in React hooks - Adds NPM packages: "@babel/plugin-proposal-class-properties": "^7.4.4" "@babel/plugin-proposal-object-rest-spread": "^7.4.4" "@babel/preset-react": "^7.0.0" "@babel/preset-typescript": "^7.3.3" "mobx-react-lite": "^1.3.2" - Bumps NPM packages: "mobx": "^5.9.4"
1 parent 0989b32 commit 03f8760

33 files changed

+349
-318
lines changed

Dockerfile

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM node:11.8.0-alpine AS builder
1+
FROM node:12.2.0-alpine AS builder
22

33
# log most things
44
ENV NPM_CONFIG_LOGLEVEL notice
@@ -15,11 +15,11 @@ RUN npm i
1515
ADD . .
1616

1717
# build
18-
RUN npm run build
18+
RUN npm run build:production
1919

2020
########################
2121

22-
FROM node:11.8.0-alpine
22+
FROM node:12.2.0-alpine
2323
WORKDIR /app
2424

2525
# copy source + compiled `node_modules`

README.md

+10-12
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ https://reactql.org
1111

1212
### Front-end stack
1313

14-
- [React v16](https://facebook.github.io/react/) for UI.
15-
- [Apollo Client 2.0 (React)](http://dev.apollodata.com/react/) for connecting to GraphQL.
16-
- [MobX](https://mobx.js.org/) for declarative, type-safe flux/store state management (automatically re-hydrated from the server.) which is auto-saved and reloaded to `localStorage` in the client (simple to disable if you don't need it.)
14+
- [React v16.8](https://facebook.github.io/react/) (the one with [hooks](https://reactjs.org/docs/hooks-intro.html)!) for UI.
15+
- [Apollo Client 2.5 (React)](http://dev.apollodata.com/react/) for connecting to GraphQL.
16+
- [MobX-React-Lite](https://github.com/mobxjs/mobx-react-lite) for declarative, type-safe flux/store state management.
1717
- [Emotion](https://emotion.sh/) CSS-in-JS, with inline `<style>` tag generation that contains only the CSS that needs to be rendered.
1818
- [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [PostCSS](https://postcss.org/) when importing `.css/.scss/.less` files.
1919
- [React Router 4](https://reacttraining.com/react-router/) for declarative browser + server routes.
20-
- [GraphQL Code Generator v1](https://graphql-code-generator.com/) for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing `<Query>` / `<Mutation>` queries manually
20+
- [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 `<Query>` / `<Mutation>` queries manually
2121
- Declarative/dynamic `<head>` section, using [react-helmet](https://github.com/nfl/react-helmet).
2222

2323
### Server-side rendering
@@ -26,7 +26,7 @@ https://reactql.org
2626
- Full route-aware server-side rendering (SSR) of initial HTML.
2727
- Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
2828
- Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
29-
- MobX for app-wide flux/store state, with a built-in `<StateConsumer>` for automatically re-rendering any React component that 'listens' to state and full client-side rehydration. Fully typed state!
29+
- MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!
3030
- Full page React via built-in SSR component - every byte of your HTML is React.
3131
- SSR in both development and production, even with hot-code reload.
3232

@@ -214,17 +214,15 @@ The important stuff is in [src](src).
214214
215215
Here's a quick run-through of each sub-folder and what you'll find in it:
216216
217-
- [src/components](src/components) - React components. Follow the import flow at [root.tsx](src/components/root.tsx) to figure out the component render chain. 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.)
218-
219-
- [src/data](src/data) - Data used throughout your app. You'll find [routes.ts](src/data/routes.ts), which defines your React Router routes (currently, just the home page -- but you can easily extend this.) and [state.ts](src/data/state.ts), to show you how simple it is to define your own state data fields that, when modified, automatically re-render any 'observing' component.
217+
- [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.)
220218
221219
- [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.
222220
223221
- [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.
224222
225-
- [src/lib](src/lib) - Internal libraries/helpers. There's an [apollo.ts](src/lib/apollo.ts) which builds a universal Apollo Client, and [mobx.ts](src/lib/mobx.tsx) which sets up default state (automatically rehydrated on the client), for incrementing a local counter. Plus, Koa middleware to handle hot-code reloading in development and some other Webpack helpers.
223+
- [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.
226224
227-
- [src/queries](src/queries) - Your GraphQL queries. There's just one by default - for pilling the top stories from Hacker News to display in the example component.
225+
- [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.
228226
229227
- [src/runner](src/runner) - Development and production runners that spawn the Webpack build process in each environment.
230228
@@ -236,13 +234,13 @@ You'll also find some other useful goodies in the [root]()...
236234
237235
- [.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.
238236
239-
- [.nvmrc](.nvmrc) - Specify your preferred Node.js version, for use with NVM and used by many continuous deployment tools. Defaults to v11.8.0
237+
- [.nvmrc](.nvmrc) - Specify your preferred Node.js version, for use with NVM and used by many continuous deployment tools. Defaults to v12.2.0
240238
241239
- [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.)
242240
243241
- [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).**
244242
245-
- [types](types) - Some basic types that allow you to import fonts, images, CSS/SASS/LESS files, and allow use of the global `SERVER` boolean in your IDE.
243+
- [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.
246244
247245
- Typescript configuration via [tsconfig.json](tsconfig.json)
248246

0 commit comments

Comments
 (0)