Blog engine powered by React using Relay and GraphQL to interact with data.
-
Install
bloql
package and a bloql retriever to get files:npm install bloql bloql-markdown-file-database --save
-
Create a backend to serve blog posts:
var path = require('path'); var express = require('express'); var bloql = require('bloql/middleware/express'); const app = express(); bloql(app, { pretty: true, postsPath: path.join(__dirname, 'posts'), database: require('bloql-markdown-file-database') }); ... app.listen(3000, () => { console.log('Server started and listening on port 3000'); });
(for now only available for
express
) -
Now you're all set to use bloql on the client:
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createComponent } from 'bloql/PostList'; class PostList extends Component { render() { // Render your post list using all react components you want return ( <ul> {this.props.posts.map(post => <li key={post.meta.slug}>{post.meta.title}</li> )} </ul> ); } } // Convert your component into a Bloql element PostList = createComponent(PostList); // You can place your component anywhere in any application and // combine it with other React components ReactDOM.render( <PostList/>, document.getElementById('app') );
Have a look there for minimal and understandable examples: bloql-examples