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.
Clone the repository to your local directory
$ git https://github.com/reactexcel/exo_quickplan.git
$ cd exo_quickplan
Install all dependencies & Start developing
$ npm install
$ npm start
Launch your favorite web browser and go to http://localhost:8530
for Relay application or http://localhost:8000
for GraphiQL.
In order to deploy a project, it is a good practice to minify all JavaScript files, Stop spawning 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:8530
.
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
├── 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 routes definitions
│ │ └── ViewerQuery.js - Entry node of a GraphQL query
│ ├── index.html - HTML template file used to by html-webpack-plugin
│ └── index.js - Client entry point
├── server - All of the server side code resides in this folder
│ ├── config - Configuration
│ │ └── environment - Saparate 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 for development environment
└── webpack.production.config.js - Webpack configuration for production environment
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.
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.
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.
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.
- Relay Fullstack is inspired by relay-starter-kit. Please take a look at the original code to learn more.