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
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-schemaThe 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 buildnpm run server:prodTrouble 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: