leebenson/reactql

Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR

reactql's Issues

Demo with Redux

I am having a hard time trying to figure how to add redux with graphQL, it would be really amazing if you had some documentation for a sample query just to give us an idea of how to hook up the action creator, connect and reduced. I love this package, thanks for putting it together!

Enhancement to allow install in current directory?

I'm wondering if you would considerable it permissable/allowable for ReactQL to be able to install in the current directory? I can see in the code where this isn't presently allowed, and I'd be willing to do a PR if it'd help, but it's an option I'd like and I'd think others might also. Thoughts?

Use mainstream babel/eslint presets

Babel + Eslint plugins could easily clog package.json with tons of dependencies. Using existing presets like babel-preset-react-app and eslint-config-react-app provide sane default that are well tested by community

Webpack config improvements

1. Wouldn't it be better if we change Webpack's config file's 'module.loaders' to 'module.rules' to confirm to Webpack 2's standard?, according to
   https://webpack.js.org/guides/migrating/
   Confirming to the recommended standard would give users confidence in that it's being well maintained.

2. Wouldn't it be better if we used Webpack-dev-middleware + Webpack-hot-middleware instead of Webpack-dev-server, because WDM + WHM gives user more flexibility and functionality?

webpack alias

I'm using react-native-web and have edited kit/web/base.js to add:

// Export a new 'base' config, which we can extend/merge from
export default new WebpackConfig().merge({

  // Javascript file extensions that webpack will resolve
  resolve: {
    // I tend to use .js exclusively, but .jsx is also allowed
    extensions: ['.web.js', '.js', '.jsx'],
    alias: { 'react-native': 'react-native-web '},
...

But I'm getting this error:

  ERROR in ./components/Post.js
    Module not found: Error: Can't resolve 'react-native' in '.../reactql/components'
     @ ./components/Post.js 4:0-79
     @ ./pages/index.js
     @ ./App.web.js
     @ ./kit/App.js
     @ ./kit/entry/browser.js

Do I need to edit another config file somewhere?

No Typescript Version ?

Just downloaded and installed reactql cli
Ran new project but it did not give me any prompts to select language.

I am using v3.9.1 and I would like to download the Typescript version of the bundle. How do I do this please ?

Working with unwind

Hi Lee,

Let me first join the chorus of folks thanking you for this stellar project. Thank you!

My project hit a snag trying to wire up reducers that play nice with the new unwind( ) code in kit/lib/redux. Although I can imagine you have a lot on your plate, it would be really helpful to have examples and docs for reducers in the unwind array.

imported css file build error

I want install blueprint.js. After I import blueprint.css, see below.

// in app.tsx
// React
import * as React from 'react';
import { SFC } from 'react';

// Routing
import {
  match,
  Link,
  Route,
  RouteComponentProps,
  Switch,
} from 'react-router-dom';

// <Helmet> component for setting the page title
import Helmet from 'react-helmet';

import {compose, pure} from 'recompose';

// NotFound 404 handler for unknown routes
import { NotFound } from 'kit/lib/routing';

// Styles
import './styles.global.css';
import '@blueprintjs/core/dist/blueprint.css';   // import blueprint.css

I expect that code work well. But I've got error.

// Error
/Users/imjuni/Project/[project_path]/node_modules/@blueprintjs/core/dist/blueprint.css:1
(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";
                                                              ^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/imjuni/Project/company/yanolja-joy-admin/dist/server_dev.js:773:18)
    at __webpack_require__ (/Users/imjuni/Project/company/yanolja-joy-admin/dist/server_dev.js:20:30)

[at-loader] Checking started in a separate process...

I guess that is caused from node_module. (Usually JavaScript parser meet css file, raised that error). But configuration already describe externals.

// server.js
externals: [
    nodeModules(),
  ],

What is missed? Can you help me?

SVG not loaded correctly in server_dev

Hi, first of all thanks the great starter kit, after trying many, ReactQL proved to be the most straight forward and fully featured I was looking for.

I am running into an issue while importing svg files in a react component.

import enFlag from 'flag-svg-collection/flags/4x3/gb.svg';

The browser bundle is done correctly and the svg loads fine but when I refresh the page the server tries to render the components and fails trying to load the svg with this error:

/path-to/node_modules/flag-svg-collection/flags/4x3/gb.svg:1
(function (exports, require, module, __filename, __dirname) { <svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.defineProperty.value (/path-to/dist/server_dev.js:1694:18)

My guess is that the svg is not being run through the file-loader but I've been checking the webpack configs and everything looks fine. Any ideas / pointers?

debugging/inspecting in SSR server_dev.js

Hey Lee,
I'm looking to debug the server_dev.js process in the node-inspector. In server_dev.js, the childProcess.fork seems the place to put a debug signal. but it doesn't work. Have you managed to debug a node process that webpack keeps killing and re-spawning?

class ServerDevPlugin {
  apply(compiler) {
    compiler.plugin('done', () => {
      if (this.server) this.server.kill();
      this.server = childProcess.fork(path.resolve(PATHS.dist, 'server_dev.js'), {
        cwd: PATHS.dist,
      });
      this.server.send('SIGUSR1')
    });
  }
}

Issue with docker build

I'm running into issues with the docker build. On a completely blank install - just ran reactql new, then docker build . -t projectname - and I'm getting this.

Step 8/11 : RUN npm run build
 ---> Running in d725d4598e1c

> [email protected] build /src
> cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors

(node:24) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
Child
    Hash: 87d237d27a0c2dd244c8
    Time: 10357ms
    
    ERROR in chunk manifest [entry]
    [name].[chunkhash].js
    Chunk.entry was removed. Use hasRuntime()
    Error: Chunk.entry was removed. Use hasRuntime()
        at Chunk.get entry [as entry] (/src/node_modules/webpack/lib/Chunk.js:49:9)
        at registerChunk (/src/node_modules/chunk-manifest-webpack-plugin/lib/ChunkManifestPlugin.js:28:73)
        at Array.reduce (native)
        at registerChunk (/src/node_modules/chunk-manifest-webpack-plugin/lib/ChunkManifestPlugin.js:36:27)
        at Array.reduce (native)
        at MainTemplate.<anonymous> (/src/node_modules/chunk-manifest-webpack-plugin/lib/ChunkManifestPlugin.js:25:33)
        at MainTemplate.applyPluginsWaterfall (/src/node_modules/webpack/node_modules/tapable/lib/Tapable.js:92:24)
        at MainTemplate.plugin (/src/node_modules/webpack/lib/MainTemplate.js:106:31)
        at MainTemplate.applyPluginsWaterfall (/src/node_modules/webpack/node_modules/tapable/lib/Tapable.js:92:24)
        at MainTemplate.render (/src/node_modules/webpack/lib/MainTemplate.js:175:31)
        at Compilation.createChunkAssets (/src/node_modules/webpack/lib/Compilation.js:1254:34)
        at sealPart2 (/src/node_modules/webpack/lib/Compilation.js:629:10)
        at next (/src/node_modules/webpack/node_modules/tapable/lib/Tapable.js:184:11)
        at /src/node_modules/extract-text-webpack-plugin/dist/index.js:241:13
        at /src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:421:16
        at iteratorCallback (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:998:13)
        at /src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:906:16
        at /src/node_modules/extract-text-webpack-plugin/dist/index.js:224:15
        at /src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:421:16
        at eachOfArrayLike (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:991:9)
        at eachOf (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1051:5)
        at Object.eachLimit (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3145:5)
        at /src/node_modules/extract-text-webpack-plugin/dist/index.js:189:29
        at /src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3083:16
        at eachOfArrayLike (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1003:9)
        at eachOf (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1051:5)
        at Object.eachLimit (/src/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3145:5)
        at Compilation.<anonymous> (/src/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
        at Compilation.applyPluginsAsyncSeries (/src/node_modules/webpack/node_modules/tapable/lib/Tapable.js:188:13)
        at Compilation.seal (/src/node_modules/webpack/lib/Compilation.js:579:8)
Child
       42 modules

Couldn't parse bundle asset "/src/dist/public/browser.94235cfb9483ffed8e65.js".
Analyzer will use module sizes from stats file.

Webpack Bundle Analyzer saved report to /src/dist/report.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-07-25T17_20_14_715Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 2

Best way to handle subscriptions with server side rendering?

Seems like right now I'll need to wrap each request for subscription with a check to determine if we're on the client or not? Any help would be greatly appreciated!

Thanks!

Why using redux when apollo client manages its own store?

The initial look at the project seems very promising. However, I am wondering why are you using redux for state/store management when apollo-client uses its own internal store.

Or you just provide redux integration in case someone wants to utilize it, but redux is not necessary in order to build the client side.

Replace Airbnb linting with prettier

Airbnb code guide is great, but developer's job is to focus on code, not on code styling. Prettier "just works" and produces nicely formatted code without forcing you to think about formatting.

Unable to choose between ES6 and Typescript during "reactgl new" setup

First of all, fantastic repo, documentation, and onboarding videos. One of the most complete and polished experiences I've ever had with a boilerplate -- thank you so much!

I have successfully installed via npm install -g reactql. However, I never encountered the opportunity to choose between ES6 and Typescript ("Which version of the kit would you like?") that was supposed to appear right after "Where to install?".

Here is my terminal output:

$ reactql new
================================================================================

██████╗ ███████╗ █████╗  ██████╗████████╗ ██████╗ ██╗
██╔══██╗██╔════╝██╔══██╗██╔════╝╚══██╔══╝██╔═══██╗██║
██████╔╝█████╗  ███████║██║        ██║   ██║   ██║██║   v3.7.1
██╔══██╗██╔══╝  ██╔══██║██║        ██║   ██║▄▄ ██║██║
██║  ██║███████╗██║  ██║╚██████╗   ██║   ╚██████╔╝███████╗

Spawning new project...

? Project name? test
? Project description? New ReactQL project
? License? UNLICENSED
? Where to install? /Users/sunw/test

================================================================================

Downloading kit v1.15.1 from Github...

Server/browser awareness issue

When I try this

async componentDidMount() {
    if (!SERVER) {
      try {
        await screenfull = import('screenfull');
      } catch (e) {
        console.log('Module did not load!');
      }
    }
  }

Build fails with error "Invalid left-hand side in assignment expression" and the ESLinit highlights the await

If I change it to this:

const screenfull = await import('screenfull');

I've got regeneratorRuntime
The setup is almost fresh, just few react components.

npm -v 4.1.2
node -v v7.6.0

Any ideas ?

ES6+ linting

I have a component which uses ES6+ features e.g.

myComponent extends React.Component { static propTypes = {

This throws a syntax error as expected because it is an ES6+ feature. In the past I have installed the relevant npm modules e.g. ("babel-preset-stage-0":) and altered the babel.rc file and it has been successful but even with these additions in this setup, i'm still getting syntax errors:

My babel.rc file looks like this

{
  "presets": [
    ["env", {
      "targets": {
        "node": true
      }
    }],
    "react",
    "stage-0",
    "es2015"
  ]
}

Package.json:

"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",

can't run dist

1.yarn build
2.cd ./dist
3.node server.js

Error: ENOENT: no such file or directory, open '/Users/bobo/Documents/bobo/demoCode/reactQlDemo/firstreactql/dist/dist/manifest.json'

What has many dist in path?

Could you suporto Join Monster (for SQL)?

Docs from Join Monster
http://join-monster.readthedocs.io/en/latest/

Adapter for Apollo.
https://github.com/acarl005/join-monster-graphql-tools-adapter

Best Regards.

default favicon

There's a funny behavior right now when running in prod. When a request for favicon.ico hits the Koa server, a full page render is retuned. Easiest way to fix this would be to use something like https://github.com/jantimon/favicons-webpack-plugin with the project logo. Then it also makes it easy for developers to swap out the favicon later to their project's logo.

Long term caching with chunkhash

One feature that would be great to have is long-term caching of chunks by using webpack's chunkhash feature. On the browser production build, output files would be renamed to something like [name].[chunkhash].js. The consequence is that file names are not predictable anymore so that on the server side render, the webpack stats would need to be read to get the file paths of the javascript files.

Support Build to mobile ?

Hi author, reactQL is awesome ! but can we build it to Mobile with cordova or election ?
i want build app run both PC, Web and Mobile.
any ideas please help !

resolve-url-loader cannot operate error msg

I'm having an issue with resolve-url-loader:

I have various sass folders/files (see below) and I'm importing them into the main.scss file within a global block.

:global {

/* Insert any additional CSS you need here */
@charset 'UTF-8';

// 1. Configuration and helpers
@import
  'styles/abstracts/variables',
  'styles/abstracts/functions',
  'styles/abstracts/mixins';

(omitted for brevity)

}

While the styles are rendering it throws the following error. After doing some research, I'm still not sure why it's happening.

WARNING in ./~/css-loader?{"modules":true,"importLoaders":1,"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./src/styles.scss
(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
  @page missing '}'
  at error (/home/node_modules/css/lib/parse/index.js:62:15)
 @ ./src/styles.scss 4:14-182 13:2-17:4 14:20-188
 @ ./src/app.js
 @ ./kit/entry/browser.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./kit/entry/browser.js

Any help appreciated!

browser run not working

i have an issue with latest build with browser hot reloading not loading website at all with clean install with CLI, SSR is working.

best way for email?

Hello, im pretty new with nodejs.
Im trying to send mail via contact form in reactql, i used 'koa-mailer' node module, but i can't get it to work , do you have maybe some recommendation for easiest way to send mail?
Thank you in advance!

Zopfli and Brotli Compression

I was investigating using alternative compression methods and compiled these results. Specifically I wanted to test zopfli which is a gzip implementation that is supposed to compress 5% smaller than traditional gzip. I also tested Brotli which is a completely different algorithm that achieves significantly better compression and is getting fairly high support as of now http://caniuse.com/#feat=brotli. Overall the time to run yarn run build didn't vary much and is within the margin of error that the difference in compression time is negligible. I think the best option is using Brotli and Zopfli together as the .br file is downloaded for the most modern browsers, .gz for those that accept gzip, and then the regular file as the least common denominator fallback.

Downsides are that both these algorithms are native-addons and those can still be tricky sometimes for Windows users I've noticed. However, this project already uses native-addons from node-sass anyways so that can be negated. The other problem is that koa-static doesn't support the Accept-Encoding: Brotli header just yet, but I and I imagine most others use nginx in prod anyways for static files. I was also going to file a PR for koa-static anyways. Nginx doesn't natively support Brotli yet, but google maintains ngx_brotli for using nginx.

Otherwise opinions on this would be great, along with if these compression options should be configurable or not from the config files. If so, would this type of compression be opt-in or opt-out?

Algorithm	reactql-logo.svg	browser.js	vendor.js	style.css	Total	Time
None	1.02 kB	5.1 kB	375 kB	778 bytes	382 kb	NA
Gzip	604 bytes	2.15 kB	110 kB	437 bytes	113 kb	30.69s
Zopfli	593 bytes	2.13 kB	106 kB	426 bytes	109 kb	26.72s
Brotli	545 bytes	1.86 kB	88.7 kB	354 bytes	91 kb	23.52s
Brotli + Zopfli	545 bytes	1.86 kB	88.7 kB	354 bytes	91 kb	32.63

SSR + code-splitting

Hey @leebenson!

Nice starter kit! I have a similar setup with SSR based on react-router@3 and everything works fine. I aim to refactor in the near future and this setup looks great for that. Wondering what your thoughts are on SSR + code-splitting with v4?

Install issue

First, great project and good job. I had a small issue with the dependencies. Is the CLI supposed to download all the dependencies?

Here's how to repeat my issue:

Here's my steps:

reactql new
cd .\reactql-app
npm start
...
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server --colors
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --colors'.
...

then did a npm install and it fixed the issue.

npm install

Comparison with Next.js

I think GraphQL + React + Apollo + Webpack + SSR is a good combo :-)

How about using Next.js? 2.0 just came out: https://zeit.co/blog/next2
Then this repo could focus on integration of Apollo, styling, asset handling, etc.

I made an proof of concept trying to assemble that stack too: https://github.com/relatenow/relate
Hoping to bring these ideas in my production system as soon as I can.

Add Typescript version

kit.ts is released - add it to the CLI.

Styled Components?

Hey, Lee!

What are your thoughts on incorporating styled-components instead of SCSS?

webpack.config.babel.js is not DRY, perhaps use cross-env instead?

I tried renaming the "start" script in package.json to "dev" because that's what I typically use in my other projects, but then I hit this error:

invoke through npm only

I thought it was because I was using yarn dev instead of npm run dev, but then I looked at the stack trace and saw where it was coming from.

Point is, it's not very nice to have to keep two different files in sync. Could you perhaps update the commands to something like,

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env WEBPACK_ENV=browser_prod,server webpack --colors",
    "build-browser": "cross-env WEBPACK_ENV=browser_prod webpack --colors",
    "build-server": "cross-env WEBPACK_ENV=server webpack --colors",
    "build-run": "webpack --colors && node dist/server",
    "lint": "eslint .",
    "server": "node dist/server",
    "start": "cross-env WEBPACK_ENV=browser_dev webpack-dev-server --colors"
  },

i.e., use cross-env to set an environment variable, and then check the environment var in webpack.config.js and load up the additional configs? This is basically what I do and it's been working great.

Progressive web app

Explore adding in features of Progressive Web Apps

can you see a react-cli for dva-cli?

can you see a react-cli for dva-cli?
I hope you can see a dva-cli

Running SSR server in development

Right now it doesn't seem like there is a way to run the ssr server in development. This would be useful as a common mistake in React dev is having the server and client checksums not match on hydration. Also it just makes it difficult to test changes to the server as well without doing a full rebuild. I'm thinking the way to go about this is to make a base webpack server config, like browser does, and then have have separate server_dev and server_prod extensions. The server_dev would have unnecessary optimizations not enabled for faster rebuilding and have watch mode turned on. Then use nodemon to watch for rebuilds of the server.js output. As I've been filing a number of issues already, I wouldn't mind tackling this and #11 in separate PRs bearing your opinions.

Replace EJS with plain React?

I like the minimalism approach of this starter kit. Do you think that using React renderer instead of EJS will have some negative impact? This means one less dependency to manage. I could do a PR (trivial), but I need your permission to start working on it.

Not emitting es modules

Very useful project here. One concern I had is that in kit/webpack/browser.js, modules is not set to false which means by default import statements are transpiled to commonjs meaning that not all tree shaking optimizations can be taken advantage of. However when I change this, there is no change in size of the output bundle. Not sure exactly why this is, and was wondering if you had an idea.

Add CLI option for JS/TS selection

Currently there are the following CLI options:

Options:
--name, -n New project name
--desc, -d Project description
--path, -p Path to install the starter kit
--license, -l License for pkg.json
--help Show help

It would seem that if there was a Javascript/Typescript option that a user could pass in, that one could do reactql new <all options> and avoid the interactivity of the CLI, if their use case so called for it. Adding this option seems within the confines of the intent of ReactQL - all the other CLI options are there, except for JS/TS.

Enhancement request for sure in my mind, but would be a nice to have...

SSR production mode is slower than SSR development mode

Hello, today i've spent quite a bit of time reading about SSR performances because I've noticed that running my project with "npm start" and visiting the SSR page (which is now in dev mode ) versus running "npm run build-run" and visiting the SSR page ( which is now in prod mode) gave weird results.
In quite a lot of guides they say that just building react from dev mode to prod mode should give you a 300-400% boost in perfs...
But the more i tried to refresh the page the more for me it felt slower in prod mode.
So i added a simple code to test ReactDOMServer.renderToString(components);

 // Full React HTML render
    const start2 = ms.now();
    const html = ReactDOMServer.renderToString(components);
    const end2 = ms.parse(ms.since(start2));
    const total2 = end2.microseconds + (end2.milliseconds * 1e3) + (end2.seconds * 1e6);
    console.log(`${total2 / 1e3}ms`);

At first I tought that I've must done some errors somewhere.. so today i've updated reactql and started a fresh project and added the bare code needed ro reproduce the issue: in my case i'm rendering a tree data structure with <ul>s and <li>s. The more nodes the tree had the slower the production mode would be in executing const html = ReactDOMServer.renderToString(components);.

TL;DR: Why reactql in Production is slower to run ReactDOMServer.renderToString(components); than the Dev mode the more components you have to render?

I know this will be hard to read, i'm here if you need me to explain or provide more infos

Edit: apart for the console.log to measure the ms of the function this is the only code i've added:
http://puu.sh/wwFGr/dcb5f6e74d.png

This is issue is quite sersious because in the example i only used stateless components, but this is even more problematic when i need to have also state inside them to handle toggles, collapse, checkboxes, calculations ecc

Edit2: the data i've got
http://puu.sh/wwGey/e424a68cd2.png

And in my real project where the nodes are not this simple is way more problematic. How is this possible that in Prod mode it will take twice the time ?

ports on heroku

Hey, great kit. Really blows the rest of them out of the water.
I'm attempting to run on heroku. I've given up trying to get heroku to do a npm run build and am just building locally and pushing dist.

Here's my question. Heroku sets the port dynamically for web processes through process.env.PORT so i added it in kit/lib/env.js

const defaultPorts = {
  production: {
    server: process.env.PORT,
  },
  development: {
    browser: 8080,
    server: 8081,
  },
};

heroku gives me this error, with the same 4000 port. nothing changed. any ideas?

what am I doing wrong? thanks in advance.

Remove "extra" features

Generally keep package.json as lightweight as possible - this means don't add dependency unless it is absolutely necessary.
For example LESS, SASS and Redux are nice to have, but not essential. Having them enabled by default means more work to support them when not everyone would use/need them. A simple recipe on how to add them would suffice.

Community Platforms

We do need a gitter and forum for community needs. Also I'd like to see a twitter account for recent updates. It seems like finally we have a full stack graphql and developer interface, let's power up the community.

Awesome Project :)

Hi Lee,

First, thanks for this repo, I've started building my own graphql+koa+ssr react+etc and while I was searching for answers, I've found this and it's awesome! I would ask you to create a post on Medium teaching how to build this from scratch, but your code is so well documented that it's not even needed :)

I have two questions tho regarding subscriptions (I couldn't find it in your project). One is that I can't make it work with SSR, it asks for a native implementation of sockets, and if I add sockets, subscriptions stop working properly. Have you faced that already?

And the other question, is how you handle with connections on subscriptions? Like, suppose you want to return a User from a Post. How do you do it? I've tried and if I add the author field in the query, the subscription fails because it's missing the author information, if I don't, I don't get the value back and the field on the front end that needs the data breaks.

And, once again, thanks! :)

TypeScript CLI not working, it create JS project instead.

run the CLI and create a new project for TypeScript. it will create only JS project. no TypeScript sign in the project.

[v4.1.0] webpack "failed to compile" when using sequelize

OS: macOS 10.12.2
Node: v7.6.0
Npm: 4.1.2

Steps:

1. reactql new (created new project using defaults)
2. npm install sequelize --save (fine)
3. added import Sequelize from 'sequelize'; to /src/app.js
4. npm start

Getting this error:

Failed to compile.

(undefined) ./node_modules/sequelize/lib/dialects/mssql/query.js
Module not found: Error: Can't resolve 'tedious' in '/Users/{my username}/Documents/reactql/reactql-app/node_modules/sequelize/lib/dialects/mssql'
 @ ./node_modules/sequelize/lib/dialects/mssql/query.js 10:14-32
 @ ./node_modules/sequelize/lib/dialects/mssql/index.js
 @ ./node_modules/sequelize/lib/sequelize.js
 @ ./node_modules/sequelize/index.js
 @ ./src/app.js
 @ ./kit/entry/browser.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./kit/entry/browser.js

I got the same result on a windows 10 machine. Since I'm not seeing any related issues in the sequelize repo, I'm assuming this has something to do with the webpack config, perhaps?

Roadmap

General roadmap for upcoming ReactQL features, and a tentative order they'll be approached.

Feel free to suggest any features you'd like to see in this thread, and they'll be considered for inclusion.

Note: The raison d'être of ReactQL is to remain a lightweight, general purpose starter kit for building GraphQL-backed front-ends. Niche features should generally be built on top of the kit, rather than wind up in core. But all sensible use-cases and suggestions will be considered.

Soon:

• ReactQL CLI, installed via npm i -g. Easily spawn a new project with reactql new instead of manual git clones and tidy-up. Will make it easier to version the kit and distribute the start-up code offline.

• Yarn building. Should speed up equivalent npm installs of modules.

• Better SASS/LESS imports. The loader config needs tweaking to standardise import styles between different CSS loaders. Could also do with a better strategy for importing third-party classes globally or locally, for better framework support -- Semantic, Bootstrap 4, etc.

• Typescript option.

• Development web server, that restarts automatically on code changes, alongside the existing hot-code reload Webpack dev server.

• Deterministic versioning- have one kit version per CLI installation, which can alert when there's an update available, so there are no surprises when creating a new project and finding that the kit has changed.

• Helper component for code splitting and loading screens a la #3, along with updated docs.

• Video guides & articles in docs for common use cases and code tutorials on how to use GraphQL in practice like how to build a GraphQL server on top of the kit, etc.

• i18n / l10n internationalisation / localisation support (After some testing, it's clear that i18n is far too opinionated to suit every use case-- libs, translation loading strategies, etc will differ widely per project. I'll save this one for a future 'examples' kit)

Future / tentative

• Progressive web app features (#40)

• Mobile/desktop framework support, for creating Cordova/Phonegap/Electron apps.

Example kits

• i18n / internationalisation. (Originally, I wanted this in core, but there are far too many ways this could be done. An example starter is probably best.)

• GraphQL subscription examples and patterns. Possible web socket proxy via the built-in server? (needs more thought)

babel spread operator problem

Hello, I've a problem with babel transpiling.

npm run start // command I use to run
npm -v 4.1.2
node -v v7.5.0

Standard ES6 I copied from reacttraining examples.

The code: (don't mind this 1===1, it's just for testing)

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (

    1===1 ? (
        console.log(props);
      ) : (
        <Redirect to={{
          pathname: '/sign-in',
          state: { from: props.location }
        }}/>
      )
  )}/>
)

Besides default reactQL .babelrc I tried following setup:

{
  "presets": [ "react", "stage-3",
    ["env", {
      "targets": {
        "node": true
      }
    }]
  ]
}

Here is error I am receiving:

Not sure why it is not working. Clearly I am missing something.

starter kit typescript option on install

Hi,

On the latest version 3.8.0 in the starter kit the option to choose between ES6 Javascript or Typescript is gone and ES6 is chosen by default.

Is the typescript support removed?

Thanks

express.js

Thanks for this starter kit.
I am not familiar with Koa server and I was wondering if you have this kit with express.js instead? I have existing code that runs on express.js and I don't know Koa. How hard is it to change the kit to express? If any body has done it, please let me know.
Thanks

server side rendering in development

Hi
Does the kit provide server side rendering in development? Wouldn't that be helpful during development?
Thanks