Heroku React Starter Kit

It simple React Starter Kit with latest features and application demo with API Youtube, config deployment to heroku.

Easy run localhost and prepare files for deploy.

Functions

• Search video
• List video
• Detail video
• 404 for page not found, and 500 for error.
• Loader for fetch data

Features

• react v16.1.1
• redux
• recompose
• thunk middleware
• react-router v4
• axios
• mock data with json-server
• reselect
• webpack
• postcss
• css-modules
• eslint with support react and ES7
• ES7 async function and await expression
• fetch data before component rendering
• Material Design UI Components for the Web
• prepared structure less styles files with support css-modules
• classnames
• CSS resets normalize.css and uniforming the default look across different browsers

Routing

Routing with react-router version 4, it use Switch component of react router Read Docs

Demo

https://heroku-demo-react.herokuapp.com

Service API

Folder src/services/api.js easy create you own API services to connect real data with axios

Mock data

Easy create mock data in folder /mock connected with json-server

You can use mock data with 1000 items, add to url mock parametr

http://localhost:8080/webpack-dev-server/?mock

Running Locally

Make sure you have Node.js Also for Heroku can be helpfull Heroku Toolbelt.

npm install           # install nodejs dependencies

npm run localhost     # running local server on http://localhost:8080/webpack-dev-server/ and json-server with mock data on port 3000

npm run postinstall   # prepare bundle.js for production server, used for heroku deployment

npm start             # start node server, starting Node.js Express application in index.js

npm run lint          # run lint

Author

Vitalijs Karpusa

Documentation

For more information about using Node.js on Heroku, see these Dev Center articles:

• Getting Started with Node.js on Heroku
• Heroku Node.js Support
• Node.js on Heroku
• Best Practices for Node.js Development
• Using WebSockets on Heroku with Node.js