lvarayut/relay-fullstack

:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It comes with many modern technologies; Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS. Relay Fullstack is also using Hot-reload to real time update the screen whenever any code changes.

Example

Check out the Live demo on Heroku.

Usage

Basic

The basic installation contains only general technologies needed by most of the projects, Relay Fullstack is totally unopinionated. If you wanted to include a database, flow, or any specific technologies, please see the Advance section.

First, you need watchman installed, please follow its installation guide. Then, clone the repository to your local directory

$ git clone https://github.com/lvarayut/relay-fullstack.git
$ cd relay-fullstack

Install all dependencies & Start developing

$ npm install
$ npm start

Launch your favorite web browser and go to http://localhost:3000 for Relay application or http://localhost:8000 for GraphiQL.

Advance

Relay Fullstack is integrated with Yeoman that allows you to choose technologies that suit your needs, the options are including database, flow, and etc.

Install yo and generator-relay-fullstack globally

$ npm install -g yo generator-relay-fullstack

Create a new directory and start the generator, it will prompt some questions to help you get up and running

$ mkdir relay-fullstack && cd $_
$ yo relay-fullstack
$ npm start

Launch your favorite web browser and go to http://localhost:3000 for Relay application or http://localhost:8000 for GraphiQL.

NOTE: generator-relay-fullstack is currently working with minimal functionalities. Database, Flow, and Sub-generator are work-in-progress.

Deployment

Local machine

In order to deploy a project, it is a good practice to minify all JavaScript files, stop spawning the GraphiQL server, pull off some duplicate dependencies, and remove all unnecessary scripts, for example, Hot-reload. All of these can be done by executing the following command:

$ npm run deploy

Again, launch your favorite web browser and go to http://localhost:3000.

Heroku

Before getting started, make sure you already installed the Heroku Toolbelt, which is a command-line tooling for managing Heroku applications that makes it easy to deploy an application in a few steps:

$ heroku create                     # Create a new Heroku application
$ git push heroku master            # Push your code into the created Heroku repository
$ heroku ps:scale web=1             # Run the deployed application

That is it! Now, open the application on your default browser using heroku open.

Schema

Whenever you start a server, it will automatically execute updateSchema.js script in order to compile the schema definitions, defined in schema.js, to schema.json and schema.graphql. This is required by Relay framework. However, you could also run the script manually:

$ npm run update

Project Structure

├── client                          - All of the client side code resides in this folder
│   ├── assets                      - Images and fonts
│   ├── components                  - Relay containers, React components, and SCSS files used in the components
│   │   └── variables.scss          - Common SCSS variables
│   ├── routes                      - React-router-relay 
│   │   ├── Route.js                - All route definitions
│   │   └── ViewerQuery.js          - Entry node of a GraphQL query
│   ├── index.html                  - HTML template file used by html-webpack-plugin 
│   └── index.js                    - Client entry point
├── server                          - All of the server side code resides in this folder
│   ├── config                      - Configuration 
│   │   └── environment             - Separate configuration for each environment
│   │       ├── development.js      - Development configuration
│   │       ├── index.js            - Common configuration used in any environment
│   │       ├── production.js       - Production configuration
│   │       └── test.js             - Test configuration
│   ├── data                        - Data and APIs 
│   │   ├── database.js             - Mock up database which should be replaced with your real database logic
│   │   ├── schema.graphql          - Compiled schema in a readable form
│   │   ├── schema.js               - Schema definitions
│   │   └── schema.json             - Compiled schema to be used by Relay 
│   ├── utils                       - Utilities 
│   │   ├── babelRelayPlugin.js     - Babel-relay-plugin provided by Relay
│   │   └── updateSchema.js         - Code for compiling the defined schema to schema.json and schema.graphql
│   └── index.js                    - Server entry point
├── package.json                    - List of dependencies
├── webpack.config.js               - Webpack configuration

Technologies

Frameworks

Relay - A JavaScript framework for building data-driven react applications. It is required to be used with React and GraphQL.

React - A JavaScript library for building user interfaces. It introduces many great concepts, such as, Virtual DOM, Data flow, etc.

GraphQL - GraphQL is a query language and execution engine tied to any backend service.

Express - Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Module bundler & Syntax transformers

Webpack - Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules.

Babel - Babel is a JavaScript compiler which allows you to use next generation, ES6/ES7, JavaScript, today.

Languages

ES6/ES7 - ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language.

JSX - JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.

Designs

Material Design Lite - Material Design Lite lets you add a Material Design look and feel to your websites.

PostCSS - PostCSS is a tool for transforming CSS with JavaScript. It has roughly 200 plugins to help you write CSS easier.

Additional Tools

React transform HMR - A React Transform that enables hot reloading React classes.

React router relay - Relay integration for React Router.

Eslint - The pluggable linting utility for JavaScript and JSX.

Autoprefixer - Parse CSS and add vendor prefixes to rules.

Precss - Use Sass-like markup in your CSS.

Nodemon - Monitor for any changes in your node.js application and automatically restart the server.

CSS Modules - CSS file in which all class names and animation names are scoped locally by default.

Credits

• Relay Fullstack is inspired by relay-starter-kit. Please take a look at the original code to learn more.
• Handcrafted by Varayut Lerdkanlayanawat and maintained with ❤️ by Nigel Schuster, Nicholas Romero, and awesome contributors.

Contributors

lvarayut	ncrmro	Neitsch	maksugr	AdamZaczek	BlakeBrown

ianaya89	crucialfelix	arnif	jtfell	kennydee	kkostov

lexun	narongdejsrn	sankalpk	jg123

License

MIT © Varayut Lerdkanlayanawat

relay-fullstack's Issues

Merge canary and master

I think we should merge canary back into master. It's hard to keep both branches in sync.
Thoughts?

any chance of including some mutations or auth examples?

maybe as a separate branch or something but it would really be helpful, resources for both these are thin on the web.

thanks.

Implement JSON Web Tokens (JWT)

Implement Signup and Login pages

Fresh clone gives error when running `npm start`

I'm on a Windows 7 Machine and followed the Readme's commands.
Node version: 6.9.1

After npm start I get the following:

$ npm start

[email protected] start c:\dev\relay-fullstack
nodemon --watch server/data/**/*.js --exec "npm run update && ./node_modules/.bin/babel-node server/index.js"

[nodemon] 1.11.0
[nodemon] to restart at any time, enter rs
[nodemon] watching: server/data/**/*.js
[nodemon] starting npm run update && ./node_modules/.bin/babel-node server/index.js

[email protected] update c:\dev\relay-fullstack
babel-node server/utils/updateSchema.js

Schema has been regenerated
'.' is not recognized as an internal or external command,
operable program or batch file.
[nodemon] app crashed - waiting for file changes before starting...

NPM Issue

Hi,

Great stack. Had issues with npm start. Find attached the npm issue log and let me know if I'm doing something wrong at my end. Running on Mac.

Error when run npm run deploy with browserHistory

When running

npm run deploy

the build dist run correctly but running on surge.sh or simple http server using python. the browserHistory doesn't show the routes.

On the other hand when run npm start the browserHistory runs perfectly.

Some idea?

import { browserHistory, applyRouterMiddleware, Router } from 'react-router';

<Router history={browserHistory} routes={Route} render={applyRouterMiddleware(useRelay)} environment={Relay.Store} />

problem with replacing django backend with provided express

hello i am using relay fullstack as frontend , i have developed the backend in django using graphene and i am serving a graphql endpoint from http://localhost:8000/graphiql here is my error log

module.js:442
    throw err;
    ^

Error: Cannot find module '/back/schema'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (babelRelayPlugin.js:2:14)
    at Module._compile (module.js:541:32)
    at loader (/home/imran/emberredbox/relay-fullstack/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/imran/emberredbox/relay-fullstack/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:458:32)




0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'update' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preupdate', 'update', 'postupdate' ]
5 info lifecycle [email protected]~preupdate: [email protected]
6 silly lifecycle [email protected]~preupdate: no script for preupdate, continuing
7 info lifecycle [email protected]~update: [email protected]
8 verbose lifecycle [email protected]~update: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~update: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/imran/emberredbox/relay-fullstack/node_modules/.bin:/usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/imran/emberredbox/relay-fullstack/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
10 verbose lifecycle [email protected]~update: CWD: /home/imran/emberredbox/relay-fullstack
11 silly lifecycle [email protected]~update: Args: [ '-c', 'babel-node server/utils/updateSchema.js' ]
12 silly lifecycle [email protected]~update: Returned: code: 1  signal: null
13 info lifecycle [email protected]~update: Failed to exec update script
14 verbose stack Error: [email protected] update: `babel-node server/utils/updateSchema.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/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/local/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:852:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/imran/emberredbox/relay-fullstack
17 error Linux 4.4.0-34-generic
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "update"
19 error node v6.2.2
20 error npm  v3.10.6
21 error code ELIFECYCLE
22 error [email protected] update: `babel-node server/utils/updateSchema.js`
22 error Exit status 1
23 error Failed at the [email protected] update script 'babel-node server/utils/updateSchema.js'.
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 relay-fullstack package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     babel-node server/utils/updateSchema.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs relay-fullstack
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls relay-fullstack
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Integrate Postgres with yeoman

Integrate Postgres in canary branch which will be used in our yeoman generator.

External graphql server?

How could I go about connecting to an external graphql server in production? I can see in the development configuration that I just need to change the proxy to point to the external graphql url, but how would I do it in production? Here's what I have so far:

index.js
...
if (config.env === 'development') {
  // Launch Relay by using webpack.config.js
  const relayServer = new WebpackDevServer(webpack(webpackConfig), {
    contentBase: '/build/',
    proxy: {
      '/graphql': config.externalUrl
    },
    stats: {
      colors: true
    },
    hot: true,
    historyApiFallback: true
  });

  // Serve static resources
  relayServer.use('/', express.static(path.join(__dirname, '../build')));
  relayServer.listen(config.port, () => console.log(chalk.green(`Relay is listening on port ${config.port}`)));
} else if (config.env === 'production') {
  // Launch Relay by creating a normal express server
  const relayServer = express();
  relayServer.use(historyApiFallback());
  relayServer.use('/', express.static(path.join(__dirname, '../build')));
  relayServer.use('/graphql', graphQLHTTP({ schema }));
  relayServer.listen(config.port, () => console.log(chalk.green(`Relay is listening on port ${config.port}`)));
}

Relay is returning strange alias for connections via REQUIRED_CHILDREN after mutation

For some reason when I do a mutation and get a return value with REQUIRED_CHILDREN in getConfigs, connections are being returned with a strange alias: _tierItems2EmfF3where it should be tierItems.

When I make the same mutation through GraphiQL, the connection is returned properly.

I am not sure if this is some kind of configuration issue, but I have no idea what could be causing this.

Wrong include with subroutes

Hi,

first thanks for this awesome project! It's a huge help for me starting with relay!

I have changed the routes so there is now a subroute with a a route with a subroute:

export default (
  <Route path='/' component={AppContainer} queries={ViewerQuery}>
    <Route path='projects'>
      <Route name='tables' path=':projectId' component={TableListContainer} queries={ProjectQuery} />
    </Route>
    <Route path='/login' component={LoginComponent} />
  </Route>
);

When I hit the route, there is an 404 error:
http://localhost:3000/projects/vendor.js
http://localhost:3000/projects/app.js

The index.html is loaded correctly, but the includes of the both js files points into the projects folder...
I am not really familiar with webpack, but I think the problem is there?
Hope anybody can give me an advice how to solve this.

Thanks in advance!
Daniel

JavsScript Style Standard

I wish there could be a reference to the styles used in this project?

Updating graphQL changes when you have a nested file structure

My current directory structure ( see this first to understand how i have things set up )
Changes to schema.js work fine but I don't really make changes there.
My current schema.js file
Gaze recognizes changes in other files but the schema.js is only updated when the schema.js file is changed. I'm using:

gaze(path.join(__dirname, 'graphql/**/*.js'), (err, watcher) => {
    if (err) logger.error(chalk.bold.red('Error: Watching files in data folder'));
    watcher.on('all', async() => {
      try {
        // Close the GraphQL server, update the schema.json and schema.graphql, and start the server again
        graphQLServer.close();
        await updateSchema();
        const newSchema = requireUncached(path.join(__dirname, './graphql/schema')).default;
        startGraphQLServer(newSchema);
        // Close the Relay server, and start it again
        relayServer.listeningApp.close();
        startRelayServer();
      } catch (e) {
        logger.error(chalk.bold.red((e.stack)));
      }
    });
  });

For example, if I make a change in UserType.js (see above image for directory structure) the schema.js is not updated with the change.

Any ideas on how to handle this? I'd like everything to hot reload on any change. Currently I'm having to stop and restart the server which is pretty time consuming. Help would be much appreciated.

Have you figured out how to load data into separate components using containers?

For instance, I tried adding a <Blog/> component (with a BlogContainer) to <App/> but when I try to access this.props.viewer it isn't defined.

When I update the Route.js file by adding a route with /blog it will load the data when I navigate to localhost:3000/blog, but Ideally it would just load the data on page load.

I noticed you had a similar issue with <Footer/> and you had to pass props down instead of loading the data into it using a FooterContainer.

Any idea how to get this to work?

Server Side Rendering support

Do you have plans to add SSR to your kit? SSR is essential for SEO. Current solutions seem to be a bit hacky but here is an an example of it being done: https://github.com/codefoundries/isomorphic-material-relay-starter-kit

Production should not use babel-node

Source: Babel CLI Documentation

babel-node not meant for production use

You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.

Research that may help: https://medium.com/@Cuadraman/how-to-use-babel-for-production-5b95e7323c2f#.vg3mo8a5m

This is on my TODO list.

app crashed - waiting for file changes before starting

OS: Windows 10 Pro
NPM: 3.9.5

So I:

1. git clone https://github.com/lvarayut/relay-fullstack.git
2. cd relay-fullstack
3. npm install
4. npm start

and am then issued with the following message:

> [email protected] start C:\Users\Theo\Documents\Visual Studio 2015\Projects\relay-fullstack
> nodemon --watch 'server/data/**/*.js' --exec 'npm run update && babel-node server/index.js'

[nodemon] 1.10.0
[nodemon] to restart at any time, enterrs [nodemon] watching: 'server/data/**/*.js' [nodemon] starting 'npm run update
''npm' is not recognized as an internal or external command,
operable program or batch file.
[nodemon] app crashed - waiting for file changes before starting...

What is the issue here?

Question - Integrating Socket.io

Just curious how to go about integrating socket.io into this stack?

Socket.io docs say to use:

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.on('connection', function(){ /* … */ });
server.listen(3000);

However, passing relayServer fails since it's a WebpackDevServer. Not sure how to resolve this while keeping HMR functional.

Refresh in production mode causes error

Refreshing the browser on any page except home causes an error "cannot get /...". This must be a configuration problem between react-routers browser history and the server.

In short: when you navigate to e.g. /login via the menu react-router is taking care of navigation without server interaction. On refresh though a request with url /login is send to server which is not available.

See this answer on stackoverflow

HMR not working for variables.scss

Quick question! Disclaimer: Noob to webpack & HMR

If I change colours in say App.scss:

.greeting {
  background-color: $blue;
}

to

.greeting {
  background-color: $black;
}

the app will reload no problem. However if I make changes in variables.scss, say:
$white: #FFFFFF;
to
$white: #EEE;

... then the app will fail to reload. Is there any explanation for this?

Improving Heroku deploys

I've used the yo generator to create a new solution and then directly publish it to Heroku.

This unfortunately did not succeed without some tweaks to the build tasks.

Tweak 1

Heroku has a 60 second timeout for apps to startup and bind to $PORT.

After some poking around, I discovered that the app was just taking too long to transpile while running the current "deploy" command:

"cross-env NODE_ENV=production webpack --config webpack.config.js && npm run update && cross-env NODE_ENV=production babel-node server/index.js"

Of course, the time it takes a Heroku instance to perform this step depends entirely on the available resources. I was using the "Free" tier containers for the task.

I was wondering if it would be helpful to further customise the build process for such cases and have the transpiler run in advance. For example:

package.json:
"heroku-postbuild": "cross-env NODE_ENV=production webpack --config webpack.config.js && cross-env NODE_ENV=production babel ./server --out-dir ./lib"

Procfile:
web: node ./lib/index.js

That way, any time an instance spins up, it will directly start from the already transpiled output of the app (which is very fast).

Tweak 2

Heroku doesn't seem to resolve babel from path, so the following change to the npm tasks was required:

"scripts": { "start": "nodemon --watch server/data/**/*.js --exec \"npm run update && ./node_modules/.bin/ server/index.js\"", "update": "babel-node server/utils/updateSchema.js", "deploy": "cross-env NODE_ENV=production webpack --config webpack.config.js && npm run update && cross-env NODE_ENV=production ./node_modules/.bin/babel-node server/index.js", "lint": "eslint --ignore-path .gitignore client server", "heroku-postbuild": "cross-env NODE_ENV=production webpack --config webpack.config.js && cross-env NODE_ENV=production ./node_modules/.bin/babel ./server --out-dir ./lib" },

Tweak 3

The favicons-webpack-plugin dependency should be moved to the "dependencies" section of package.json. It is required by webpack during build so both will be required at runtime.

Tweak 4

Include an engines section in package.json. By default Heroku would use node v4 or something which is rather inconvenient if it doesn't happen to match the local environment. As mentioned in Heroku's best practices it is not a bad idea to explicitly mention node's version so it can be deployed accordingly e.g.:

"engines": { "node": "6.6.0" }

I have the changes already made in a local repo so if the above seem acceptable I can submit a PR right away.

Consider use of "favicons-webpack-plugin"

In the interest of improvement and further movement of the project, I recommend the use of the simple favicons webpack plugin dependency, because it will reduce the size of the application, clean up the HTML template, offer more user customizable features for their particular use case.

Migrate Relay Mutation

Relay 2, which is supposed to be there soon changes the style of mutations. This part is already publically available and represented in the API (https://facebook.github.io/relay/docs/api-reference-relay-graphql-mutation.html). In addition these mutations are simpler to write. Thus the feature mutation should be changed to be a Relay.GraphQLMutation

Webpack command error (affects Heroku deploys as well)

When I run webpack, I receive an error

let appEntry;
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at module.exports 

This affects Heroku deploys as well. I'll be submitting a PR for this shortly.

Integrate MongoDB with yeoman

Integrate MongoDB in canary branch which will be used in our yeoman generator. Please take a look at #15 for more details

Relay debugging.

I'm frequently running into a situation where my application is syntactically correct but it is only rendering a blank screen (due to a Relay error).

The problem is that there's no indication of where the exact is occurring so it's very difficult to debug.

What is the best way to solve this issue (aside from rebuilding my app piece by piece until I locate the error since it's very inefficent)?

Warnings about PropTypes and React.createClass

Just cloned and did npm install and when it compiles, console shows:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Warning: RouterContext: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

It did not do it a couple of days ago, i am guessing its something new?

Using node-dev?

Wouldn't using node-dev be better than using node-demon? I recently switched to it and it seems good.

airbnb depends on eslint-plugin-jsx-a11y 1.2.0, 2.1.0 is provided

Hello there,

first of all, thank you for your project! I really appreciate what you did here!

But...while trying to install the package as documented, the following error occured:

258235 error Darwin 14.5.0
258236 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
258237 error node v4.5.0
258238 error npm  v2.15.9
258239 error code EPEERINVALID
258240 error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
258240 error peerinvalid Peer [email protected] wants eslint-plugin-jsx-a11y@^1.2.0
258241 verbose exit [ 1, true ]

I figured that this should be clearly stated in the dependencies when installing the package and thus is an issue directly directed to you.

Thanks for your support and for making such a great job this far!

Greetings
Tizian

Compiling server with a webpack instead of babel-node script

Wouldn't that be more real-life like? I can submit a pull in a weekend ;)

[FEATURE] webpack.config.js for server-side rendering

Hello!

First of all, I'd like to thank you for this awesome work! This really got us kickstarted quite well and we'll be able to work with this as a solid base for our React projects! It's awesome!

Still, I found one major concern with the current state of the project and it's mainly SEO.

So, with webpack it is possible to render the HTML staticaly (https://github.com/webpack/react-webpack-server-side-example) but I haven't figured out how to configure my relay-fullstack instance to do that, at all.

Here's my webpack.config.js, maybe you can tell me what is wrong or maybe suggest a way to do it properly?

Regards
Tizian

webpack.config.js:
'use strict';

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

let appEntry;
let devtool;
let plugins;

if (process.env.NODE_ENV === 'production') {
  appEntry = [path.join(__dirname, 'client/index.js')];
  devtool = 'source-map';
  plugins = [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true
      }
    }),
    new HtmlWebpackPlugin({
      title: 'Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS',
      template: './client/index.html',
      mobile: true,
      inject: false
    }),
    new FaviconsWebpackPlugin('./client/assets/logo.png')
  ];
} else {
  appEntry = [
    path.join(__dirname, 'client/index.js'),
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server'
  ];
  devtool = 'eval';
  plugins = [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __DEV__: true
    }),
    new HtmlWebpackPlugin({
      title: 'Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS',
      template: './client/index.html',
      mobile: true,
      inject: false
    }),
    new FaviconsWebpackPlugin('./client/assets/logo.png')
  ];
}


var commonLoaders = [
    { test: /\.js$/, loader: 'babel-loader', },
    { test: /\.png$/, loader: "url-loader" },
    { test: /\.jpg$/, loader: "file-loader" },
];

var assetsPath = path.join(__dirname, "public", "assets");
var publicPath = "assets/";

module.exports = [
    {
        // The configuration for the server-side rendering
        name: "server-side rendering",
        entry: "./server/page.js",
        target: "node",
        output: {
            path: assetsPath,
            filename: "../../server/page.generated.js",
            publicPath: publicPath,
            libraryTarget: "commonjs2"
        },
        resolve: {
            extensions: ['', '.jsx', '.js']
        },
        externals: /^[a-z\-0-9]+$/,
        module: {
            loaders:[
                { test: /\.jsx?$/, loader: "babel-loader", query: { presets: ['react', 'es2015'] } },
                { test: /\.jpe?g$|\.png$|\.gif$/, loader: "file-loader" }
            ]
        }
    }
];

/*
module.exports = {
  entry: {
    app: appEntry,
    vendor: ['react', 'react-dom', 'react-mdl', 'react-relay', 'react-router', 'react-router-relay']
  },
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: '/',
    filename: '[name].js'
  },
  devtool,
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      loaders: ['style', 'css']
    }, {
      test: /\.scss$/,
      loaders: [
        'style',
        'css?modules&importLoaders=1' +
          '&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
      ]
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?\S*)?$/,
      loader: 'url-loader?limit=10000&name=assets/[hash].[ext]'
      //loader: 'file'
    }
    //,{test: /test woff/, loader}
    ]
  },
  postcss: () => [precss, autoprefixer],
  plugins
};
*/

Relay not generating correct query after setVariable-- am I doing something wrong?

Hi!
For some reason, if I generate a root query which takes in parameters before injecting the child component, like so:

import Relay from 'react-relay';

export default {
  production: (Component) => Relay.QL`
    query {
      getProduction(id: $productionId) {
      	${Component.getFragment('production')}
      }
    }
  `
};

Relay originally generates this query:

query MyProductionDetailsQuery($id_0:ID!,$where_1:ProductionRoleWhereArgs!) {
  getProduction(id:$id_0) {
    id,
    ...F0
  }
}
fragment F0 on Production {
  id,
  title,
  company,
  city,
  expDate,
  archived,
  start,
  end,
  paymentType,
  paymentDetails,
  description,
  hasFee,
  feeDetails,
  type,
  _roles4oPiwv:roles(first:10,where:$where_1) {
    edges {
      node {
        id,
        title,
        type,
        archived,
        description
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  }
}

However, If the Component's relay container has variables of its own, running this.props.relay.setVariables({...variables}) completely changes the request query generated by relay into something like this:

query My_production_details_page_ProductionRelayQL($id_0:ID!,$where_1:ProductionRoleWhereArgs!) {
  node(id:$id_0) {
    ...F0
  }
}
fragment F0 on Production {
  id,
  _roles6J5gK:roles(first:10,where:$where_1) {
    edges {
      node {
        id,
        title,
        type,
        archived,
        description
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  }
}

I'm not sure if this is an error with relay itself or if I am doing something wrong. Could someone help?

Can I deploy to Heroku or other similar service?

Having executed the command line:

$ npm run deploy

How can I push the build up to a service such as Heroku? or similar service?

Show more function in the Feature list

Hi there,
I'm the beginner in Relayjs. I just wanna add the show more function in the Feature list.
I tried to add the function like this:

    this.props.relay.setVariables({
      count: $count + 2
    });

but I got the error: TypeError: Cannot read property 'features' of null

Somebody can help me!!

Best regards

Integrate MySQL with yeoman

Integrate MySQL in canary branch which will be used in our yeoman generator.

Loading custom css for external libraries

Hi!
This starter kit has been tremendously helpful in helping me get started. Just wanted to say thanks!

I was wondering how I would be able to include custom css files to override those provided by an external library (like auth0-lock). It looks like how stylesheets are currently loaded are through local scoping. Is there anything in place for global scoping?

Thanks!

Deploying relay-fullstack on AWS

Are there any instructions available on how to deploy this to AWS? I am new to AWS as well as Relay and my understanding is that I have to use AWS Elastic Beanstalk to deploy the backend and S3 for frontend.

Implement Yeoman sub-generators

Implement Component, Container, Query, and Mutation in canary branch to be used in our yeoman generator.

Generate Schema from remote server

I'm recently playing with this relay-fullstack. I wonder if I can make a request to remove server (currently, server and client are running in localhost).

For example, my server is in http://127.0.0.1:8529/_db/_system/api/graphql (I'm using ArangoDB for the backend). I've read Relay's documentation which says that I can achieve it with the following:

Relay.injectNetworkLayer( new Relay.DefaultNetworkLayer('http://127.0.0.1:8529/_db/_system/api/graphql', { fetchTimeout: 30000, // Timeout after 30s. retryDelays: [5000], // Only retry once after a 5s delay. }) );

Everything should be fine. But every time I run the app, there's always an error that demands me to update the schema. In my case:

Uncaught Error: GraphQL validation error``Cannot query field "human" on type "User".``in fileC:/xampp/htdocs/relay-starwars/client/components/Feature/FeatureContainer.js. Try updating your GraphQL schema if an argument/field/type was recently added.

How do I solve this? Is it possible to generate/update the schema from a remote server? I'm sure that the backend is already settled and running fine.. *checked with GraphiQL and Postman

Any thoughts?

Add Logo and Demo files

Logo

Demo

Yeoman

Consider use of MongoDB, Mongoose

MongoDB, Mongoose, and Graffiti all work perfectly well when used with GraphQL.
the mongoose schema using MongoDB and Mongoose would look like the one I did in the fork.

user authentification

How should we implement user authentification in GraphQL?
Most practices I saw are RESTful (for user auth) + GraphQL (for general use)

NPM Issue

Hi,

I am new to relay and react . I followed the steps and got the npm issue on npm install.:

npm ERR! peerinvalid The package [email protected] does not satisfy its
siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint-plugin-react@^
4.3.0

I changed the dependency in package.json for eslint-plugin-react to 4.3.0. The npm install was successful then but on doing npm start I got following error:

$ npm start

[email protected] start c:\Users\ancagarwal\Usage Analytics\relay\insights

nodemon --watch 'server/data/*/.js' --exec 'npm run update && babel-node ser
ver/index.js'

[nodemon] 1.9.1
[nodemon] to restart at any time, enter rs
[nodemon] watching: 'server/data/*/.js'
[nodemon] starting 'npm run update
''npm' is not recognized as an internal or external command,
operable program or batch file.
[nodemon] app crashed - waiting for file changes before starting...

Please let me know if I am doing anything wrong.

How to use multiple ViewerQueries

I try to implement a relayContainer for some of components, but without success, ever need and ViewerQuery for this task.

Can U help me?

e.g. a postList component, userList component... etc.

Have a plan to upgrade from Relay Classic to Relay Modern ?

Hi, I'm newbie with React & Relay , GraphQL. I very liked relay-fullstack repo. Have a plan to upgrade Relay Classic to Relay Modern ?

Roadmap

Update: We stop supporting Yeoman for now, until we can find a good way to maintain it in our project, see more details #72.

Here is all the features planned to be developed. I list them out in order to make it easy for everybody to discuss and participate in the project. These features could be changed as needed, so don't hesitate to express your ideas. If you wanted to help developing some features, which would be very appreciated, please leave a comment below.

• Example on Heroku @lvarayut
• Official website (gh-pages) @lvarayut
• Yeoman generator @lvarayut
• Integrate css-modules @lexun
• Mutation example @zenyai
• Flow* @Neitsch
• Data loader* @Neitsch
• Database integration* (MongoDB, MySQL, Postgres, and Cassandra)
• Yeoman sub-generators (Component, Container, Query, Mutation)*
• Testing framework (which one do you prefer: Jest, Mocha, Jasmine, Ava?) @lvarayut
• Server Side Rendering
• JSON Web Tokens* (Implement* Signup and Login pages) - This will be developed after Database integration
• Browsersync

*must be developed in canary branch.

Testing and CI

At the moment I have a project that whenever the repo get's pushed to has circle ci

• build the project
• tests graphql end point query works
• uses selenium to
  • navigate to a few pages to make sure they load
  • test form validation errors such as sign up form
  • takes a picture which circle ci stores

I'd like to add some of this testing to this project.
I'm thinking the first pull request would simply be to get the project to build on ci.

Then go from there.

Browser Testing

• mocha
• Selenium

Unit Testing

• Jest

CI Contentious Integration

• circle ci

npm Install error!

I cloned the repo and ran "npm install" and I got the following error message:

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.4
npm ERR! npm v2.15.1
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint-plugin-jsx-a11y@^1.2.0

React hot loader not working?

Running into an issue where hot reload of React components is not working as expected. There is a HMR warning in the console which may be related:

Here are the steps I've performed, on a Win10x64 machine:

• Clone repo
• npm install
• Change package.json scripts entry for start

from:

nodemon --watch server/data/**/*.js --exec \"npm run update && ./node_modules/.bin/babel-node server/index.js\"

to:

nodemon --watch server/data/**/*.js --exec \"npm run update && babel-node server/index.js\"

Notice the elimination of ./node_modules/.bin/. This is a quick and dirty fix for Windows which doesn't like the local babel-node reference.

• npm start
• Open http://localhost:3000/login in browser.
• Open client/components/Login/LoginComponent.js, change page heading text and save.
• Page heading text is not changed, and warning message appears in developer console.

My expectation is the login page heading would change without a full-page refresh. Any idea why this is not working as expected?

yeoman NPM start error

Same error with node 6.6.0 or 4.5.0
events.js:141
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::3000
at Object.exports._errnoException (util.js:907:11)
at exports._exceptionWithHostPort (util.js:930:20)
at Server._listen2 (net.js:1250:14)
at listen (net.js:1286:10)
at Server.listen (net.js:1382:5)
at Server.listen (/Users/SAYCalifornia/Documents/SAY-Official/sandbox/node_modules/webpack-dev-server/lib/Server.js:322:27)
at Object. (/Users/SAYCalifornia/Documents/SAY-Official/sandbox/server/index.js:38:15)
at Module._compile (module.js:409:26)
at loader (/Users/SAYCalifornia/Documents/SAY-Official/sandbox/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at /Users/SAYCalifornia/Documents/SAY-Official/sandbox/node_modules/babel-cli/lib/_babel-node.js:159:24
at Object. (/Users/SAYCalifornia/Documents/SAY-Official/sandbox/node_modules/babel-cli/lib/_babel-node.js:160:7)
at Module._compile (module.js:409:26)
[nodemon] app crashed - waiting for file changes before starting

Thanks