lvarayut / Relay Fullstack
Programming Languages
Projects that are alternatives of or similar to Relay Fullstack
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