sysgears/apollo-universal-starter-kit

Apollo Universal Starter Kit is a SEO-friendly, fully-configured, modular starter application that helps developers to streamline web, server, and mobile development with cutting-edge technologies and ultimate code reuse.

apollo-universal-starter-kit's Issues

How to access assets?

Hi, I've scoured the project's config and Webpack docs. I've also seen the favicon.ico example in the App, but I still can't access an image for inline insertion.

My image is located at /src/assets/images/marker-cluster--magenta.png. Here's one of my more promising attempts:

const markerClustererImage = require('!file?name=[name].[ext]!../../../assets/images/marker-cluster--magenta.png'); // eslint-disable-line import/no-webpack-loader-syntax
console.log(markerClustererImage);
// /marker-cluster--magenta.png

Could you kindly explain how the loaders, assets, etc are handling images? Thank you!

Typo in dataObjectFromId

See this line

__typenamfe should be __typename

SSR error RENDERING ERROR: Error: Cannot automatically buffer without a document

I was wondering if you have run across this error?

I have a project that is based on your starter kit.
I am seeing the following aphrodite usage related error when the SSR code path is triggered.

backend error RENDERING ERROR: Error: Cannot automatically buffer without a document
    at injectGeneratedCSSOnce (/Users/keng/work/virtuosityworks/wade/node_modules/aphrodite/lib/inject.js:138:23)
    at injectStyleOnce (/Users/keng/work/virtuosityworks/wade/node_modules/aphrodite/lib/inject.js:156:9)
    at injectAndGetClassName (/Users/keng/work/virtuosityworks/wade/node_modules/aphrodite/lib/inject.js:232:5)
    at css (/Users/keng/work/virtuosityworks/wade/node_modules/aphrodite/lib/exports.js:133:54)
    at MyComponent.render (/Users/keng/work/virtuosityworks/wade:42:1)
    at getChildFromComponent (/Users/keng/work/virtuosityworks/wade/src/server.ts:30:55)
    at getQueriesFromTree (/Users/keng/work/virtuosityworks/wade/src/server.ts:68:18)
    at getQueriesFromTree (/Users/keng/work/virtuosityworks/wade/src/server.ts:67:5)
    at getDataFromTree (/Users/keng/work/virtuosityworks/wade/src/server.ts:88:3)
    at /Users/keng/work/virtuosityworks/wade/src/server.ts:99:14

In my use case, MyComponent contains a stylesheet that has dynamic content determined by a graphQL query. The stylesheet looks like what is shown below where the value of bg_image comes from a graphQL query.

    const styles = StyleSheet.create({
      splashContainer: {
        position: 'absolute',
        top: 50,
        left: 0,
        width: '100%',
        height: max_height,
        backgroundSize: `cover`,
        backgroundPosition: `center 67%`,
        backgroundImage: `url(${bg_image})`
      },
    });

__DEV__ is false when running tests

Hi,

First of all thanks for this great kit.

I'm starting to write tests, and saw that __DEV__ is false when running npm test. This happens because of the line
global.__DEV__ = process.argv.length >= 3 && process.argv[2] === 'watch';

I've fixed it for now with
global.__DEV__ = process.argv.length >= 3 && (process.argv[2] === 'watch' || process.argv[1].indexOf('mocha-webpack') >= 0);
But I thought that maybe there is a better solution which should be applied.

Failure to load

Hi! I followed the instructions in README.md, and when I ran npm start, and browse localhost:/3000/counter, I see this error in the console log:

Production environment thinks it is in Development environment.

Hello, I've had some trouble running my project in a production environment (AWS Ubuntu Linux). After a bit of tinkering I decided to git clone the latest version of this repo and run it with NODE_ENV variables set to see what it does and here are the results:
(Following instructions found in the latest README to install, migrate, seed, etc...)
After running NODE_ENV=production npm install ...

App seems to install with only a few prompts, no big deal. Moving forward...

Running within the browser even with the NODE_ENV variable set makes the app think it's still in the dev environment, looking for websockets, etc.

Thoughts? Thanks guys!

Could we place style files in their own directory?

Hi guys. I create sizable, customized sites/apps where there's a lot of components and SCSS modules that are then imported in a large style index file (in our case, styles.scss). These files need to go somewhere and I like to keep things as organized as possible to improve scalability and so my style organization looks like this:

The way things are structured now is fine if you're heavily reliant on Bootstrap and/or have minimal custom style definitions. If you customize SCSS variables or create a library of custom components that you want in their own individual files it's up to you to organize (and manually restructure every time you fetch from upstream/master.

My question is this: can we keep the .scss files in their own style directory? I can make a PR in the future if this idea is well-received but it probably won't happen in 1-2 weeks.

Upgrade to apollo-client 0.5

Any plans to up upgrade to apollo-client 0.5 package?

Tried it on my own but am running into some ssr problems. I keep getting:
"Apollo initial state may not contain queries, only data" error, which seems to be caused by ssr, but was not able to find the problem.

Ws subscriptions on heroku

Can you give me a pointer re getting websockets to work on heroku?

websockets_server.js obsolite?

Is src/server/websockets_server.js obsolite?

If I delete it everything still seems to work.

Migrate to Webpack 2

Please do an update to webpack 2.

Question: Does component Main need prop named router?

Hi!
I am looking at the code for the client-side. Does the Main component need a prop named router? How is it used? See lines 14 and 27 in src/client/index.jsx

Add PersistGraphQL support during development and production

This is a ticket to track progress of adding PersistGraphQL support during development and production.

The Pull Request by @mitjade to add PersistGraphQL support logic:
#46

The effort to implement Webpack Plugin for PersistGraphQL:
https://github.com/sysgears/persistgraphql-webpack-plugin
The plugin works at the moment for:

• single complier configuration (webpack for front-end only)
• multiple compiler configuration (webpack for back-end and front-end) and sharing generated queries from front-end to back-end webpack instance
• hot module replacement should be fully supported for persisted queries
  Plugin still lacks documentation, full-test coverage and submission to npm registry.
  The feature request for PersistGraphQL plugin exists here as well:
  apollographql/persistgraphql#16

The PersistGraphQL is based on more subtle plugin that implements concept of Webpack Overlay Modules - that live in memory additionally to modules from file system. These in-memory modules could be manipulated by higher order plugins to have means of communication between webpack compiler instances and source code through hot module replacement mechanisms:
https://github.com/sysgears/webpack-overlay-modules
Webpack Overlay Modules Plugin needs documentation, full-test coverage and submission to npm registry.
This starter kit could benefit from Webpack Overlay Modules concept to have more robust implementation of front-end reloading on back-end changes

Redux integration

When trying to integrate Redux into my project I keep getting:

warning.js:36 Warning: React attempted to reuse markup in a container but the checksum was invalid.

Added store in src/server/middleware/website.jsx and src/client/main.jsx like:

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import TestReducer from '../store/reducers/test_reducers';

const store = createStore(
  combineReducers({
    test: TestReducer,
    apollo: client.reducer(),
  }),
  {}, // initial state
  compose(
    applyMiddleware(client.middleware()),
  )
);
...
<ApolloProvider store={store} ...

I presume it has to do with ssr, but can not figure out how to solve this.

Integrate error handler

Hi,
I have just publish new module graphql-apollo-errors. (Fully tested with 100% coverage)
This module help to handle errors in a better way for example:

• Make everything structured the same way
• FInally get the full error in the client (not only message path and location)
• Hooks for logging/storing the errors

and much more

I think it will be great to embed this into this project.
I already wrote all the code in my personal project (based on this starter-kit).
So I think to create a PR for this.

What do you think?

Thanks.

rewire integration

Hi,
Would be great to integrate rewire (as a way to test private functions / vars)
It's a bit tricky with the es6 import/export and mocha webpack.

This might work:
https://www.npmjs.com/package/rewire-webpack
Or maybe this
https://github.com/speedskater/babel-plugin-rewire

What do you think?
Thanks.

Turn off SSR

Hi,
I really like your starter kit and I'm using it for my apps.
But recently I understand that most of the time I don't really need SSR.
(See reference here)
It is work out of the box using the starter kit, but it require more maintenance, and it's time-consuming. (for example, authentication mechanism with SSR are much harder)
Also, for example, using a library such as highchairs which need the window, and require a lot of effort to somehow support SSR.

I'm wondering is there a way to turn off / comment everything related to SSR?

Thanks a lot!
Gilad.

Add hot reload screencast

source maps for server code

I saw few configurations related to source maps like:

new webpack.BannerPlugin('require("source-map-support").install();',
      { raw: true, entryOnly: false }),

devtool: __DEV__ ? '#cheap-module-source-map' : '#source-map',

devtool: __DEV__ ? '#eval' : '#source-map',

But yet when I have an error in my console I see it referring to the bundled file:

{ Error: some error
    at Function.addShowingRequest (my-app-path/build/server/0.d2049b2bca4ab66ea103.hot-update.js:96:14)
    at addShowingRequest (my-app-path/build/server/index.js:3948:47)

Is there anything else need to be configured to make it work?
Thanks!

Help - problems with routes with url params

Hi,

I have a problem with routes with URL params like /users/:id/
The problem starts on this commit:
9c3ed91
It looks like it tries to find the vendor/bundle files in the wrong place.
for example, in a route with URL param (/recover/:id), the bundle will be under recover

while on a route without an URL param it will look like this:

you can also see that the content is different, which prevent it from work.

I'm pretty sure it's something about moving the output to the root folder, (it worked before).
But I couldn't make it work.

I'm using the starter kit on a version before the react router 4 and webpack 2.
Those may solve the problem, but I don't have the time for this upgrades now.

Any Idea about what can make this working again?

Thanks a lot.

Error SubscriptionClient is not a constructor

I have just run the project from scratch in the latest version, and when I load the counter page i got an error and the buttons are not working:

main.jsx:82 Uncaught TypeError: SubscriptionClient is not a constructor
    at eval (main.jsx:82)
    at Object../src/client/main.jsx (bundle.080c0f3….js:601)
    at __webpack_require__ (bundle.080c0f3….js:556)
    at fn (bundle.080c0f3….js:87)
    at eval (index.jsx:9)
    at Object../src/client/index.jsx (bundle.080c0f3….js:2155)
    at __webpack_require__ (bundle.080c0f3….js:556)
    at fn (bundle.080c0f3….js:87)
    at eval (multi_bundle:2)
    at Object.0 (bundle.080c0f3….js:594)

(I run evrything with npm and not with yarn)
I guess it something that has been changed with one of the latest version, but not sure.
Any way currently it's not working at all.

batchInterval set to 500?

I am interested why is batchInterval set to 500.

This causes my app to be really slow. If I set it to 20 everything is much faster. Just interested if this is there of a reason or can this be reduced?

JS Assets not found when navigating to a nested route

It appears Webpack doesn't properly resolve the location of assets when navigating to a nested route. This should be addressed as it means only routes at the top level will operate correctly.

This is what happens when running in production mode and you navigate from a top level location to a nested link:

And this is what happens when you load a nested route in development mode:

When you click the bundle or vendor JS the console is reporting it returns the output above: all the markup needed to render a 404 HTML page inside both vendor.js and bundle.js.

Integrate with apollo-passport

Hi,
I'm trying to integrate apollo-passport.

Part of the client confuguration is to add using the local startegy as described here:

// Configure Apollo
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import ApolloPassport from 'apollo-passport/lib/client';
import ApolloPassportLocal from 'apollo-passport-local/lib/client';
import apMiddleware from 'apollo-passport/lib/client/middleware';

const networkInterface = createNetworkInterface('/graphql');
networkInterface.use([ apMiddleware ]);

const apolloClient = new ApolloClient({ networkInterface });
const apolloPassport = new ApolloPassport({ apolloClient });

apolloPassport.use('local', ApolloPassportLocal);

Of course on the server side this won't really work because of localstorage doesn't exist on the server side.

There is an issue about it over there Isomorphic app which points to this example:

if (__CLIENT__) {
  const networkInterface = createNetworkInterface('/graphql');
  networkInterface.use([ apMiddleware ]);

  apolloClient = new ApolloClient({ networkInterface });
  apolloPassport = new ApolloPassport({ apolloClient });
  apolloPassport.use('local', ApolloPassportLocal);
}

Therefor i added on apollo_client file something like:
const createApolloPassport = apolloClient => {

const createApolloPassport = apolloClient => {
  if (__CLIENT__) {
    apolloClient = apolloClient || defaultApolloClient;
    let apolloPassport = new ApolloPassport({ apolloClient });
    apolloPassport.use('local', ApolloPassportLocal);
    return apolloPassport;
  }
  return;
};

But the CLIENT is always false.
I'm wondering when will this be a true value?
I thought that disable the SSR will solve the problem, but it doesn't.

Help would be welcomed.
Thanks a lot.
Gilad.

Webpack 2.3.1 does not compile, misconfigured output path

Hey there,
First notice the issue itself as dev build does not compile. Which is not too complicated to resolve at all. I assume that it is simply due to new validations added to webpack 2.3.1 to ensure output.path to be a absolute path, see error messages below.

Using Webpack DLL vendor bundle
webpack-for-backend Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "build/server" is not an absolute path! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "build/server" is not an absolute path!

Upon further investigation though, when I try putting together a small fix I noticed git is staging new files, server code bundles, under tools directory (will include client bundles too if in prod mode). This is probably due to somewhere in point the build scripts and config are moved from project root to tools folder causing the context to be wrong.
This looks like misconfiguration, probably the reason why webpack 2 now reinforce the use of absolute path for output.path now too. It makes the context of the project structure much easier to reason about.

Merge SCSS files before injecting into HTML

Hi guys, it's me again 🤘. I noticed that Bootstrap SCSS and styles.scss are both included inside html.jsx. There's a few things here and I just wanted some clarification.

<style dangerouslySetInnerHTML={{ __html:
          require('../styles.scss')._getCss() +
          require('../bootstrap.scss')._getCss()
}}/>

1. The first thing that pops out to me is that styles.scss is loaded before bootstrap. I understand you might want to assign variables in styles.scss that bootstrap.scss would then use in place of their own, but any other css would likely be overridden by Bootstrap and that may be undesired for some developers.
2. You could leverage Sass imports and include bootstrap.scss internally at the top of the styles.scss file. If you're setting styles.scss to be before bootstrap.scss because you want to assign variables, a _variables.scss can be created. Note the underscore there, it allows variables to be scoped into the .scss file that imported it. Place bootstrap variable overrides in that and include as follows:

// styles.css
@import 'variables';
@import 'functions';
@import 'mixins';
@import 'bootstrap';

body {
  background: $gray-lightest;
}

Now my directory structure looks like this: (note: I added a styles directory because I plan on having quite a few modular files for Sass support)

style
├── _functions.scss
├── _mixins.scss
├── _variables.scss
├── bootstrap.scss
└── styles.scss

And now my html.jsx has the following:

<style dangerouslySetInnerHTML={{ __html:
          require('../styles.scss')._getCss()
}}/>

No rush on replying but I am curious about this. Thanks guys!

BREAKING: Run middleware and afterware only once per batched request

Is this something that might concern this starter kit, since it now uses apollo-client 0.10.0?

I found applyMiddleware in src/redux_store.js, should this be now applyBatchMiddleware ?

apollographql/apollo-client#1285

Webpack’ing your GraphQL Documents

Was reading https://dev-blog.apollodata.com/webpacking-your-graphql-documents-bf9697ed259b#.vd08fntp4 and tried this out on my fork.

Would this be something you might be interested in for this starter kit?

https://github.com/mitjade/apollo-fullstack-starter-kit/commit/56fdcbe192a46d12b38404e766bd17bfe3b212b4

Any thoughts, suggestions...

Can create a PR when I also add persisted queries.

Apollo subscriptions

Привіт guys :–)

Just wondering if you're planning to add a sample Apollo subscription to the counter. Real-time updates is smth that most starter kits are still missing these days; yours could one of the first ones!

Nice choice of tools BTW!

If persistedQueries turned on, you still see all the queries in source

If I take a look in the page source, you still see queries listed under:
window.__APOLLO_STATE__=...

Anything we can do about that?

react-hot-loader 3

Is there any plan to using react-hot-loader 3 ?

Consider modularizing resolvers inside schema.js

Hello, regarding the following block of code within schema.js, what is the path of least resistance to modularizing resolvers?

const resolvers = {
  Query: {
    count(ignored1, ignored2, context) {
      return context.Count.getCount();
    },
  },
  Mutation: {
    addCount(_, { amount }, context) {
      return context.Count.addCount(amount)
        .then(() => context.Count.getCount())
        .then(count => {
          pubsub.publish('countUpdated', count);
          return count;
        });
    },
  },
  Subscription: {
    countUpdated(amount) {
      return amount;
    }
  }
};

For larger projects the amount of queries, mutations, and subscriptions can make schema.js grow a substantial amount, would you handle resolvers by importing it from another file or import the corresponding Query, Mutation, and Subscription items from another place? I find value in staying in sync with this repo so please share your thoughts. Thank you!

How to publish an Array of sequelize object

Is this possible?

favicon support

Hi,
It will be great to add favicon support.
This requires few steps/options:

1. Add ico type to the loader of jpg/jpeg/png/svg
2. make sure the ico is available from the root app somehow - myhost/favicon.ico
3. Maybe add favicons-webpack-plugin to generate all the different icons (for browser, iphone, windows tiles and so on)
4. change the html.jsx or maybe use html-webpack-plugin to generate the necessary code.
   it can also be generated once using realfavicongenerator and insert it hardcoded to the html.jsx
   should look something like

<link rel="apple-touch-icon" sizes="180x180" href={require('../../img/logos/favicons/apple-touch-icon.png')}/>
<link rel="icon" type="image/png" href={require('../../img/logos/favicons/favicon-32x32.png')} sizes="32x32"/>
<link rel="icon" type="image/png" href={require('../../img/logos/favicons/favicon-16x16.png')} sizes="16x16"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="mask-icon" href={require('../../img/logos/favicons/safari-pinned-tab.svg')} color="#5bbad5"/>
<meta name="theme-color" content="#ffffff" />

(Also need to think about the manifest.json)

What do you think?

Just copied existing package to new folder and it is not working

Just copied working package to a new folder without node_module folder

in new folder used following commands

npm install

npm start
and here comes following error(s)

> [email protected] start /Users/Hassan/Documents/testing_folder
> if [ "$NODE_ENV" = production ]; then node --harmony $npm_package_app_backendBuildDir; else babel-node tools/webpack.run watch; fi

/Users/Hassan/Documents/testing_folder/tools/webpack.run.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at loader (/Users/Hassan/Documents/testing_folder/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Hassan/Documents/testing_folder/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at /Users/Hassan/Documents/testing_folder/node_modules/babel-cli/lib/_babel-node.js:159:24
    at Object.<anonymous> (/Users/Hassan/Documents/testing_folder/node_modules/babel-cli/lib/_babel-node.js:160:7)
    at Module._compile (module.js:413:34)

npm ERR! Darwin 16.3.0
npm ERR! argv "/Users/Hassan/.nvm/versions/node/v5.11.1/bin/node" "/Users/Hassan/.nvm/versions/node/v5.11.1/bin/npm" "start"
npm ERR! node v5.11.1
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `if [ "$NODE_ENV" = production ]; then node --harmony $npm_package_app_backendBuildDir; else babel-node tools/webpack.run watch; fi`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'if [ "$NODE_ENV" = production ]; then node --harmony $npm_package_app_backendBuildDir; else babel-node tools/webpack.run watch; fi'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the apollo-fullstack-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     if [ "$NODE_ENV" = production ]; then node --harmony $npm_package_app_backendBuildDir; else babel-node tools/webpack.run watch; fi
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs apollo-fullstack-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls apollo-fullstack-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Hassan/Documents/testing_folder/npm-debug.log

Loading main.jsx

Hi,

I saw that client/main.jsx is used only by client/index.jsx.
index.jsx is defined as the entry point of clientConfig in webpack.config.js.

I have tried to just log some message in the index.jsx / main.jsx and i didn't see the log.
Also look on the build folder and didn't saw the file under build/client (i only see there assets.json).

I wonder how those filed are used?

I use apollo-passport and tried to configure it inside main.jsx (because of apollo-passport use localStorage) so I need to configure it only on the client.

But I never get into this code.

Is this code run only after build and not on regular dev with an npm start?
If yes, how can I make it usable for testing purposes?

Thanks!
Gilad.

How to deploy this without heroku

Heroku don't has cdn in my area, I have to find a alternative way to deploy this.

"Cannot find module 'apollo-client/errors" (and how to fix it)

We get this error when trying to run the code, unless we install react-apollo dependency manually to have the correct version. (rc.2 instead of rc2)
The problem can be traced back the following issue ( and similar issues) reported on the react-apollo repo:

apollographql/react-apollo#524

"$NODE_ENV" was unexpected at this time. Error on npm install (windows)

I am running on windows 10 with the latest node and npm but when I tried to npm install the package it produce an error "$NODE_ENV" was unexpected at this time. I have tried to install it on ubuntu and it works fine. It only happens on windows. Any ideas why?

Invalid prop `aphroditeCss`

When I npm start app I get a warning:

Warning: Failed prop type: Invalid prop 'aphroditeCss' of type 'string' supplied to 'Html', expected 'object'.

If I replace aphroditeCss={css.content} with aphroditeCss={css} in src/server/middleware/website.jsx, the warning is gone. Is this a bug or am I doing something wrong?

Problems while running on windows (Unknown signal: SIGUSR2)

Hi,
I have a problem when running on windows, this code:

if (__DEV__) {
      compiler.watch({}, reporter);

      compiler.plugin('done', () => {
        const { output } = serverConfig;
        startBackend = true;
        if (server) {
          server.kill('SIGUSR2');
        } else {
          runServer(path.join(output.path, output.filename));
        }
      });
    }

and specificlly this line:

server.kill('SIGUSR2');

Are failing due to error:
Unknown signal: SIGUSR2

Have you tried to run it on windows?
Do you have any idea how to solve this?

Thanks,
Gilad.

This is awesome. Can we use yarn?

Hi, I've been shopping around for a SSR starter kit with everything Apollo for some time and I'm very excited to see if this works for me. I tried using yarn start to begin the project but it looks like it's dependent on being initiated via npm start. The following failure returns:

yarn start v0.16.1
$ if [ "$NODE_ENV" = production ]; then node --harmony $npm_package_app_backendBuildDir; else babel-node tools/webpack.run watch; fi
/Users/jb/Sites/clients/DiazGill/dg_apollo/tools/webpack.config.js:137
module.exports = process.env.npm_lifecycle_script.indexOf('mocha-webpack') >= 0 ? serverConfig : [serverConfig, clientConfig, dllConfig];
                                                 ^

TypeError: Cannot read property 'indexOf' of undefined
    at Object.<anonymous> (/Users/jb/Sites/clients/DiazGill/dg_apollo/tools/webpack.config.js:158:3)
    at Module._compile (module.js:541:32)
    at loader (/Users/jb/Sites/clients/DiazGill/dg_apollo/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/jb/Sites/clients/DiazGill/dg_apollo/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
error Command failed with exit code 1.

Not a deal breaker for me since I'm still able to install, add, remove, and all the other operations explained in the README with yarn...the only thing that fails is npm start but I thought I'd open up an issue and see if you have any guidance. Thank you very much!

Implement hot code reload for Apollo GraphQL subscriptions

Using static pages like landing page

Hi,

First, thanks for your kit. It's a great job and saves me a lot of time!

I have some static pages (like landing / about / faq) which I believe should not be part of the main app (to reduce loading time).
Those pages currently are just plain HTMLs (no react), with CSS file and some vendors scripts.
I'm trying to somehow make those pages served but have problems in few places:

1. Web pack - Do you think it will be correct to make different bundles for this pages? for CSS/scripts. What is the correct way to do it?
2. Server side rendering - How do I handle this?
3. React router - Will I need to define those routes there? for example on /home? what will happen if I was already inside the app then click on the logo, for example, to go to the landing page, how will this work with react router?
4. vendor scripts - currently the scripts are just static scripts in the same folder, I'm thinking about using the npm versions instead, if not, maybe just keep the source directly as it is now and just make another bundle like landing.vender.js. but this also requires a lot of webpack work.

I thought about changing the website.jsx and check inside if I'm on the landing page then serve LandingHtml instead of HTML. but I'm not sure what will happen if then I'll try to go to login page from the client (because it will make client routing and this function won't call again, so I won't have the app) and same about the opposite (from app to homepage) also I'm not sure how does the index.jsx is connecting.

If you can help me and create some rough example of something like this (just example page with one h1 tag and one console.log and maybe jQuery as vendor), it will be great.

Maybe it's something you want to make in your kit anyway because I'm sure I'm not the only one who need this.

Thanks a lot.
Gilad.

styled-components vs glamor?

This isn't really an issue, I was just curious why glamor over of styled-components?

its easy enough to replace for my own needs but I just wondered if there was a specific reason given that SC gives you the best of both.

CSS Image is server-rendered as [object object] until JS loads to replace it

Hello, I've been facing issues with leveraging image assets in this project and, while I could stand to understand Webpack better, it would be nice to see some guidance in the documentation as to where I can learn more about the following (within the context of this project's setup):

1. Add an inline image
2. Add an SVG
3. Load a CSS background image

As it stands I cannot render a background image without JS turned on. I load a png as a background-image in Sass and it is defined as [object object] until Javascript renders and replaces it. I think that the SSR should handle this without JS being enabled, it will make pages render faster.

Thanks very much!

Error when trying to 'yarn watch'

I followed the steps from the 'Getting Started', but end up with an error:

sandbox [devboell]$ git clone https://github.com/sysgears/apollo-fullstack-starter-kit.git history-walk
Cloning into 'history-walk'...
remote: Counting objects: 1195, done.
remote: Compressing objects: 100% (53/53), done.
remote: Total 1195 (delta 8), reused 0 (delta 0), pack-reused 1140
Receiving objects: 100% (1195/1195), 244.32 KiB | 0 bytes/s, done.
Resolving deltas: 100% (656/656), done.
Checking connectivity... done.
sandbox [devboell]$ cd history-walk/
history-walk [devboell]$ yarn
yarn install v0.21.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 312.44s.
history-walk [devboell]$ yarn seed
yarn seed v0.21.3
$ npm run migrate && babel-node --presets es2015 node_modules/.bin/knex seed:run 

> [email protected] migrate /Users/devboell/dev/sandbox/history-walk
> babel-node --presets es2015 node_modules/.bin/knex migrate:latest

Using environment: development
Batch 1 run: 2 migrations 
/Users/devboell/dev/sandbox/history-walk/src/database/migrations/create_count.js
/Users/devboell/dev/sandbox/history-walk/src/database/migrations/create_posts.js
Using environment: development
Ran 1 seed files 
/Users/devboell/dev/sandbox/history-walk/src/database/seeds/seed.js
✨  Done in 35.65s.
history-walk [devboell]$ yarn watch
yarn watch v0.21.3
$ babel-node --presets es2015 tools/webpack.run watch 
Vendor DLL does not exists
Generating vendor DLL bundle...
Using Webpack DLL vendor bundle
(node:33682) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
/Users/devboell/dev/sandbox/history-walk/tools/webpack.run.js:283
    if (err) throw new Error(err);
             ^

Error: Error: out of retries
    at /Users/devboell/dev/sandbox/history-walk/tools/webpack.run.js:215:20
    at tryToConnect (/Users/devboell/dev/sandbox/history-walk/node_modules/wait-for-port/index.js:42:40)
    at Timeout.retry [as _onTimeout] (/Users/devboell/dev/sandbox/history-walk/node_modules/wait-for-port/index.js:35:5)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)
^C
history-walk [devboell]$ node -v
v6.9.4
history-walk [devboell]$ yarn version
yarn version v0.21.3
info Current version: 1.0.0
history-walk [devboell]$ npm -v
4.1.1

Run build fails on linux

I have windows 10. When I saw your scripts in package.json I decided to use bash on ubuntu on windows to install your starter kit. Everything was fine except for npm run build command. It works on windows but not on linux. :D ... Could you help explaining me why?

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/mnt/c/Projekty/apollo-fullstack-starter-kit-master/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games
10 verbose lifecycle [email protected]~build: CWD: /mnt/c/Projekty/apollo-fullstack-starter-kit-master
11 silly lifecycle [email protected]~build: Args: [ '-c', 'babel-node tools/webpack.run build' ]
12 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `babel-node tools/webpack.run build`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /mnt/c/Projekty/apollo-fullstack-starter-kit-master
17 error Linux 3.4.0+
18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
19 error node v6.9.2
20 error npm  v3.10.9
21 error code ELIFECYCLE
22 error [email protected] build: `babel-node tools/webpack.run build`
22 error Exit status 1
23 error Failed at the [email protected] build script 'babel-node tools/webpack.run build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the apollo-fullstack-starter-kit package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     babel-node tools/webpack.run build
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs apollo-fullstack-starter-kit
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls apollo-fullstack-starter-kit
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

greenkeeper.io

Should we try greenkeeper.io, to keep the dependencies up to date?

Maybe just for the apollo packages.

Needs Autoprefixer

Autoprefixer needs to be added for CSS compatibility.