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

  •        22

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. Check out the Live demo on Heroku.

https://github.com/lvarayut/relay-fullstack

Dependencies:

autoprefixer : ^7.1.6
babel-cli : ^6.26.0
babel-core : ^6.26.0
babel-eslint : ^8.0.2
babel-loader : ^7.1.2
babel-plugin-react-transform : ^3.0.0
babel-preset-es2015 : ^6.24.1
babel-preset-react : ^6.24.1
babel-preset-stage-0 : ^6.24.1
babel-relay-plugin : ^0.11.0
chalk : ^2.3.0
connect-history-api-fallback : ^1.5.0
cross-env : ^5.1.1
css-loader : ^0.28.7
dataloader : ^1.3.0
express : ^4.16.2
express-graphql : ^0.6.11
favicons-webpack-plugin : 0.0.7
file-loader : ^1.1.5
graphql : ^0.11.7
graphql-relay : ^0.5.3
html-webpack-plugin : ^2.30.1
lodash : ^4.17.4
normalize.css : ^7.0.0
postcss-loader : ^2.0.9
precss : ^2.0.0
prop-types : ^15.6.0
react : ^16.1.1
react-dom : ^16.1.1
react-dropdown : ^1.3.2
react-hot-loader : 3.1.3
react-mdl : ^1.11.0
react-relay : ^1.4.1
react-router : ^3.2.0
react-router-relay : ^0.14.0
style-loader : ^0.19.0
url-loader : ^0.6.2
webpack : ^3.8.1
webpack-dev-server : 2.9.4

Tags
Implementation
License
Platform

   




Related Projects

language-babel - ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM

  •    CoffeeScript

Language grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax as used by Facebook React, Atom's etch and others, as well as optional typed JavaScript using Facebook flow. This package also supports highlighting of GraphQL language constructs when inside certain JavaScript template strings. For .graphql and .gql file support please see language-graphql . The colour of syntax is determined by the theme in use. By default the language-babel package will detect file types .js,.babel,.jsx, .es, .es6, .mjs and .flow. Use the standard ATOM interface to enable it for other file types. This provides a grammar that scopes the file in order to colour the text in a meaningful way. If other JavaScript grammars are enabled these may take precedence over language-babel. Look at the bottom right status bar indicator to determine the language grammar of a file being edited. language-babel will be shown as either Babel or Babel ES6 JavaScript. Clicking the name will allow the grammar for a file to be changed.

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

  •    Javascript

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

generator-angular-fullstack - Yeoman generator for AngularJS with an Express server

  •    Javascript

Yeoman generator for creating MEAN/SEAN stack applications, using ES6, MongoDB/SQL, Express, AngularJS, and Node - lets you quickly set up a project following best practices.Please note: If you run into trouble compiling native add-ons during the installation, follow node-gyp's short guide on required compilation tools.

apollo-universal-starter-kit - Apollo 2 Universal Starter Kit — GraphQL React JavaScript app boilerplate for Mobile, Server and Web where code for all platforms built with Webpack to enable max code reuse, stack: Apollo, GraphQL, React 16, React Native, Expo, Express, Knex, SQLite, Twitter Bootstrap, Babel, Webpack

  •    Javascript

Apollo Universal Starter Kit is a SEO friendly boilerplate for Universal Mobile and Web app development built on top of Apollo, GraphQL, React 16, React Native, Expo, Redux, Express with SQL storage support, for styling Twitter Bootstrap, NativeBase and Ant Design integration. Hot Code Reload of back end & front end using Webpack and Hot Module Replacement to reflect your changes instantly and help you stay productive. This starter kit adds full React Native integration, with Webpack as a packager and Expo. No native code compilation tools are needed in order to develop native mobile applications with this kit. You are able to run both web and mobile versions of your app at the same time connected to the same backend.


vue-express-mongo-boilerplate - :star: MEVN Full stack JS web app boilerplate with NodeJS, Express, Mongo and VueJS

  •    Javascript

This is a full stack webapp boilerplate project with VueJS + ExpressJS + MongoDB. It is NOT an out-of-box project. I make it in order to create an up-to-date starter repo which contains all important functions (user signup, login, oauth, profile, ...etc) except the business-logic. So when neccessary I can create a new webapp and only need to develop the business logic.

fullstack-apollo-react-express-boilerplate-project - πŸ’₯A sophisticated Apollo in React and Express boilerplate project

  •    Javascript

A full-fledged Apollo Server 2 with Apollo Client 2 starter project with React, Express and PostgreSQL. Since this boilerplate project is using PostgreSQL, you have to install it for your machine and get a database up and running. You find everything for the set up over here: Setup PostgreSQL with Sequelize in Express Tutorial. After you have created a database and a database user, you can fill out the environment variables in the server/.env file.

react-firebase-starter - Boilerplate (seed) project for creating web apps with React

  •    Javascript

React Firebase Starter (RFS) is a popular project template (aka boilerplate) for creating single-page applications with React, Firebase and GraphQL.This project was bootstraped with React Firebase Starter by Kriasoft (get support on Telegram).

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

react-starter-kit - React Starter Kit — isomorphic web app boilerplate (Node

  •    Javascript

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

crate - πŸ‘•πŸ‘–πŸ“¦ A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL

  •    Javascript

πŸ‘•πŸ‘–πŸ“¦ A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).

fullstack-graphql - A book to learn GraphQL with a hands-on approach

  •    CSS

An open source book about full stack GraphQL development with React and Node. https://graphql.college/fullstack-graphql.

mean - The MEAN stack uses Mongo, Express, Angular(4) and Node for simple and scalable fullstack js applications

  •    Javascript

MEAN started out as a combination of MongoDB, ExpressJS, AngularJS and Node.js. With MEAN2 we are providing the ability to mix and match additional frontend frameworks, databases and technologies. We aim to create a robust, flexible and scalable full-stack javascript solution.The default MEAN stack you get out of the box can work with either Angular or React and is built with the following technologies...

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •    Javascript

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

react-relay-network-layer - ReactRelayNetworkLayer with middlewares and query batching for Relay Classic

  •    Javascript

The ReactRelayNetworkLayer is a Relay Network Layer with various middlewares which can manipulate requests/responses on the fly (change auth headers, request url or perform some fallback if request fails), batch several relay request by timeout into one http request. ReactRelayNetworkLayer can be used in browser, react-native or node server for rendering. Under the hood this module uses global fetch method. So if your client is too old, please import explicitly proper polyfill to your code (eg. whatwg-fetch, node-fetch or fetch-everywhere).

react-fullstack-graphql - Starter projects for fullstack applications based on React & GraphQL.

  •    Javascript

For a fully-fledged React & Apollo tutorial, visit How to GraphQL. You can more learn about the idea behind GraphQL boilerplates here. All projects are based on graphql-yoga & Apollo Client.

react-redux-universal-hot-example - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

  •    Javascript

I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too. The first time it may take a little while to generate the first webpack-assets.json and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) printouts, but be patient. Give it 30 seconds.

react-transmit - Relay-inspired library based on Promises instead of GraphQL.

  •    Javascript

Relay-inspired library based on Promises instead of GraphQL. Let's start one together! After you β˜…Star this project, follow me @Rygu on Twitter.