sly777 / ran

:zap: RAN! React . GraphQL . Next.js Toolkit :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...

RAN : React . GraphQL . Next.js Toolkit

New version is coming... Follow up here: #677

Features

• Hot-Reload Ready for Dev

• Next Generation JavaScript (ES6)

• Offline Ready (Experimental!)

• Next Generation CSS (CSS-in-JS)

• Create New Page in a Second (with CLI)

• SEO-Ready

• Performance-first

• Production Deployment Ready for Now, Digital Ocean, Heroku, and AWS

• Prettier and ESLint integrated

How to use

• Firstly, clone the repo with this command.

git clone --depth=1 https://github.com/Sly777/ran.git RAN
cd RAN
yarn && yarn setup

• If you are not using Yarn, just run npm install && npm run setup instead of yarn && yarn setup
• After everything is finished, run yarn dev (or npm run dev)

And that's all!

Start coding on browser! (via Glitch)

Just click the button and then start to work with RAN!

Clean Setup (without example pages & components)

git clone --depth=1 https://github.com/Sly777/ran.git RAN
cd RAN
yarn && yarn setup:clean

Beta Version (Unstable)

Also, there is a beta version for new features & fixes that we are testing before release. To access beta;

git clone --depth=1 -b beta https://github.com/Sly777/ran.git RAN_beta
cd RAN_beta
yarn && yarn setup

It can be unstable, so that's why please use stable version if you are working on the project that is in production.

Example

Click here to see example project to understand how RAN! works on production. I used graph.cool service for GraphQL and now for hosting in the example.

Commands

Best feature of RAN! is CL commands. You can just run one command to create page with route! Click here to see details how It works on RAN!.

Documentation

Click here to see all details of RAN!

FAQ

Click here for FAQ of RAN! If it doesn't solve your problem, feel free to open an issue on GitHub!

License

This project is licensed under the MIT license, Copyright (c) 2017 Ilker Guller. For more information see LICENSE.md.

Contributing

Please read Contributing doc for details on our code of conduct, and the process for submitting pull requests.

Versioning

RAN! is using SemVer for versioning. For the versions available, see the tags on this repository.

Author

• Ilker Guller - website / twitter

Contributors

Thanks goes to these wonderful people:

Backers

Thank you to all our backers! [Become a backer]

Sponsors

Thank you to all our sponsors! (please ask your company to also support this open source project by becoming a sponsor)

App Showcase

[WIP]

ran's Issues

Logo for RAN!

Logo for RAN! :)

Honestly, I have no experience on a design stuff so I need help on this.

Token isnt saved between page reload

maybe save it in cookie?

setup failing running second time

Hey,

yarn setup running fine the first time but when I try to clean the build to work on my own client.

I ran yarn setup:clean and ran in to this error.

yarn setup:clean
yarn run v1.3.2
$ cross-env CLEANSETUP=true node ./helper_scripts/CL_commands/setup.js && npm run setup:after
module.js:557
throw err;
^

Error: Cannot find module '/Users/jinx/Projects/Apps/graph-flame/client/helper_scripts/CL_commands/setup.js'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Function.Module.runMain (module.js:701:10)
at startup (bootstrap_node.js:194:16)
at bootstrap_node.js:618:3
error Command failed with exit code 1.

Don't know how to fix this, any suggestions?

Prettier config

Hi @Sly777

Are there any config options available for using Prettier?

I had a look at eslint-config-prettier and couldn't see options for things like what I use for the VS Code extension Prettier now:

  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.jsxSingleQuote": true,
  "prettier.flattenTernaries": true,
  "editor.formatOnSave": true,

Also, there doesn't seem to be a clear way to 'Prettier'ify the code or if it is it's not clear on how. Any pointers greatly appreciated.

Directory structure

I suggest

 ~/projects/ran   jest  tree -L 1 --dirsfirst pages components containers libraries libraries/stores components/AuthFields
pages
├── create.js
├── details.js
├── _document.js
├── index.js
├── signin.js
└── signup.js
components
├── AuthFields
├── LinkList
└── Theme.js
containers
├── CreatePost
├── Header
├── PostInfo
├── PostList
├── PostUpvoter
├── SignInForm
├── SignUpForm
├── App.js
└── Default.js
libraries
├── graphql_schemas
├── stores
├── apolloClient.js
├── helpers.js
├── middleware.js
├── persist.js
├── redirect.js
├── reducer.js
├── reduxStore.js
├── theme.js
├── validations.js
└── withData.js
libraries/stores
└── auth.js
components/AuthFields
├── index.js
├── styles.js
└── validation.js

1. If component is using data from apollo or redux - its container
2. Locate stores (reducers, actions,...) separately from components/containers ( libraries/stores or libraries/modules)

@Sly777 you said you have some concerns

Cached .gql files not reloading on change

Hi, I am not totally sure whether this is a bug (or perhaps something is wrong with my config), but if I load up a component wrapped by Apollo, (which has the graphql code saved in a separate .gql file as this seems to the be the RAN convention at the moment), then the contents of that .gql file appear to be cached somewhere, and will never update again no matter what changes I make to the file (shutting down the server and restarting makes no difference).

The only way I have found to permit changes to the .gql code is to copy it directly into data.js (i.e. instead of import-ing from a .gql file).

Would really appreciate a pointer here - at the moment I am basically refactoring pieces of .gql code into the data.js files so that I can edit them successfully.

Thanks!

Error: No available storage method found.

Hey there!
First off, thank you for putting this together. I've been struggling a bit attempting to get this whole set up working myself - so thank you!

I don't think this is an issue with your code, but I was wondering if you are experiencing the same problem. The issue has to do with user log in. The only thing I've really changed thus far is the graph.cool URL to my own as you suggested. (thank you for introducing me to that awesome tool btw!) So when I try to log in using the login form, the request fires off just fine and the response comes back containing a token as expected. But it seemed as though the app's state was not reflecting the "successful" login. So after digging around and logging some things, I found this error getting thrown from the localForage.js file at line 2259. Are you seeing this as well? Or is your log in working properly? I've found a few github issues on the localForage's page about something similar, but haven't found something I understand well enough to fix ... haha.

I'm using the latest Chrome on a Mac with Sierra 10.12.6.

Warning: Prop `className` did not match.

Getting the following error in the console after running yarn dev and loading index page.

Warning: Prop className did not match. Server: "sc-kfGgVZ XgANw" Client: "sc-kAzzGY iUwkLO"

Look's like the issue is either with styled-components or babel-plugin-styled-components.

Any ideas?

New Page title

Suggestion:

1. Remove " :: RAN! Example" from the new page template, to make the boilerplate more generalised. (page.hbs line 9)
2. Change the wording in the create_page helper script to read "Enter page title:" (create_page.js line 41). This (hopefully) makes it clearer to the user that they are choosing the <title>.

CLI Command for removing route

CLI Command for removing route

Task Rules

• It will remove the route from routes.js

Add Flow for type checker (if the file has flow flag)

Add Flow for type checker (if the file has flow flag)

https://flow.org/en/

Task rules

• It will use .flowconfig
• If the file has flow (// @flow) flag, Flow will check it.
• Example pages need to get flow check

Multiple apollo mutations for component

Just wondering if there was a good way to compose two mutations that are setup in the same way as the rest of the boilerplate.

Create job mutation:

const withCreateJob = graphql(createJobGql, {
  props: ({ mutate }) => ({
    mutations: {
      createJob: ({

Send email mutation:

const withSendMail = graphql(sendMailGql, {
  props: ({ mutate }) => ({
    mutations: {
      sendMail: ({ email, subject, body }) =>

This isn't right but its what I've done.
export default comp => withSendMail(withCreateJob(withData(comp)));

The problem is that the createJob mutation overwrites the sendMail mutation when doing it in this way and I can't figure out the proper way to do it. I've read the apollo docs but they have a completely different structure to this project.

Any help is appreciated.

Connection Indicator [feature request]

Would be great to have a connection indicator in this boilerplate so users can be notified that they are offline (and let them know what is going to happen with their data).
I believe this is a nice feature and pretty common UX requirement for any interactive app.
But this will require implementing another feature like Notifications, i.e. flash messages generally used as confirmation of some action result (success/error).

You guys have patreon?

First of all, thank you for creating this awesome library.

I really want to contribute but I have no time at the moment, the only way I can think of is using patreon for helping keep this library alive.

Do you guys have planned on creating this or have some other donation options?

.eslintrc formatting

Quote formatting needs changing on .eslintrc singles instead of double:

ran/.eslintrc

Lines 45 to 46 in c91c936

	"graphql/template-strings": ['error', {
	env: 'literal'

Should be:

    "graphql/template-strings": ["error", {
      "env": "literal"
    }]

Could we have the project.graphcool file please?

Hi @Sly777

Is possible for us to have the project.graphcool file so we can make our own backend to reflect what you have already made here?

Using the graphcool init --schema schema.graphql using the provided schema here throws errors:

I'm not sure if it's graphcool or the schema, either way, it's stopping me and my team from making any progress.

Would it be possible for you to do a copy paste of the RAN project.graphcool file for us to use please?

Component executed twice?

I'm a little new to react so forgive me if this is a dumb question. I used your PostList component as an example and noticed it being executed twice.
I added:

index 02cc730..0ca55c6 100644
--- a/shopify-ui/components/PostList.js
+++ b/shopify-ui/components/PostList.js
@@ -8,6 +8,7 @@ import PostUpvoter from './PostUpvoter';
 const POSTS_PER_PAGE = 10;

 let PostList = ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts, className }) => {
+  console.log(allPosts);
   if (allPosts && allPosts.length) {
     const areMorePosts = allPosts.length < _allPostsMeta.count;
     return (

Refreshed / and it prints twice in the server console as well as the browser console. Is it supposed to do that?

An Issue with the Linter

Hi,

I'm having difficulty running this in dev mode. It's definitely something to do with ESLint, but I'm not sure how to address the issue it's highlighting.

In order to run properly I had to edit package.json to remove the linting, but that's not a long-term solution.

I'm still new to ESLint but I'm used to errors pointing to some kind of ruleset that I can look up online which will teach me how to find and fix it in my project. In this case I'm either missing this instruction or it's absent. Any insight or tips you can provide are greatly appreciated.

This is a fresh git clone using Node 8.6.0, npm 5.3.0

I'm also using Mac OS 10.12.6, if that's a factor.

npm run dev

> [email protected] dev /Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN
> npm run lint && npm run clean-cache && node server.js


> [email protected] lint /Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN
> eslint --fix --ext .gql --ext .graphql --ext .js pages components containers libraries server helper_scripts

Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.
Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.
    at invariant (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint-plugin-graphql/node_modules/graphql/jsutils/invariant.js:19:11)
    at validate (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint-plugin-graphql/node_modules/graphql/validation/validate.js:60:72)
    at handleTemplateTag (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint-plugin-graphql/lib/index.js:410:57)
    at TaggedTemplateExpression (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint-plugin-graphql/lib/index.js:126:20)
    at listeners.(anonymous function).forEach.listener (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/Users/eddienaff/Documents/Projects/personal/learning/demos/apollo-graphql/RAN/node_modules/eslint/lib/util/node-event-generator.js:294:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint --fix --ext .gql --ext .graphql --ext .js pages components containers libraries server helper_scripts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint 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!     /Users/eddienaff/.npm/_logs/2017-10-02T19_45_39_406Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `npm run lint && npm run clean-cache && node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev 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!     /Users/eddienaff/.npm/_logs/2017-10-02T19_45_39_427Z-debug.log

I thought it might be something to do with the .babelrc file but everything looks okay to me. Is it an error because I don't have any .graphql files in my project yet?

Project Schema Avaiable?

Hey @Sly777 can you add the type only Schema so it's a straight forward map to another backend?

I tried to use get-graphql-schema ENDPOINT_URL > schema.graphql but there was so much information in there I found it hard to drill down to just the Type only information you'd need to create a project.graphcool file

CLI Command for removing page

CLI Command for removing page

Task Rules

• It will remove the page from the page folder.
• It will remove also route of the page from routes.js

[Question] Secure pages based on token

Hello all,

What will be best practice to secure a page that only can be shown if the user is logged in?
I can check the auth store but it won't work on SSR, any example or idea of how I can achieve this?

Thanks! 😄

A better description for RAN ???

sindresorhus/awesome#988 (comment)

create_page error

Hi Ilker - I'm getting an error message trying to run the create:page command. The error only occurs when I try to add a different URL from the page name. Screenshot below. Think this is a bug.

Upgrade React Apollo (new apollo client structure)

• Upgrade React Apollo (new Apollo client structure)

On Apollo v2, Most of the parts are changed and also They removed redux integration inside of it.

remote-redux-devtools failing

First of all, amazing project! Thank you!

I am getting this error when running project:

VM9234:35 WebSocket connection to 'ws://localhost:8000/socketcluster/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Fixed it by removing port: 8000 in composeWithDevTools from middleware.js file.
Maybe will help someone with same issue.

Issues Deploying to Google Cloud Functions on Firebase.

I am trying to deploy Ran.js to google cloud functions on firebase.
I followed this tutorial(https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2) but I get 'internal server error'. Would appreciate your help!

hosting URL: https://next-js-react-wordpress.firebaseapp.com
Function URL (next): https://us-central1-next-js-react-wordpress.cloudfunctions.net/next

Be ready for v1 :: Tasks

Be ready for v1 :: Tasks

• CLI Command to get updates after creating the project with RAN #44
• CLI Repo for creating app like create-react-app or react-native #44
• Add Flow for type checker (if the file has flow flag) #92
• Add Jest for testing (if there is test folder) #93
• Plugin System
• Framework Selection by using plugin system - #24
• CLI Command for removing page #94
• CLI Command for removing route #95
• Doc updates for Packages and Architecture #96
• Logo for RAN! :) #97

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

ZAvfgytfds

What about using next-routes?

I'm brand new to the Next.js world and I'm trying to see what packages everybody uses. I noticed you're not using next-routes in this boilerplate.

I'm just curious to know if this is something you considered? Are there any downsides to using it?

Problem running setup:clean

Hi,
Due to some commands like rm, path issues, and environment variables, npm install && npm run setup:clean is not running properly on windows.
The error I am getting is:

Cleaning RAN! for preparing new project...
Installing dependencies... (This might take a while)

Initialising new repository...C:\Code\Starters\RAN\helper_scripts\CL_commands__helpers.js:155
if (_err) throw _err;
^

Error: EEXIST: file already exists, open 'C:\Code\Starters\RAN\pages\index.js'

Cannot find module 'figlet'

Both npm run setup and yarn run setup cause this error.

macOS Sierra 10.12.5 (16F73)

node -v
v7.8.0
npm -v
5.0.3

error log

+ [email protected]
+ [email protected]
removed 1141 packages and updated 17 packages in 33.767s
module.js:472
    throw err;
    ^

Error: Cannot find module 'figlet'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/Document/github/RAN/helper_scripts/CL_commands/__helpers.js:1:78)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
error Command failed with exit code 1.
info Visit http://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have tried npm install figlet or yarn add figlet,they all work well.
run yarn run setup after run yarn add figlet the issue keeps on.

Add .prettierrc file for prettier config

Hi @Sly777 , as I saw that there is no .prettierrc file for holding the prettier config, I think it would be useful to add it. If you think that too, I can do it.

Adding authentication

It would be great if you can add the authentication to this project :) Do you schedule to do it?

i can't run built code

PS C:\Users\thesa\Documents\ia-jn> yarn run start
yarn run v1.1.0
$ cross-env NODE_ENV=production node ./node_modules/.bin/pm2 start server.js -i max --attach
C:\Users\thesa\Documents\ia-jn\node_modules.bin\pm2:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Proposal: use ooth for user identity management

Hi there, I'm the developer of ooth, a modular user identity management system built on top of passport.js (which, famously, only handles the authentication part, but not the storage of user information part).

You have a nice starter here, but if people want to extend the login functionality with other strategies (e.g. facebook or google login) they are on their own. With ooth they could just plug in another strategy and move. What do you think?

Error: Cannot find module 'webpack-bundle-analyzer'

Hello, Deploy to Heroku is failing with

remote: Error: Cannot find module 'webpack-bundle-analyzer'
remote: at Function.Module._resolveFilename (module.js:470:15)
remote: at Function.Module._load (module.js:418:25)
remote: at Module.require (module.js:498:17)
remote: at require (internal/module.js:20:19)
remote: at Object. (/tmp/build_65f4de2af172386a65e33f4f3fb39125/next.config.js:1:96)
remote: at Module._compile (module.js:571:32)
remote: at Object.Module._extensions..js (module.js:580:10)
remote: at Module.load (module.js:488:32)
remote: at tryModuleLoad (module.js:447:12)
remote: at Function.Module._load (module.js:439:3)
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: next build
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2017-08-11T16_46_07_571Z-debug.log
remote: { Error: Cannot find module 'webpack-bundle-analyzer'
remote: at Function.Module._resolveFilename (module.js:470:15)
remote: at Function.Module._load (module.js:418:25)
remote: at Module.require (module.js:498:17)
remote: at require (internal/module.js:20:19)
remote: at Object. (/tmp/build_65f4de2af172386a65e33f4f3fb39125/next.config.js:1:96)
remote: at Module._compile (module.js:571:32)
remote: at Object.Module._extensions..js (module.js:580:10)
remote: at Module.load (module.js:488:32)
remote: at tryModuleLoad (module.js:447:12)
remote: at Function.Module._load (module.js:439:3) code: 'MODULE_NOT_FOUND' }
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku

Please guide. Thank you.

bug, styled-comp, checksum was invalid on page reload

What I do

1. yarn run dev
2. load page
3. reload page

Get error

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ="1"><div class="sc-bdVaJa iNGvMq" data-
 (server) ="1"><div class="sc-jzJRlG fzsTbP" data-

related styled-components/babel-plugin-styled-components#52

will look tomorrow

How does one add GraphQL to the server?

I've tried adding graphiqlExpress to the server instance with no luck at all (code below). This usually gets the job done. Where have I gone wrong? Do I need to do something with the routes file?

const buildOptions = async (req, res) => {
      const mongo = await connectMongo();
      console.log("trying auth");
      const query = req.query.query || req.body.query;
      if (query && query.length > 2000) {
        throw new Error("Query too large.");
      }
      return {
        context: {
          dataloaders: buildDataLoaders(mongo),
          mongo
        }, // this context object is passed to all resolvers.
        formatError,
        schema
      };
  };

  server.use(
    "/graphql",
    bodyParser.json(),
    passport.authenticate("jwt", {
      session: false
    }),
    graphqlExpress(buildOptions),
    formatError,
    schema
  );

Cannot find module 'figlet'

After a clean installation, I get this error when running yarn run setup:

Error: Cannot find module 'figlet' at Function.Module._resolveFilename (module.js:485:15) at Function.Module._load (module.js:437:25) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/mehdijjz/Development/Projects/RAN/helper_scripts/CL_commands/__helpers.js:1:78) at Module._compile (module.js:569:30) 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)

graphcool setup

I was hoping you could share the data schema in SDL syntax, or offer another way to utilize the already integrated Graphcool schema

Improvements

What about:

1. type checker (flow, ts)?
2. babel-plugin-root-import (finnaly made it, was hard, but only with fork, info)
3. better folder structure (this is interesting):
   3.1 move code to app
   3.2.1 it can be like in https://github.com/scalable-react/scalable-react-typescript-boilerplate

root -> app -> components/containers -> somename -> __tests__; index.js; styles.js; types.js; presentation.js (in contatiners also with actions, reducers, *.gql files and other)

3.2.2 oooooor ... atoms, molecules, organisms, templates, theme like in https://github.com/devinit/datahub (I think its same as components/containers but with more graduality, but I dont know, I started learning next week ago)) )
4. jest, snapshots, stories
5. inferno, preact or react-lite in production (or everywhere) ?

RAN as NPM dependency

Would there be any chance of releasing RAN as an NPM dependency usable in our projects similar to next.js? When cloning the project, we are importing all of the complexity into our own codebase, are left on our own for maintenance, and can't benefit from future updates made to this project.

Thanks for your time 🙂

How to debug this?

A breakpoint I set a in the Developer Tools do not work, code just runs through. How do I debug this?

Search & Filtering [feature request]

Hi, thanks for sharing this!
I'm new to Apollo and Graphcool and wonder if it would be possible to include a good example of implementing some complex search and filtering:

1. Search posts (in title and description) + search results page.
2. Filter posts by multiple criteria, e.g. get all posts where:
   "createdAt" is between Date_A and Date_B and
   have "tags" in [ tag1, tagt2, tagt3... ] and
   made by "users" [ user1, user2...] etc.

Thank you :heart:

Thank you for this!

My team and I were about to start out on a GraphCool and Next.js project and here it is 👌

I'll be cloning it and taking a look later tonight there seems to have been a massive amount of work done already thank you so much 🙏

Apologies if this is not the place for thanks and feel free to close the issue.

Gratitude 🎁 🙌

Add Jest for testing (if there is test folder)

Add Jest for testing (if there is test folder)

https://facebook.github.io/jest/

Task Rules

• If there is test folder on the root, Jest will run.
• Example pages need to get tests
• All settings should be inside of jest.config.js on root.

Choice of GraphQL client and project naming

Is the reasoning behind choosing Apollo as GraphQL client explained somewhere?

I guess Relay Modern is the obvious alternative, the only thing which isn't clear to me is its ability to support SSR, but should be feasible. Ref, ref, ref.

Whatever the case may be, my first reaction when seeing this project was being surprised that "Apollo" was part of its name. In the end, the choice of GraphQL client appears to me more like an "implementation detail".

What probably matters more to the end-user is that RAN provides a GraphQL-first architecture out of the box. I think it would make more sense that the projects advertises itself as "React(-like) + GraphQL + Next.js" and reflects this in its name.

Why express and not Koa?

Why express and not Koa, or Micro?

I vote koa because it uses promises, enabling deferred startup, e.g.: the server starts immediately, and eventually it will connect to the db.

Doc updates for Packages and Architecture

Doc updates for Packages and Architecture

Task Rules

• Doc updates for Packages and Architecture
• Packages Doc needs to have all small info of the packages that we use