hackathon boilerplate

Founders and Coders' current cohort are doing Hackathons all through April. This is some boilerplate code to get us off to a good start.

It's a work in progress so feel free to contribute!

It's based around the core technologies of FAC7's RHINO stack (React, Redis, Hapi and Node):

What's in the boilerplate?

The aim of the boilerplate is to have a skeleton of a React single page app up and running with a Hapi server in the background serving static files.

The server can easily be extended to serve data as an API by communicating with the configured redis server.

The frontend also has a skeleton redux setup which can be extended

There are two main branches, one with twitter auth set up (called twitter) and the master branch without twitter auth. If using twitter auth remember sign up for a twitter app and add the consumer key and consumer secret (as CONSUMER_KEY and CONSUMER_SECRET) to a config.env file

If you want to get straight up and running skip to the last section!

Key Features

Build Tools

Webpack & Babel

Frontend code is run through Webpack which transpiles all the js and jsx through babel and bundles it into one neat file app.js which meets ES5 standards

Sass

Webpack also watches for .scss files and turns them into css that can be used in the bundle

Just require or import the .scss file directly into your React code

Make sure if you're using sass variables that are in annother file to use the @import rule at the top of the .scss file you're using.

Backend

The backend folder holds all the server and db files:

The root server file is server.js and this imports routes (as just plain objects) from the routes folder. The aim was to keep the server file as clean and neat as possible.

The server is configured to serve js files, images (from the ./public/img folder) and handles requests from react-router urls (these would usually crash the server if a user were to put them in manually so the ReactUrls.js route takes the request and replies with index.html (react router is clever and handles the page the user was on!))

Bluebird.js

Redis is separated into the client and the redisFunctions files: The example redis functions (these should also be deleted) take advantage of the fantastic Bluebird Promise library:

these let you write code that relies on callbacks in a much cleaner, semantic way:

So this function:

getDummyData((err, data) => {
  if (err) throw err;
  else {
    reply(data)
  }
})

could be rewritten using bluebird as:

getDummyData()
  .then(data => { reply(data) })
  .catch(error => { throw error })

.then() calls can be chained, making code that calls the database multiple times much cleaner

Bluebird is optional but highly recommended.

Frontend

Frontend code is split up between the frontend folder and the public folder (the public folder holds the index.html and img files (and is also the webpack app.js bundle target))

Components live in the Components folder (which should be reorganised depending on the project needs) and the current App.js holds the Header and Footer wrapper that appear on each page.

The routes.js folder is the highest level component which takes all of the components and orders them as routes

These then get rendered to the DOM in index.js

React Bootstrap

The current boilerplate makes use of React Bootstrap which is a brilliant collection of components based on the Bootstrap css framework

Take a look at the documentation here

to use Bootstrap components you can import as many as you like directly into your component:

import { Button, Nav, Grid } from 'react-bootstrap'

and then use them in your components as JSX:

render () {
  return (
    <div>
      <Nav />
      <Button>Click Me!</Button>
      <Grid></Grid>
    </div>
  )
}

the react-bootstrap docs have some great examples of how to use these components

Header and Footer

The current header and footer have been configured to take a logo image and some links (that are rendered as react router links) - these options are in the App.js file. If you add or remove links in App.js, make sure to update them in your router (routes.js)

There are also some default colors set for the header and footer background colors: these can be changed in _variables.scss in the scss folder

Get Up and running

1- Clone or fork the repo (if you want to repurpose it as your own delete the .git folder and copy the files over to your new repo) and change the repository and bugs fields in the package.json

$ git clone https://github.com/andrewMacmurray/hackathon-boilerplate.git

2- Install all the dependencies by cd-ing into the folder and running:

$ npm install

3- Start your redis server (in annother terminal window) and then open the redis-cli

$ redis-server

$ redis-cli

4- If you just want to make changes to the frontend code (i.e. you don't need any data from the hapi server or database) run:

$ npm run dev

This fires up the webpack dev server with hot reloading. Go to localhost:8080 in your browser to see the build

5- If you want to see the whole app running (with api data and all), you need to run two commands:

$ npm run nodemon

The nodemon command runs the backend code through babel and starts the server (every time you make changes to the code this gets run)

$ npm run watch

The watch command runs webpack in watch mode, this watches for changes in your code and adds the changes to the bundled file app.js in the public folder

WARNING: previewing change when running both watch and nodemon is slower than running in just frontend dev mode (so don't freak out when the browser says page not found, just give it a moment)