Legit-o-Meter

Legit-o-Meter is an interactive digital learning tool for students and teachers to evaluate the legitimacy of online news. This app is part of the Fake the News Project funded by Mozilla Hive ATX.

A staged version of the site is hosted at: legitornot-test.herokuapp.com

Roadmap

Current Status: Our team is actively developing a working prototype led by @rallyjinx, @mateoclarke, and @seandellis.

Contributing

TODO

Tech Stack

This project was bootstrapped with Create React App. It uses Node.js and Express.js with Knex providing a query building for a Postgres datastore. The project uses Semantic UI framework for styling UI components.

To get setup:

1. Download Node

   • npm install

2. Download Postgres

   • We used the Postgres Mac app. Once you open it for the first time, initialize it.
   • You will probably need to add this to your bash or zsh config
   • export PATH=$PATH:/Applications/Postgres.app/Contents/Versions/latest/bin

3. Create a database

   • Install knex.js
   • npm install knex -g
   • Create the database
   • createdb legit-o-meterdb
   • Migrate and Seed the database
   • knex migrate:latest
   • knex seed:run

4. Run both the front-end React client app and the back-end Node server

• Node/Express Back-end Server
  • npm start
• React Front-End Client App
  • cd react-ui
  • npm start

Deploy

1. Publish master branch.

• git push heroku master

2. Run db migration on heroku (if necessary)

• heroku run knex migrate:migrate --knexfile server/knexfile.js
• It might be necessary to Reset the database in the Heroku console. BUT this looses all the data
• heroku run knex migrate:rollback --knexfile server/knexfile.js

Entity Relationship

Link to image of object_model

create-react-app with a Node server on Heroku

A minimal example of using a Node backend (server for API, proxy, & routing) with a React frontend.

To deploy a frontend-only React app, use the static-site optimized
▶️ create-react-app-buildpack

⤵️ Switching from create-react-app-buildpack?

Design Points

A combo of two npm projects, the backend server and the frontend UI. So there are two package.json configs.

1. package.json for Node server & Heroku deploy
   • heroku-postbuild script compiles the webpack bundle during deploy
   • cacheDirectories includes react-ui/node_modules/ to optimize build time
2. react-ui/package.json for React web UI
   • generated by create-react-app

Demo

Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.

Deploy to Heroku

git clone https://github.com/mars/heroku-cra-node.git
cd heroku-cra-node/
heroku create
git push heroku master

This deployment will automatically:

• detect Node buildpack
• build the app with
  • npm install for the Node server
  • heroku-postbuild for create-react-app
• launch the web process with npm start
  • serves ../react-ui/build/ as static files
  • customize by adding API, proxy, or route handlers/redirectors

⚠️ Using npm 5’s new package-lock.json? We resolved a compatibility issue. See PR for more details.

👓 More about deploying to Heroku.

Switching from create-react-app-buildpack

If an app was previously deployed with create-react-app-buildpack, then a few steps are required to migrate the app to this architecture:

1. Remove create-react-app-buildpack from the app; heroku/nodejs buildpack will be automatically activated

   heroku buildpacks:clear

2. Move the root React app files (including dotfiles) into a react-ui/ subdirectory

   mkdir react-ui
   git mv [!react-ui]* react-ui/
   # You'll see "fatal: Not a git repository"; let's fix that error
   mv react-ui/.git ./

3. Create a root package.json, server/, & .gitignore modeled after the code in this repo

4. Commit and deploy ♻️

   git add -A
   git commit -m 'Migrate from create-react-app-buildpack to Node server'
   git push heroku master

Local Development

Run the API Server

In a terminal:

# Initial setup
npm install

# Start the server
npm start

Run the React UI

The React app is configured to proxy backend requests to the local Node server. (See "proxy" config)

In a separate terminal from the API server, start the UI:

# Always change directory, first
cd react-ui/

# Initial setup
npm install

# Start the server
npm start