Lee Benson
5 years ago
parent
84aaaba703
commit
277c503430
@ -0,0 +1,2 @@ |
||||
node_modules |
||||
.git |
||||
@ -1,17 +0,0 @@ |
||||
module.exports = { |
||||
extends: [ |
||||
'eslint:recommended', |
||||
'plugin:import/errors', |
||||
'plugin:import/warnings', |
||||
], |
||||
parserOptions: { |
||||
ecmaVersion: 2017, |
||||
}, |
||||
env: { |
||||
node: true, |
||||
}, |
||||
rules: { |
||||
'no-console': 0, |
||||
'import/no-unresolved': [2, {commonjs: true}], |
||||
}, |
||||
}; |
||||
@ -1,5 +0,0 @@ |
||||
language: node_js |
||||
node_js: |
||||
- "8" |
||||
script: |
||||
- npm run lint |
||||
@ -0,0 +1,3 @@ |
||||
{ |
||||
"editor.tabSize": 2, |
||||
} |
||||
@ -1,445 +1,5 @@ |
||||
4.10.0 - 2017-11-18 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.10.0 |
||||
======================================= |
||||
0.1.0 - 2018-07-17 |
||||
======================================= |
||||
|
||||
4.9.5 - 2017-10-18 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.9.5 |
||||
|
||||
4.9.4 - 2017-10-18 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.9.4 |
||||
|
||||
4.9.3 - 2017-10-18 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.9.3 |
||||
|
||||
4.9.2 - 2017-10-17 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.9.2 |
||||
|
||||
4.9.0 - 2017-10-17 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.9.0 |
||||
|
||||
4.8.5 - 2017-09-08 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.8.5 |
||||
|
||||
4.8.4 - 2017-09-07 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.8.4 |
||||
|
||||
4.8.3 - 2017-09-07 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.8.3 |
||||
|
||||
4.8.2 - 2017-09-07 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.8.2 |
||||
|
||||
4.8.1 - 2017-09-06 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.8.1 |
||||
|
||||
4.8.0 - 2017-09-04 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.8.0 |
||||
|
||||
4.7.0 - 2017-09-01 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.7.0 |
||||
* Prints warning if Node.js version is < 7.6 locally (native async/await required for kit) |
||||
* Bumps packages: |
||||
"inquirer": "^3.2.3" |
||||
|
||||
4.6.0 - 2017-08-28 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.6.0 |
||||
|
||||
4.5.6 - 2017-08-27 |
||||
------------------------------------------------------------ |
||||
* Fixes #67 and #68 for older versions of Node |
||||
* Removes redundant third parameter in call to `startInstallation` |
||||
|
||||
4.5.5 - 2017-08-26 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.5.3 |
||||
|
||||
4.5.4 - 2017-08-26 |
||||
------------------------------------------------------------ |
||||
* Fixes error where `.reactql` in new kits were getting the CLI version, and not the kit -- making `reactql upgrade` claim that a project was already at the latest version |
||||
|
||||
4.5.3 - 2017-08-26 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.5.2 |
||||
|
||||
4.5.2 - 2017-08-25 |
||||
------------------------------------------------------------ |
||||
|
||||
## General |
||||
* Replaces home-brew emoji support with `node-emoji` |
||||
* Fixes long-time typo in 'you starter kit' |
||||
* Fixes #64 - `node-sass` binaries are now automatically on Windows |
||||
* Adds Twitter link to post-install and new project creation |
||||
|
||||
## NPM |
||||
* Adds packages: |
||||
"node-emoji": "^1.8.1" |
||||
|
||||
4.5.1 - 2017-08-22 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.5.1 |
||||
|
||||
4.5.0 - 2017-08-21 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.5.0 |
||||
|
||||
4.4.0 - 2017-08-19 |
||||
------------------------------------------------------------ |
||||
|
||||
This version introduces `reactql upgrade` -- for bumping a ReactQL project in the current folder to the latest (installed CLI) kit. |
||||
|
||||
It follows these steps: |
||||
|
||||
1. In all newly created ReactQL projects from CLI v4.4.0 onwards, a `.reactql` file will be placed at the root of the kit, containing the current semver of the per-project ReactQL kit. |
||||
|
||||
2. When running `reactql upgrade`, the CLI will look for this file and compare it against the kit version associated with the CLI. If the CLI is newer, it will proceed to upgrade. |
||||
|
||||
3. The newer kit will be downloaded (in .zip format from Github), and extracted into the project folder. All existing kit files will be overwritten, _except_ for those in `src/` (which is considered userland/app code). If you have new/custom files in `kit/` or other folders, they'll remain intact - only _existing_ files will be overwritten. |
||||
|
||||
4. `README.md`, `LICENSE` and `CHANGELOG.md` will be ignored -- so if your existing project has any of those files, they'll remain intact. |
||||
|
||||
5. The newer `package.json` will be merged with your existing version, against `dependencies`, `devDependencies` and `scripts`. Any existing keys within those objects will be replaced (e.g. if you have `webpack` as a key, the newer variant will be used.) If you've added any custom NPM packages to either of those keys, or your own custom scripts commands that don't also feature in the newer version of `package.json`, they will be untouched. |
||||
|
||||
6. All existing files in your project that _don't_ have a corresponding version in the newer kit, will be untouched. So if you have any custom folders or files that ReactQL doesn't come with out-the-box, they should remain -- even if they're inside of folders that _are_ replaced. The upgrade process uses ZIP streaming; rather than overwriting whole directories, files are unzipped individually to be less destructive. |
||||
|
||||
7. The upgrade process is far dumber than version control - don't expect it to recursively merge any changes you may have made to kit files! Files will simply be overwritten with newer variants, so keep as much code as possible in `src/` and away from the core kit. |
||||
|
||||
**Caution: This is a new feature, so proceed with caution. Always have a back-up of your original project, and make sure you test the upgraded version for any changes -- it's possible the kit's API may have changed since the last version, or your changes have been overwritten!** |
||||
|
||||
To upgrade the CLI itself (and the kit version it's linked to), as always, just run `npm i -g reactql`. If a new version is available, it will show you each time you run the CLI. |
||||
|
||||
All changes... |
||||
|
||||
## CLI |
||||
* Adds `reactql upgrade` and `react u` alias, for upgrading an existing project |
||||
* Improves ReactQL update notifications to ensure they're displayed during the current session, and formatted properly |
||||
* Replaces `chalk.blue` with `chalk.cyan` for URLs, for clarity on the majority of terminals |
||||
* Fixed whitespace issue with emojis |
||||
* Adds web server URL after creating new project, to show the SSR endpoint |
||||
|
||||
## NPM |
||||
* Adds packages: |
||||
"boxen": "^1.2.1" |
||||
"semver": "^5.4.1" |
||||
"sort-object": "^3.0.2" |
||||
|
||||
* Bumps packages: |
||||
"chalk": "^2.1.0" |
||||
"fs-extra": "^4.0.1", |
||||
"inquirer": "^3.2.2", |
||||
"eslint": "^4.5.0", |
||||
"eslint-plugin-import": "^2.7.0" |
||||
|
||||
4.3.0 - 2017-08-18 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.4.0 |
||||
|
||||
4.2.0 - 2017-08-17 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.3.0 (skips 2.2.0) |
||||
|
||||
4.1.0 - 2017-08-07 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.1.0 |
||||
|
||||
4.0.0 - 2017-08-06 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v2.0.0 |
||||
|
||||
3.9.1 - 2017-08-02 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.17.1 |
||||
|
||||
3.9.0 - 2017-07-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.17.0 |
||||
|
||||
3.8.0 - 2017-07-26 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.16.0 |
||||
|
||||
3.7.1 - 2017-07-22 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.15.1 |
||||
|
||||
3.7.0 - 2017-07-21 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.15.0 |
||||
|
||||
3.6.0 - 2017-07-17 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.14.0 |
||||
|
||||
3.5.0 - 2017-07-08 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.13.0 |
||||
|
||||
3.4.0 - 2017-06-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.12.0 |
||||
* Fixes ESLint by reverting to v3 (until the Airbnb base is fixed) |
||||
|
||||
3.3.0 - 2017-06-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.11.0 |
||||
* Removes `CHANGELOG.md` instead of just `CHANGELOG` in newer kits |
||||
|
||||
3.2.1 - 2017-06-21 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.10.1 |
||||
|
||||
3.2.0 - 2017-06-20 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.10.0 |
||||
|
||||
3.1.0 - 2017-06-20 |
||||
------------------------------------------------------------ |
||||
|
||||
## General |
||||
* Bumps to kit v1.9.0 |
||||
|
||||
3.0.0 - 2017-06-15 |
||||
------------------------------------------------------------ |
||||
|
||||
## General |
||||
* Bumps to kit v1.8.1 |
||||
|
||||
## Typescript |
||||
* Temporarily removes Typescript support per https://github.com/reactql/kit.ts/issues/18 |
||||
|
||||
## NPM |
||||
* Removes `yarn.lock`, in favour of NPM v5's `package-lock.json` |
||||
* Removes yarn building, since kit now uses `package-lock.json` exclusively |
||||
* Removes packages: |
||||
"command-exists": "^1.2.2" |
||||
|
||||
2.8.0 - 2017-06-06 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.7.0 |
||||
|
||||
2.7.0 - 2017-06-06 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.6.0 |
||||
|
||||
2.6.3 - 2017-06-06 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.5.3 |
||||
|
||||
2.6.2 - 2017-06-05 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.5.2 |
||||
|
||||
2.6.1 - 2017-05-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.5.1 |
||||
|
||||
2.6.0 - 2017-05-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.5.0 |
||||
* Adds `--js` and `--ts` option for specifying Javascript/Typescript version respectively (closes #41) |
||||
|
||||
2.5.1 - 2017-05-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.4.1 |
||||
|
||||
2.5.0 - 2017-05-30 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.4.0 |
||||
|
||||
2.4.2 - 2017-05-29 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.3.2 |
||||
|
||||
2.4.1 - 2017-05-28 |
||||
------------------------------------------------------------ |
||||
* Bumps to kit v1.3.1 |
||||
|
||||
2.4.0 - 2017-05-28 |
||||
------------------------------------------------------------ |
||||
* Adds deterministic versioning by hard-coding `kit` and `kit.ts` versions, and downloading from the appropriate repository |
||||
* Displays versions next to JS and Typescript choices on installation |
||||
* Adds version release dates |
||||
* Bumps NPM: |
||||
"fs-extra": "^3.0.1" |
||||
"yargs": "^8.0.1" |
||||
"eslint-plugin-import": "^2.3.0" |
||||
|
||||
2.3.0 - 2017-04-29 |
||||
------------------------------------------------------------ |
||||
* Closes #32 - adds choice for Javascript or Typescript flavoured kit |
||||
* Improves formatting of new project's `package.json` |
||||
* Bumps NPM: |
||||
fs-extra ^2.1.2 → ^3.0.0 |
||||
yargs ^7.0.2 → ^7.1.0 |
||||
yauzl ^2.7.0 → ^2.8.0 |
||||
|
||||
2.2.2 - 2017-04-16 |
||||
------------------------------------------------------------ |
||||
* Defaults to 'UNLICENSED' when creating a new starter kit |
||||
|
||||
2.2.1 - 2017-04-16 |
||||
------------------------------------------------------------ |
||||
* Removes redundant root files (README.md, CHANGELOG, LICENSE) from extracted starter kit |
||||
* Slims down `README.md` by delegating features to the [kit repo](https://github.com/reactql/kit) |
||||
|
||||
2.2.0 - 2017-04-16 |
||||
------------------------------------------------------------ |
||||
* CLI now downloads & extracts source from Github instead of bundling with the kit |
||||
* Adds ESLint and `npm run lint` step |
||||
* Removes redundant `klaw` and `through2` packages |
||||
|
||||
2.1.2 - 2017-04-15 |
||||
------------------------------------------------------------ |
||||
* Merges #24 - Adds `browserlist` for global Webpack build targeting |
||||
|
||||
2.1.1 - 2017-04-14 |
||||
------------------------------------------------------------ |
||||
* Adds [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) reporting per #23, on `npm run build` |
||||
|
||||
2.1.0 - 2017-04-11 |
||||
------------------------------------------------------------ |
||||
* Add default lowercases of installation path based on project name |
||||
* Fixes #16 - regenerator runtime added to browser entry to enable `async/await` code |
||||
|
||||
2.0.1 - 2017-04-11 |
||||
------------------------------------------------------------ |
||||
* Fixes #15 - rest/spread inside objects, e.g. `{ ...whatever }` should now work |
||||
* Updates `.gitignore` to exclude files across the whole repo, so starter kit `node_modules` can be built and tested locally |
||||
* Adds `yarn.lock`, as a starter point for Yarn bundling |
||||
* Adds default MIT license to `starter/files/package.json` and as a default CLI choice, to match this repo |
||||
* Closes #12 - redundant `starter/files/package.json` entries and and `json-loader` removed |
||||
* Adds `prop-types` NPM, and migrates from the deprecated `React.PropTypes` style (still a known issue in react-router 4.0.0-- fixed in https://github.com/ReactTraining/react-router/commit/d601722f8515eea3910bb3a69313f3f2fc37df16) |
||||
* Bumps NPM packages: |
||||
react ^15.4.2 → ^15.5.3 |
||||
react-apollo ^1.0.0 → ^1.0.1 |
||||
react-dom ^15.4.2 → ^15.5.3 |
||||
react-helmet ^5.0.2 → ^5.0.3 |
||||
babel-core ^6.24.0 → ^6.24.1 |
||||
babel-preset-env ^1.3.2 → ^1.3.3 |
||||
babel-preset-react ^6.23.0 → ^6.24.1 |
||||
babel-register ^6.24.0 → ^6.24.1 |
||||
webpack ^2.3.2 → ^2.3.3 |
||||
|
||||
2.0.0 - 2017-04-10 |
||||
------------------------------------------------------------ |
||||
* Adds CLI - no more manual git cloning! |
||||
* Adds `.reactql` EJS templates- groundwork for starter kit personalisation |
||||
* Updates `README.md` with new 'quick start' instructions |
||||
|
||||
1.4.1 - 2017-04-07 |
||||
------------------------------------------------------------ |
||||
* Fixes #8 tree shaking / dead code elimination in the production browser bundle |
||||
|
||||
1.4.0 - 2017-04-07 |
||||
------------------------------------------------------------ |
||||
* Merges !7 |
||||
* Adds full React rendering on the server -- no more EJS |
||||
* Combines separate `title` and `meta` into a single `head` propType on `<Html>` |
||||
* Adds `<Html>` state dehydration within the component |
||||
* Fixes linting and propTypes for `<Html>` |
||||
|
||||
1.3.0 - 2017-04-05 |
||||
------------------------------------------------------------ |
||||
* Adds LESS stylesheet processing |
||||
* Adds examples for CSS, SASS and LESS stylesheets |
||||
|
||||
1.2.0 - 2017-04-02 |
||||
------------------------------------------------------------ |
||||
* Adds ReactQL logo to starter kit |
||||
* Example code for importing images and using in React components |
||||
* Webpack workaround workaround for https://github.com/tcoopman/image-webpack-loader/issues/88 |
||||
* Adds missing image and JSON loaders for Webpack |
||||
* Adds example for hashed nested classnames in CSS |
||||
|
||||
1.1.2 bump - 2017-04-02 |
||||
------------------------------------------------------------ |
||||
* version bump |
||||
|
||||
1.1.2 - 2017-04-02 |
||||
------------------------------------------------------------ |
||||
* Removes redundant `kit/repo` folder |
||||
|
||||
1.1.1 - 2017-04-02 |
||||
------------------------------------------------------------ |
||||
* Adds missing `babel-register` mod to NPM, to allow on-the-fly ESlinting of new syntax |
||||
* Fixes `npm run lint` errors |
||||
* Fixes ESLint for use in IDEs/editors, such as Atom.io |
||||
* Moves config files to dedicated `[root]/config` folder |
||||
* Adds `config/paths.js` for setting folder structure |
||||
* Adds `config/project.js` for project settings, such as the Apollo GraphQL endpoint |
||||
|
||||
1.1.0 - 2017-04-01 |
||||
------------------------------------------------------------ |
||||
* Upgrades to Apollo client v1 official |
||||
* Corrects some minor commentary |
||||
* Bumps NPM versions: |
||||
css-loader ^0.27.3 → ^0.28.0 |
||||
koa-router ^7.0.1 → ^7.1.1 |
||||
react-apollo ^1.0.0-rc.3 → ^1.0.0 |
||||
babel-preset-env ^1.2.2 → ^1.3.2 |
||||
eslint ^3.18.0 → ^3.19.0 |
||||
|
||||
1.0.5 - 2017-03-31 |
||||
------------------------------------------------------------ |
||||
* Fixes link to https://reactql.org in `README.md` |
||||
|
||||
1.0.4 - 2017-03-31 |
||||
------------------------------------------------------------ |
||||
* Now Promised-based `import()` statements can appear anywhere, thanks to `babel-plugin-syntax-dynamic-import` (for code splitting) |
||||
|
||||
1.0.3 |
||||
------------------------------------------------------------ |
||||
* Adds new logo design |
||||
* Adds link to new https://reactql.org site |
||||
* Removes redundant propTypes on `Stats` component in sample `src/app.js` |
||||
|
||||
1.0.2 |
||||
------------------------------------------------------------ |
||||
* Adds `npm run server` script |
||||
|
||||
1.0.1 |
||||
------------------------------------------------------------ |
||||
* Removes 'WIP' warning -- should be ready to go! |
||||
|
||||
1.0.0 |
||||
------------------------------------------------------------ |
||||
* First official release! |
||||
* Adds Redux, with custom store creation |
||||
* Adds Apollo, with separate browser and server-specific client instantiation |
||||
* Adds helper functions for store and GraphQL client creation |
||||
* Adds `config.js` for custom Apollo and system paths configuration |
||||
* Adds `isomorphic-fetch`, to polyfill Apollo client networking on the server + browser |
||||
* Adds GraphQL data fetching on the server, which awaits retrieval before rendering HTML |
||||
* Adds store state to SSR, which the client uses to avoid over-fetching |
||||
* Bumps NPM packages to latest versions |
||||
* Optimises Webpack configs |
||||
* Updates README |
||||
|
||||
0.1.3 |
||||
------------------------------------------------------------ |
||||
* Removed traces of old ReactNow name |
||||
* Tidied up starter kit fonts |
||||
|
||||
0.1.2 |
||||
------------------------------------------------------------ |
||||
* Really fixed the logo (hopefully) |
||||
|
||||
0.1.1 |
||||
------------------------------------------------------------ |
||||
* Image fix for ReactQL logo |
||||
|
||||
0.1.0 |
||||
------------------------------------------------------------ |
||||
* Initial release. Pre-alpha -- don't use yet, not finished! |
||||
- First commit |
||||
@ -0,0 +1,17 @@ |
||||
FROM node:10.4.1-alpine |
||||
|
||||
ENV NPM_CONFIG_LOGLEVEL notice |
||||
|
||||
# Install NPM packages |
||||
WORKDIR /app |
||||
ADD package*.json ./ |
||||
RUN npm i |
||||
ADD . . |
||||
|
||||
# Args to set into the build |
||||
ARG GRAPHQL |
||||
RUN GRAPHQL=$GRAPHQL npm run build |
||||
|
||||
EXPOSE 3000 |
||||
|
||||
CMD npm run production |
||||
@ -1,60 +1,159 @@ |
||||
# Not (currently) maintained |
||||
<img src="https://reactql.org/reactql/logo.svg" alt="ReactQL" width="278" height="77" /> |
||||
|
||||
> I'm taking some time off OSS, and focusing on commercial projects. It's unlikely I'll be making any changes to ReactQL anytime soon, so please know that before basing your next project off of any code you find here. |
||||
> |
||||
> That's not to say that I'll _never_ update it, just that it's not currently on my radar. Feel free to fork and extend. Enjoy! |
||||
 [](https://twitter.com/reactql) |
||||
|
||||
<img src="https://reactql.org/reactql/logo.svg" alt="ReactQL" width="278" height="77" /> |
||||
Front-end React + GraphQL starter kit, written in Typescript. |
||||
|
||||
   [](https://twitter.com/reactql) |
||||
Clone, and make your own. |
||||
|
||||
# Universal React+GraphQL starter kit CLI |
||||
## Features |
||||
|
||||
React for UI. Apollo for GraphQL. Redux for stores. Browser + server-side rendering. |
||||
### Front-end stack |
||||
|
||||
Easy CLI tool for Mac/Windows/Linux. Just `npm i -g reactql` and run `reactql new` to start your next project. |
||||
- [React v16](https://facebook.github.io/react/) for UI. |
||||
- [Apollo Client 2.0 (React)](http://dev.apollodata.com/react/) for connecting to GraphQL. |
||||
- Fully typed [Styled Components](https://www.styled-components.com/), with inline `<style>` tag generation that contains only the CSS that needs to be rendered, and full theming. |
||||
- [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [PostCSS](https://postcss.org/) when importing `.css/.scss/.less` files. |
||||
- [React Router 4](https://github.com/ReactTraining/react-router/tree/v4) for declarative browser + server routes. |
||||
- [Apollo Link State](https://www.apollographql.com/docs/link/links/state.html) for local flux/store state management (automatically re-hydrated from the server.) |
||||
- Declarative/dynamic `<head>` section, using [react-helmet](https://github.com/nfl/react-helmet). |
||||
|
||||
Maintained and updated regularly. |
||||
### Server-side rendering |
||||
|
||||
## Features |
||||
- Built-in [Koa 2](http://koajs.com/) 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 local state. Store state is dehydrated via SSR, and rehydrated automatically on the client. |
||||
- 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 |
||||
|
||||
### Code optimisation |
||||
|
||||
- [Webpack v4](https://webpack.js.org/), with [tree shaking](https://webpack.js.org/guides/tree-shaking/) (dead code paths are automatically eliminated |
||||
- Asynchronous code loading when `import()`'ing inside a function |
||||
- Aggressive code minification |
||||
- CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together! |
||||
|
||||
### Styles |
||||
|
||||
- [Styled Components](https://www.styled-components.com/), for writing CSS styles inline and generating the minimal CSS required to properly render your components. Full type inference on themes, too. |
||||
- [PostCSS v6](http://postcss.org/) with [next-gen CSS](http://cssnext.io/) and automatic vendor prefixing when importing `.css`, `.scss` or `.less` files |
||||
- [SASS](http://sass-lang.com) and [LESS](http://lesscss.org/) 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 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](https://webpack.js.org/plugins/compression-webpack-plugin/) using the [Zopfli Gzip](https://en.wikipedia.org/wiki/Zopfli) 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 (default `vendor.js.bz` goes from 346kb -> 89kb!) |
||||
- Automatic HTTP hardening against common attack vectors via [Koa Helmet](https://github.com/venables/koa-helmet) (highly configurable) |
||||
|
||||
### Developer support |
||||
|
||||
- Written in [Typescript](https://www.typescriptlang.org/) with full type support, out the box (all external `@types/*` packages installed) |
||||
- Heavily documented code |
||||
|
||||
## Usage |
||||
|
||||
Clone the repo, edit `package.json` with your project name and version, then run `npm i` to install the latest packages. |
||||
|
||||
The important folder is `src`. Everything happens in there. |
||||
|
||||
Here's a quick run-through of each folder and what you'll find in there: |
||||
|
||||
* [src/components](/leebenson/reactql/tree/master/src/components) - React components. Follow the import flow at [root.tsx](/leebenson/reactql/tree/master/src/components/root.tsx) to figure out the component render chain. I've included an [example](/leebenson/reactql/tree/master/src/components/example) component that shows off some Apollo GraphQL features, including incrementing a local counter and pulling top news stories from Hacker News (a live GraphQL server endpoint.) |
||||
|
||||
* [src/data](/leebenson/reactql/tree/master/src/data) - Data used throughout your app. You'll find [routes.ts](/leebenson/reactql/tree/master/src/data/routes.ts), which defines your React Router routes (currently, just the home page -- but you can easily extend this.) |
||||
|
||||
* [src/entry](/leebenson/reactql/tree/master/src/data) - The client and server entry points, which call on [src/components/root.tsx](/leebenson/reactql/tree/master/src/components/root.tsx) to isomorphically render the React chain in both environments. |
||||
|
||||
* [src/global](/leebenson/reactql/tree/master/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](/leebenson/reactql/tree/master/src/global/styles.ts) that sets globally inlined Styled Components CSS, as well as pulls in a global `.scss` file -- to show you how both types of CSS work. |
||||
|
||||
* [src/graphql](/leebenson/reactql/tree/master/src/graphql) - GraphQL initialisation goes here. There's an [apollo.ts](/leebenson/reactql/tree/master/src/graphql/apollo.ts) which builds a universal Apollo Client and enables local state, and [state.ts](/leebenson/reactql/tree/master/src/graphql/state.ts) which sets up default state (automatically rehydrated on the client) and some mutation handlers, for incrementing a local counter. |
||||
|
||||
* [src/lib](/leebenson/reactql/tree/master/src/lib) - Library functions to handle hot-code reloading, finding the the right `main.js` / `main.css` in production (which is automatically hashed for versioning), Webpack stats and Styled Components. |
||||
|
||||
* [src/mutations](/leebenson/reactql/tree/master/src/mutations) - Your GraphQL mutations. Out-the-box, you'll find the query to increment the local state counter. |
||||
|
||||
* Isomorphic React, Redux, Apollo GraphQL, SASS/LESS/PostCSS -- [extensive features](https://github.com/reactql/kit). |
||||
* Easy command line tool - works on Mac, Windows and Linux. |
||||
* Trivial to install/upgrade. Just `npm i -g reactql`. |
||||
* Start a new project in just one command - `reactql new` |
||||
* Easily bump an existing project to the latest version, with `reactql upgrade` |
||||
* CLI does all the heavy lifting - downloads the kit, install packages, and lets you get right to work. |
||||
* [src/queries](/leebenson/reactql/tree/master/src/queries) - Your GraphQL queries. There are two by default - one that grabs the local counter state, another that pulls the top stories from Hacker News to display in the example component. |
||||
|
||||
See the [starter kit](https://github.com/reactql/kit) for a full feature list. |
||||
* [src/runner](/leebenson/reactql/tree/master/src/runner) - Development and production runners that spawn the Webpack build process in each environment. |
||||
|
||||
# Quick start |
||||
* [src/themes](/leebenson/reactql/tree/master/src/themes) - A sample [interface](/leebenson/reactql/tree/master/src/themes/interface.ts) type for defining a Styled Components theme, and a [default theme](/leebenson/reactql/tree/master/src/themes/default.ts) that's used in the example component to add an orange hover to Hacker News links. |
||||
|
||||
Install the ReactQL command-line tool on Mac/Windows/Linux: |
||||
* [src/views](/leebenson/reactql/tree/master/src/views) - View components that fall outside of the usual React component chain, for use on the server. In here, [ssr.tsx](/leebenson/reactql/tree/master/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! |
||||
|
||||
```bash |
||||
npm i -g reactql |
||||
* [src/webpack](/leebenson/reactql/tree/master/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. |
||||
|
||||
You'll also find some other useful goodies in the [root](/leebenson/reactql/tree/master/)... |
||||
|
||||
* [types](/leebenson/reactql/tree/master/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. |
||||
|
||||
* Typescript configuration via [tsconfig.json](/leebenson/reactql/tree/master/tsconfig.json) and [tslint.json](/leebenson/reactql/tree/master/tslint.json) |
||||
|
||||
* A sample [Dockerfile](/leebenson/reactql/tree/master/Dockerfile) for quickly deploying your code base to production. |
||||
|
||||
## 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, Styled Components, 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 |
||||
``` |
||||
|
||||
Then run `reactql` for help, or `reactql new` to start a new project. |
||||
A server will be started on [http://localhost:3000](http://localhost:3000) |
||||
|
||||
## Production mode |
||||
|
||||
<img src="https://reactql.org/reactql/screenshot.png" alt="Screenshot" width="570" height="678" /> |
||||
In production mode, the following happens: |
||||
|
||||
# Documentation |
||||
* All assets are optimised and minified. Javascript, CSS, images, are all compiled down to static files that will appear in `dist`. |
||||
|
||||
## See **[https://reactql.org](https://reactql.org)** for full features + documentation. |
||||
* Assets are also compressed into `.gz` (Gzip) and `.br` (Brotli) versions, which are served automatically if the browser can handle them (all modern browsers can.) |
||||
|
||||
* 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](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. |
||||
|
||||
# Follow @reactql for updates |
||||
|
||||
Get the latest updates by following us on Twitter: https://twitter.com/reactql |
||||
|
||||
[](https://twitter.com/reactql) |
||||
|
||||
Get the latest updates by following us on Twitter: https://twitter.com/reactql |
||||
# New to GraphQL? Need help? |
||||
|
||||
# New to GraphQL? |
||||
<img src="https://reactql.org/assets/ext/slack_mark.png" alt="ReactQL" width="70" /> |
||||
|
||||
Watch 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. |
||||
[Join the ReactQL slack channel here.](https://join.slack.com/t/reactql/shared_invite/enQtMjU0MjUzNDEzNzY0LWIyY2MzOGNlYmE1ZjI5ZDZhZTI2ODdiYzM2NjczYzJhZDgxYmJmYzE1NDYzZjRkYmVmNmQ3MzM0NzM3N2M5ODM) |
||||
|
||||
If you want to build your own GraphQL server, check out the [GraphQL Server repo](https://github.com/reactql/examples/tree/master/graphql-server) in [examples](https://github.com/reactql/examples). |
||||
Watch 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. |
||||
|
||||
# Sponsorships |
||||
# Hire me |
||||
|
||||
I'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 (usually to Kubernetes!) |
||||
|
||||
If 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 products. |
||||
@ -1,2 +0,0 @@ |
||||
#!/usr/bin/env node |
||||
require('../cli/index'); |
||||
@ -1,19 +0,0 @@ |
||||
/* |
||||
ReactQL starter kit -- https://reactql.org
|
||||
Authored by Lee Benson <lee@leebenson.com> |
||||
*/ |
||||
|
||||
// ----------------------
|
||||
// IMPORTS
|
||||
|
||||
// Local
|
||||
const package = require('../package.json'); |
||||
|
||||
// ----------------------
|
||||
module.exports = ` |
||||
██████╗ ███████╗ █████╗ ██████╗████████╗ ██████╗ ██╗ |
||||
██╔══██╗██╔════╝██╔══██╗██╔════╝╚══██╔══╝██╔═══██╗██║ |
||||
██████╔╝█████╗ ███████║██║ ██║ ██║ ██║██║ v${package.version} |
||||
██╔══██╗██╔══╝ ██╔══██║██║ ██║ ██║▄▄ ██║██║ |
||||
██║ ██║███████╗██║ ██║╚██████╗ ██║ ╚██████╔╝███████╗ |
||||
`.trim();
|
||||
@ -1,587 +0,0 @@ |
||||
/* |
||||
ReactQL starter kit -- https://reactql.org
|
||||
Authored by Lee Benson <lee@leebenson.com> |
||||
*/ |
||||
|
||||
// ----------------------
|
||||
// IMPORTS
|
||||
|
||||
// Node
|
||||
const os = require('os'); |
||||
const path = require('path'); |
||||
|
||||
// Third-party
|
||||
const boxen = require('boxen'); |
||||
const chalk = require('chalk'); |
||||
const yargs = require('yargs'); |
||||
const emoji = require('node-emoji'); |
||||
const updateNotifier = require('update-notifier'); |
||||
const semver = require('semver'); |
||||
const inquirer = require('inquirer'); |
||||
const spdx = require('spdx'); |
||||
const fse = require('fs-extra'); |
||||
const spawn = require('cross-spawn'); |
||||
const temp = require('temp').track(); |
||||
const yauzl = require('yauzl'); |
||||
const request = require('request'); |
||||
const mkdirp = require('mkdirp'); |
||||
const sortObj = require('sort-object'); |
||||
|
||||
// Local
|
||||
const banner = require('./banner.js'); |
||||
const usage = require('./usage.js'); |
||||
const pkg = require('../package.json'); |
||||
|
||||
// ----------------------
|
||||
|
||||
const kit = { |
||||
version: '2.10.0', |
||||
date: '2017-11-18', |
||||
} |
||||
|
||||
// Notice placeholder, for displaying a message back to the user before
|
||||
// key events -- like prior to starting a new project, or checking the version
|
||||
let notice; |
||||
|
||||
/* |
||||
Helper functions |
||||
*/ |
||||
|
||||
// If there's a notice to display, show it -- otherwise, ignore.
|
||||
function showNotice() { |
||||
if (notice) console.log(notice); |
||||
} |
||||
|
||||
// Show error message. We'll use this if yarn/npm throws back a non-zero
|
||||
// code, to display the problem back to the console
|
||||
function fatalError(msg) { |
||||
console.error(` |
||||
${chalk.bold.bgRed('ERROR')}${chalk.bgRed(' -- See the output below:')} |
||||
|
||||
${msg} |
||||
`.trim());
|
||||
process.exit(1); |
||||
} |
||||
|
||||
// Finished instructions. Show the user how to use the starter kit
|
||||
function finished(dir) { |
||||
return ` |
||||
${separator} |
||||
${emoji.get('rocket')} We have lift off! Your starter kit is ready. |
||||
|
||||
First, navigate to your new project folder: |
||||
${chalk.bgRed.white(`cd ${dir}`)} |
||||
|
||||
Start a dev server on ${chalk.cyan.underline('http://localhost:8080')} (browser) / ${chalk.cyan.underline('http://localhost:8081')} (SSR): |
||||
${chalk.bgRed.white('npm start')} |
||||
|
||||
Build for production: |
||||
${chalk.bgRed.white('npm run build')} |
||||
|
||||
Start production server on ${chalk.cyan.underline('http://localhost:4000')} (after building): |
||||
${chalk.bgRed.white('npm run server')} |
||||
|
||||
Docs/help available at ${chalk.cyan.underline('https://reactql.org')} |
||||
|
||||
Don't forget to ${emoji.get('star')} us on GitHub! |
||||
${chalk.underline('https://github.com/reactql/cli')} |
||||
|
||||
Follow us on ${emoji.get('bird')} Twitter for news/updates: |
||||
${chalk.underline('https://twitter.com/reactql')} |
||||
${separator} |
||||
|
||||
`.trim();
|
||||
} |
||||
|
||||
// ASCII chars to show possible 'spinner' positions. We'll prefix this to
|
||||
// the installation message during yarn/npm packaging
|
||||
const spinner = [ |
||||
'/', |
||||
'|', |
||||
'\\', |
||||
'-', |
||||
]; |
||||
|
||||
// Validation functions. Used to validate args and Inquirer questions
|
||||
const validate = { |
||||
|
||||
// Helper function to determine whether the value passed in via options
|
||||
// also validates against the Inquirer validation function
|
||||
option(value, func) { |
||||
if (typeof value === 'undefined') return true; |
||||
if (func(value) !== true) return true; |
||||
return false; |
||||
}, |
||||
|
||||
// Project name. Accept a-z/0-9, optionally separated by a hypen or underscore
|
||||
// between words. No spaces. 1-32 characters.
|
||||
name(val) { |
||||
if (!/^.{1,32}$/i.test(val)) { |
||||
return 'Between 1-32 characters only'; |
||||
} |
||||
|
||||
return /^([a-z0-9]+[-_]?)*[a-z0-9]$/i.test(val) |
||||
|| 'Alphanumeric only. No spaces. One hypens/underscore between words allowed.'; |
||||
}, |
||||
|
||||
// Project description. Accept any character, max length 64.
|
||||
desc(val) { |
||||
if (!/^.{0,64}$/i.test(val)) { |
||||
return 'Maximum of 64 characters, please.'; |
||||
} |
||||
|
||||
return true; |
||||
}, |
||||
|
||||
// Project description. Accept any character, max length 32
|
||||
license(val) { |
||||
if (!/^UNLICENSED$/.test(val) && !spdx.valid(val)) { |
||||
return 'Invalid license. Enter "UNLICENSED" if not licensed.'; |
||||
} |
||||
|
||||
return true; |
||||
}, |
||||
|
||||
// Directory to install to. Creates the folder during the Validation
|
||||
// process, which means it must not already exist
|
||||
path(val) { |
||||
// Assume the directory exists to begin with
|
||||
try { |
||||
const stats = fse.statSync(val); |
||||
// Do we have a directory?
|
||||
if (!stats.isDirectory()) { |
||||
return 'Path must be a folder.'; |
||||
} |
||||
// Is the folder empty?
|
||||
if (fse.readdirSync(val).length) { |
||||
return 'Path must be a new, empty folder.'; |
||||
} |
||||
} catch(e) { |
||||
// Error accessing folder. Let's now try to create it.
|
||||
try { |
||||
fse.mkdirSync(val); |
||||
} catch(_) { |
||||
return 'Could not create directory. Enter another path.'; |
||||
} |
||||
} |
||||
|
||||
return true; |
||||
} |
||||
}; |
||||
|
||||
// Get the ZIP stream. This is used for both first-time installs as well
|
||||
// as upgrades
|
||||
function startInstallation(installationPath, isUpgrade = false) { |
||||
// Create a tmp file stream to save the file locally
|
||||
const file = temp.createWriteStream(); |
||||
|
||||
// Path to `package.json`
|
||||
const packagePath = path.resolve(installationPath, 'package.json'); |
||||
|
||||
// If we're upgrading, there ought to be a `package.json` file in the
|
||||
// installation path that we'll want to merge with. Load that into
|
||||
// memory, so we can merge it with the new `package.json` later
|
||||
let existingPackageJson; |
||||
|
||||
if (isUpgrade) { |
||||
try { |
||||
existingPackageJson = fse.readJsonSync(packagePath); |
||||
} catch (e) { /* ignore any errors */ } |
||||
} |
||||
|
||||
// Show the separator to make it clear we've moved on to the
|
||||
// next step
|
||||
console.log(separator); |
||||
console.log(`Downloading kit v${kit.version} from Github...`); |
||||
|
||||
// Download the .zip containing the kit's source code
|
||||
request |
||||
.get(`https://github.com/reactql/kit/archive/${kit.version}.zip`) |
||||
.pipe( |
||||
file.on('finish', () => { |
||||
console.log('Extracting archive...'); |
||||
yauzl.open(file.path, { lazyEntries: true }, (e, zip) => { |
||||
if (e) fatalError("Couldn't read zip file"); |
||||
|
||||
// Kick-start reading the first zip entry
|
||||
zip.readEntry(); |
||||
|
||||
// Process zip files as they're streamed
|
||||
zip.on('entry', entry => { |
||||
// Remove leading folder that Github uses
|
||||
const fileName = entry.fileName |
||||
.split('/') |
||||
.slice(1) |
||||
.join('/'); |
||||
|
||||
// Files to skip
|
||||
const skip = [ |
||||
/^README\.md$/, |
||||
/^CHANGELOG\.md$/, |
||||
/^LICENSE$/, |
||||
]; |
||||
|
||||
// Skip `src/*` if upgrading
|
||||
if (isUpgrade) skip.push(/^src\//); |
||||
|
||||
// If the current file is one to skip, move on...
|
||||
if (skip.find(toSkip => toSkip.test(fileName))) |
||||
return zip.readEntry(); |
||||
|
||||
// Proceed only if we have a file name
|
||||
if (fileName) { |
||||
|
||||
// Resolve the full file name, including the path
|
||||
const fullName = path.resolve(installationPath, fileName); |
||||
|
||||
// If it's a folder (based on original filename), create it
|
||||
if (/\/$/.test(fileName)) { |
||||
mkdirp(fullName, e => { |
||||
if (e) fatalError(`Couldn't create folder ${fullName}`); |
||||
zip.readEntry(); |
||||
}); |
||||
} else { |
||||
// Otherwise, it's a regular file -- write it
|
||||
zip.openReadStream(entry, (e, readStream) => { |
||||
if (e) fatalError(`Couldn't create ZIP read stream`); |
||||
readStream |
||||
.pipe(fse.createWriteStream(fullName)) |
||||
.on('finish', () => zip.readEntry()); |
||||
}); |
||||
} |
||||
} else { |
||||
// Blank filename - move on to the next one
|
||||
zip.readEntry(); |
||||
} |
||||
}) |
||||
.on('end', () => { |
||||
// If we're upgrading a kit...
|
||||
if (isUpgrade) { |
||||
|
||||
// Delete common NPM lock files
|
||||
['yarn.lock', 'package-lock.json'].forEach(lockFile => { |
||||
try { |
||||
fse.removeSync(path.resolve(installationPath, lockFile)); |
||||
} catch (e) { /* ignore errors */ } |
||||
}); |
||||
|
||||
// If we have an existing `package.json`, merge it with the old
|
||||
if (existingPackageJson) { |
||||
console.log('Merging package.json...'); |
||||
|
||||
try { |
||||
// Load the new `package.json`
|
||||
const newPackageJson = fse.readJsonSync(packagePath); |
||||
|
||||
// Merge `dependencies`, `devDependencies` and `scripts`
|
||||
['dependencies', 'devDependencies', 'scripts'].forEach(key => { |
||||
existingPackageJson[key] = sortObj(Object.assign({}, |
||||
existingPackageJson[key], |
||||
newPackageJson[key] |
||||
)); |
||||
}); |
||||
|
||||
// Overwrite `package.json`
|
||||
fse.writeJsonSync(packagePath, existingPackageJson); |
||||
|
||||
} catch (e) { /* ignore errors */ } |
||||
} |
||||
|
||||
|
||||
} else { |
||||
// Only if we're installing a new kit...
|
||||
const pkgJsonFile = path.resolve(installationPath, 'package.json'); |
||||
const pkgJson = require(pkgJsonFile); |
||||
|
||||
fse.writeJsonSync( |
||||
pkgJsonFile, |
||||
Object.assign(pkgJson, { |
||||
name: args.name, |
||||
description: args.desc, |
||||
license: args.license, |
||||
}), |
||||
{ |
||||
spaces: 2, |
||||
} |
||||
); |
||||
} |
||||
|
||||
// Add/edit `.reactql` file containing the current version, to enable
|
||||
// later upgrades
|
||||
fse.writeFileSync( |
||||
path.resolve(installationPath, '.reactql'), |
||||
kit.version |
||||
); |
||||
|
||||
// Install package dependencies using NPM
|
||||
const installer = ['npm', ['i']]; |
||||
|
||||
// Create a bottom bar to display the installation spinner at the bottom
|
||||
// of the console.
|
||||
const ui = new inquirer.ui.BottomBar({ bottomBar: spinner[0] }); |
||||
|
||||
// Temporary var to track the position of the 'spinner'
|
||||
let i = 0; |
||||
|
||||
// Update the spinner every 300ms, to reflect the installation activity
|
||||
const update = setInterval(function () { |
||||
ui.updateBottomBar(`\n${spinner[++i % 4]} Installing modules -- Please wait...`); |
||||
}, 300); |
||||
|
||||
// Execute yarn/npm as a child process, pipe output to stdout
|
||||
spawn(...installer, {cwd: installationPath, stdio: 'pipe'}) |
||||
.stdout.pipe(ui.log) |
||||
.on('error', () => fatalError("Couldn't install packages")) |
||||
// When finished, stop the spinner, update with usage instructons and exit
|
||||
.on('close', function () { |
||||
clearInterval(update); |
||||
ui.updateBottomBar(''); |
||||
|
||||
// If running on Windows, `node rebuild node-sass` to fix
|
||||
// https://github.com/reactql/cli/issues/64
|
||||
if (os.platform() === 'win32') { |
||||
console.log('Rebuilding SASS support for Windows...'); |
||||
spawn.sync('npm', ['rebuild', 'node-sass'], { |
||||
cwd: installationPath, |
||||
stdio: 'inherit', |
||||
}); |
||||
} |
||||
|
||||
if (isUpgrade) { |
||||
console.log( |
||||
chalk.green(`Upgraded project to ReactQL kit v${kit.version}`) |
||||
); |
||||
} else { |
||||
console.log(finished(installationPath)); |
||||
} |
||||
|
||||
process.exit(); |
||||
}); |
||||
}); |
||||
}) |
||||
}) |
||||
) |
||||
.on('error', () => { |
||||
console.error("Couldn't download source code from Github"); |
||||
process.exit(1); |
||||
}); |
||||
} |
||||
|
||||
// Banners / text snippets
|
||||
const separator = ` |
||||
================================================================================ |
||||
`;
|
||||
|
||||
const preQuestion = ` |
||||
${separator} |
||||
${banner} |
||||
|
||||
Spawning new project... |
||||
`.trimLeft();
|
||||
|
||||
// Check that the installed Node version meets requirements: 7.6+
|
||||
if (!semver.gte(process.version, '7.6.0')) { |
||||
let warning = `${chalk.bold('Warning')}: You need Node.js 7.6 or above for ReactQL to work properly.\n`; |
||||
warning += `You have ${process.version}. Upgrade @ ${chalk.cyan.underline('https://nodejs.org')}`; |
||||
|
||||
console.log(boxen(chalk.red(warning), { padding: 1 })); |
||||
} |
||||
|
||||
// Set command / arg options. A user can specify args/switches to the `reacql`
|
||||
// command, or just type `reactql new` and walk through the 'wizard'
|
||||
const args = yargs |
||||
.usage(usage) |
||||
.command({ |
||||
command: 'upgrade', |
||||
aliases: ['u'], |
||||
desc: `Upgrade existing ReactQL project to kit v${kit.version}`, |
||||
handler() { |
||||
const cwd = process.cwd(); |
||||
let currentVersion; |
||||
|
||||
try { |
||||
// Check that we're inside an active ReactQL project by looking for a
|
||||
// `.reactql` file, and attempting to read its contents
|
||||
try { |
||||
currentVersion = fse.readFileSync(path.resolve(cwd, '.reactql'), 'utf8').trim(); |
||||
} catch(e) { |
||||
throw new Error('This is not a ReactQL project folder - `.reactql` missing'); |
||||
} |
||||
|
||||
// Is the contents of `.reactql` a valid semver?
|
||||
if (!semver.valid(currentVersion)) { |
||||
throw new Error('Invalid ReactQL version inside `.reactql`'); |
||||
} |
||||
|
||||
} catch (e) { |
||||
console.log( |
||||
chalk.red(`Error: ${e.message}`) |
||||
); |
||||
process.exit(1); |
||||
} |
||||
|
||||
// Is there even a newer version available?
|
||||
if (!semver.lt(currentVersion, kit.version)) { |
||||
console.log(`Already at latest version (v${currentVersion})`); |
||||
return; |
||||
} |
||||
|
||||
// Confirm that the user is happy to overwrite existing files
|
||||
let warning = `${chalk.red.underline('Warning:')} Your ReactQL project will be `; |
||||
warning += `upgraded from ${chalk.dim(currentVersion)} -> ${chalk.green(kit.version)}\n`; |
||||
warning += `By proceeding, existing ReactQL files/dirs will be overwritten (except ${chalk.bgYellow('src/*')})`; |
||||
|
||||
console.log( |
||||
boxen(warning, { |
||||
padding: 1, |
||||
}) |
||||
); |
||||
|
||||
const questions = [ |
||||
{ |
||||
name: 'confirm', |
||||
type: 'confirm', |
||||
message: `Upgrade to ReactQL kit v${kit.version}?`, |
||||
}, |
||||
]; |
||||
|
||||
// Once questions have been answered, we'll have an `answers` object
|
||||
// containing the responses
|
||||
inquirer.prompt(questions).then(answers => { |
||||
|
||||
// If the user has elected not to upgrade, simply return
|
||||
if (!answers.confirm) return; |
||||
|
||||
// Yup, upgrade is a go...
|
||||
startInstallation(cwd, true); |
||||
}); |
||||
} |
||||
}) |
||||
.command({ |
||||
command: 'new', |
||||
aliases: ['n'], |
||||
desc: 'Create new project', |
||||
handler(args) { |
||||
console.log(preQuestion); |
||||
showNotice(); |
||||
|
||||
// Questions/options
|
||||
const questions = [ |
||||
{ |
||||
name: 'name', |
||||
type: 'input', |
||||
message: 'Project name?', |
||||
default: 'reactql-app', |
||||
validate: validate.name, |
||||
when: validate.option(args.name, validate.name), |
||||
}, |
||||
{ |
||||
name: 'desc', |
||||
type: 'input', |
||||
message: 'Project description?', |
||||
default: 'New ReactQL project', |
||||
validate: validate.desc, |
||||
when: validate.option(args.desc, validate.desc), |
||||
}, |
||||
{ |
||||
name: 'license', |
||||
type: 'input', |
||||
message: 'License?', |
||||
default: 'UNLICENSED', |
||||
validate: validate.license, |
||||
when: validate.option(args.license, validate.license), |
||||
}, |
||||
{ |
||||
name: 'path', |
||||
type: 'input', |
||||
message: 'Where to install?', |
||||
default(answers) { |
||||
const dir = (answers.name || args.name).toLowerCase(); |
||||
let current = process.cwd(); |
||||
|
||||
return dir ? path.resolve(current, dir) : current; |
||||
}, |
||||
validate: validate.path, |
||||
when: validate.option(args.path, validate.path), |
||||
}, |
||||
]; |
||||
|
||||
// Once questions have been answered, we'll have an `answers` object
|
||||
// containing the responses
|
||||
inquirer.prompt(questions).then(answers => { |
||||
// Inject answers to our `args`, so that we've got a complete set
|
||||
// of options to use
|
||||
Object.assign(args, answers); |
||||
|
||||
// Modify path to be absolute
|
||||
args.path = path.resolve(process.cwd(), args.path); |
||||
|
||||
// Install the kit's .zip to the required folder
|
||||
startInstallation(args.path, false); |
||||
}); |
||||
}, |
||||
}) |
||||
.command({ |
||||
command: 'version', |
||||
aliases: ['v'], |
||||
desc: 'Show ReactQL version', |
||||
handler() { |
||||
console.log(pkg.version); |
||||
showNotice(); |
||||
}, |
||||
}) |
||||
.options({ |
||||
name: { |
||||
alias: 'n', |
||||
describe: 'New project name', |
||||
}, |
||||
desc: { |
||||
alias: 'd', |
||||
describe: 'Project description', |
||||
}, |
||||
path: { |
||||
alias: 'p', |
||||
describe: 'Path to install the starter kit', |
||||
}, |
||||
license: { |
||||
alias: 'l', |
||||
describe: 'License for pkg.json', |
||||
}, |
||||
}) |
||||
.help(); |
||||
|
||||
// Check for ReactQL updates automatically. This overrides `update-notifier`'s
|
||||
// default behaviour of checking in a separate child process (and then displaying
|
||||
// the message the next time it's run), since it's likely a user would want to
|
||||
// know if an update was available before starting a new project
|
||||
updateNotifier({ |
||||
pkg, |
||||
updateCheckInterval: 0, |
||||
callback(e, update) { |
||||
// If there's an error checking for updates, direct the user to NPM
|
||||
if (e) { |
||||
notice = chalk.red(`Error checking for ReactQL updates. Try ${chalk.bold.underline('https://www.npmjs.com/package/reactql')}`); |
||||
|
||||
} else if (update && semver.lt(pkg.version, update.latest)) { |
||||
// There's an update available...
|
||||
notice = `${chalk.bold.magenta('ReactQL')} CLI update available: `; |
||||
notice += `${chalk.dim(pkg.version)} -> ${chalk.bold.green(update.latest)}\n\n`; |
||||
notice += `Run ${chalk.cyan('npm i -g reactql')} to upgrade.`; |
||||
|
||||
// Wrap `notice` in a box to make it obvious
|
||||
notice = boxen(notice, { |
||||
padding: 1, |
||||
borderColor: 'green', |
||||
}); |
||||
} |
||||
|
||||
// Parse the CLI arguments via `yargs`
|
||||
const cli = args.argv; |
||||
|
||||
// If no arguments are given, show the help
|
||||
if (!cli._.length) { |
||||
yargs.showHelp(); |
||||
showNotice(); |
||||
} |
||||
} |
||||
}); |
||||
@ -1,14 +0,0 @@ |
||||
/* |
||||
ReactQL starter kit -- https://reactql.org
|
||||
Authored by Lee Benson <lee@leebenson.com> |
||||
*/ |
||||
|
||||
// ----------------------
|
||||
// IMPORTS
|
||||
|
||||
const usage = require('./usage.js'); |
||||
|
||||
// ----------------------
|
||||
|
||||
// Write usage instructions to the console
|
||||
console.log(usage); |
||||
@ -1,37 +0,0 @@ |
||||
/* |
||||
ReactQL starter kit -- https://reactql.org
|
||||
Authored by Lee Benson <lee@leebenson.com> |
||||
*/ |
||||
|
||||
// ----------------------
|
||||
// IMPORTS
|
||||
|
||||
// Node
|
||||
const chalk = require('chalk'); |
||||
const emoji = require('node-emoji'); |
||||
|
||||
// Local
|
||||
const banner = require('./banner.js'); |
||||
|
||||
// ----------------------
|
||||
module.exports = ` |
||||
================================================================================ |
||||
|
||||
${banner} |
||||
|
||||
Usage: |
||||
|
||||
Start a new ReactQL project |
||||
${chalk.white.bgRed('reactql new [options]')} |
||||
|
||||
Show help / all options |
||||
${chalk.white.bgRed('reactql help')} |
||||
|
||||
Show the current version / check for latest version: |
||||
${chalk.white.bgRed('reactql version')} |
||||
|
||||
Follow us on ${emoji.get('bird')} Twitter for news/updates: |
||||
${chalk.underline('https://twitter.com/reactql')} |
||||
|
||||
================================================================================ |
||||
`.trim();
|
||||
@ -0,0 +1,18 @@ |
||||
// Run the right environment...
|
||||
|
||||
// Catch CTRL/CMD+C interrupts cleanly
|
||||
process.on("SIGINT", () => { |
||||
process.exit(); |
||||
}); |
||||
|
||||
// Build mode?
|
||||
let script: string; |
||||
|
||||
if (process.env.npm_lifecycle_event === "build") { |
||||
script = "build"; |
||||
} else { |
||||
script = process.env.NODE_ENV === "production" ? "production" : "development"; |
||||
} |
||||
|
||||
// Start the script
|
||||
require(`./src/runner/${script}`); |
||||
File diff suppressed because it is too large
Load Diff
@ -1,59 +1,97 @@ |
||||
{ |
||||
"name": "reactql", |
||||
"version": "4.10.0", |
||||
"description": "Universal React+GraphQL starter kit: React, Apollo, Webpack 2, React Router 4, PostCSS, SSR", |
||||
"main": "cli/index.js", |
||||
"version": "3.0.0", |
||||
"description": "ReactQL - front-end React/GraphQL starter kit", |
||||
"main": "index.js", |
||||