Relay Gallery

[![Maintenance Status][status-image]][status-url] [status-image]: https://img.shields.io/badge/status-maintained-brightgreen.svg [status-url]: https://github.com/bfwg/relay-gallery

Relay Gallery is a demonstration of how to use React + Relay + Graphql.

Google can easily find Relay Gallery because it is using Isomorphic Relay for server side rendering. Inspect into browser source for details.

There's not much documents on how Relay deal with login or file upload. This project is a Demo gallery site which user can login and upload images to the gallery. From here we can learn how Relay mutations really work.

Live Demo

fanjin.computer

Version

1.0.0

Underlying technologies

| Technology | Description| |----------------|----------------| | React | Library for building SPA. | | Material UI | Library for implementing Material Design in React. All user interface in this kit is built exclusively with Material UI components. | | Relay | A Javascript framework for building data-driven react applications. | | GraphQL | A query language created by Facebook in 2012 for describing the capabilities and requirements of data models for client‐server applications. | | Express GraphQL | A Node.js express library that allows the creation of GraphQL servers. | | Isomorphic Relay | Adds server side rendering support to React Relay. IMRSK fully utilizes this library, while waiting for https://github.com/facebook/relay/issues/589. The eventual goal is to have full isomorphism with authentication. | | Redis | In-memory data structure store, used as database and cache. | | React Helmet | Reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags. | | ESLint | Pluggable linting utility for JavaScript and JSX. | | Babel | Compiles ES6/ES7 to ES5. Allows using features from ES6 and ES7 today. | | Webpack | Bundles npm packages and the application Java Script into a single file. Includes hot reloading via react-transform-hmr. Also, Webpack can bundle any required CSS. | | Node.js| Event-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient. | | npm Scripts| Glues all this together in a handy automated build. | Nice table from isomorphic-material-relay-starter-kit

Quick Start

# clone our repo
# --depth 1 removes all but one .git commit history
git clone --depth 1 https://github.com/bfwg/relay-gallery.git

# change directory to our repo
cd relay-gallery

# install the repo with npm
npm install

# start the app
npm start

# the frontent React/Relay app will be running on port 3001
# the backend graphql server will be running on port 3000
# webpack-dev-server proxy requests to from port 3001 to 3000

# update graphql schema
npm run update-schema

The default database is using Redis so you need to install redis http://redis.io/

# start Redis server make sure it is running on port 6379
redis-server
# start Redis cli and setup a username/password for image upload authentication
redis-cli
# set User
# user1:123
127.0.0.1:6379> set user1 "{ \"password\": \"123\"}"

Build and run app for production

npm run build
npm run server:prod

Trouble shooting

Any issue with build or development please fire a issue.

Development

Want to contribute? Great! Create an issue or fork this repo and make a pull request.

NGINX config

If you are using Nginx for your production server Use ngx_http_image_filter_module to make the image load faster!

server {
       listen 3005;

       root /xxx/xxx/projects/relay-gallery/static;

       location / {
               proxy_set_header x-forwarded-host $host;
               proxy_set_header x-forwarded-server $host;
               proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
               proxy_pass              http://localhost:3000;
       }

       location ~ /(graphql|login|upload) {
             proxy_pass http://localhost:3000;
       }



       location ~ /images/(.*)$ {

           set $width "-";
           set $quality "75";
           if ($arg_w != '')
           {
             set $width $arg_w;
           }
           if ($arg_q != '')
           {
             set $quality $arg_q;
           }

           image_filter resize $width -;
           image_filter_jpeg_quality $quality;
       }

}

More Info

For more code, build folder structure info, please checkout the following:

material-ui-webpack-example

relay-examples

License

MIT