rg
relay-gallery
npm i relay-gallery
rg

relay-gallery

A gallery web app using React, Relay and Graphql

by Fan Jin

1.0.0 (see all)License:MITTypeScript:Not FoundCategories:Material UI Gallery
npm i relay-gallery
Readme

Relay Gallery

Maintenance Status

alt tag

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

TechnologyDescription
ReactLibrary for building SPA.
Material UILibrary for implementing Material Design in React. All user interface in this kit is built exclusively with Material UI components.
RelayA Javascript framework for building data-driven react applications.
GraphQLA query language created by Facebook in 2012 for describing the capabilities and requirements of data models for client‐server applications.
Express GraphQLA Node.js express library that allows the creation of GraphQL servers.
Isomorphic RelayAdds 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.
RedisIn-memory data structure store, used as database and cache.
React HelmetReusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.
ESLintPluggable linting utility for JavaScript and JSX.
BabelCompiles ES6/ES7 to ES5. Allows using features from ES6 and ES7 today.
WebpackBundles 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.jsEvent-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient.
npm ScriptsGlues 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

Downloads/wk

3

GitHub Stars

28

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.0
latest
6yrs ago
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate