lvarayutlvarayut
982

Relay Fullstack

screenshot of Relay Fullstack
express
react

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

GithubDemo

Overview:

Relay Fullstack is a Relay scaffolding application that aims to simplify the process of starting a project by integrating multiple tools and technologies. It includes modern technologies such as Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS. The application uses hot-reload to update the screen in real-time whenever any code changes.

Features:

  • Integrated with multiple modern technologies: Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS.
  • Supports hot-reload for real-time updates.
  • Unopinionated and allows customization based on project needs.
  • Integrated with Yeoman for choosing technologies such as database and Flow.

Basic Installation:

  1. Install watchman by following its installation guide.
  2. Clone the repository to your local directory.
  3. Install all dependencies.
  4. Start developing.
  5. Open your web browser and go to http://localhost:3000 for Relay application or http://localhost:8000 for GraphiQL.

Advanced Installation:

  1. Install yo and generator-relay-fullstack globally.
  2. Create a new directory and start the generator.
  3. Answer the prompt questions to customize the application.
  4. Open your web browser and go to http://localhost:3000 for Relay application or http://localhost:8000 for GraphiQL.

Deployment:

Local Machine:

To deploy the project:

  • Minify all JavaScript files.
  • Stop spawning the GraphiQL server.
  • Pull off duplicate dependencies.
  • Remove unnecessary scripts, such as Hot-reload. Execute the following command:
command_here

Then, open your web browser and go to http://localhost:3000.

Heroku:

Before getting started, make sure you have installed the Heroku Toolbelt. To deploy the application:

  1. Execute the necessary steps using Heroku Toolbelt.
  2. Open the application on your default browser using heroku open.

Schema:

Whenever the server is started, the application automatically executes the updateSchema.js script to compile the schema definitions to schema.json and schema.graphql, which are required by Relay framework. You can also manually run the script.

Summary:

Relay Fullstack is a Relay scaffolding application that integrates multiple modern technologies, such as Relay, GraphQL, Express, and more. It simplifies the process of starting a project and provides features such as hot-reload and customization options. The installation process includes basic and advanced options, allowing users to choose technologies based on their needs. The deployment process includes steps for deploying on a local machine and on Heroku. The application also provides a script for compiling schema definitions required by the Relay framework.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

fullstack
Fullstack

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.