TW Reporter

New Media foundation in Taiwan.

Environment

Install node(https://nodejs.org/en/) v4.x.x or v6.x.x first.

Installation

$ npm install

Pre-process

$ cp api/config.example.js api/config.js 

edit api/config.js to connect to your own api host
if you have no api server, you can follow this to build your own API layer.

Build your own API

Before starting up twreporter-react, you may need serveral API endpoints to provide the articles.
If you don't have these endpoints, you can follow next steps to build up your own API layer.

FIRST STEP: create a CMS

You can use CMS of twreporter to create your own CMS.
Since you have your own CMS, you can create, edit and delete those articles you want to show on your twreporter-react site.

SECOND STEP: start up an API server

tr-projects-rest is used to start up a RESTful webservice which is created for CMS of twreporter.

THIRD STEP: edit api config to connect to your own API

edit the api/config.js, and connect to your own API host.

After doing these setups, you can start up your twreporter-react site.

Development

$ npm run dev

Production

$ npm run build; npm run start

React & Redux

This project is built on Redux framework and rendered by React. It uses server-side(universal) rendering, and also integrate Webpack Hot Middleware in Dev environment.

Redux State

Since Redux see its state as single source of truth, we store our own data like the plain object below.

{
  articlesByUuids: {
    73177cb8c0c261000b3f6d2: {
      error: null,
      hasMore: true,
      isFetching: false,
      items: [
        "57ecfc9061fdfb0f009f87a4",
        "57eb6d3361fdfb0f009f879f"
      ],
      lastUpdated: 1475302285419,
      total: 233
    }
  },
  categories: {},
  device: "desktop",
  entities:{
    articles: {
      57ecfc9061fdfb0f009f87a4: {
        ... // fields of article
      },
      57eb6d3361fdfb0f009f879f: {
        ... //fields of article
      }
    },
    categories: {
      573177cb8c0c261000b3f6d2: {
        id: "573177cb8c0c261000b3f6d2",
        key: "573177cb8c0c261000b3f6d2",
        name: "評論",
        sortOrder: 6,
        v: 0
      }
    },
    tags: {},
    topics: {}
  },
  featureArticles: {
    error: null,
    isFetching: false,
    items: [],
    lastUpdated: 1475302285397
  },
  header: {},
  relatedArticles: {},
  routing: {},
  selectedArticle: {
    error: null,
    id: "57ecfc9061fdfb0f009f87a4",
    isFetching: false, 
    lastUpdated: 1475303011138,
    slug: "photo-taichung-flaneur"
  },
  slugToId: {
    photo-taichung-flaneur: "57ecfc9061fdfb0f009f87a4",
    chen-chin-feng-illustrator: "57eb6d3361fdfb0f009f879f"
  },
  tags: {}
}

Reference

react-redux-universal-hot-example Redux React

License

• Copyright (C) 2015 - 2016 The Reporter 報導者. All rights reserved.
• Distributed under the GNU AGPL v3.0