tonyspiro.com-react

This app demonstrates how to build a portfolio blog using React on the Cosmic JS content platform. Uses React Router, Flux and Cosmic JS to load pages fast in a single page application.

#####View a demo here

Getting started

#####Install

git clone https://github.com/tonyspiro/tonyspiro.com-react
cd tonyspiro.com-react
npm install

#####Run webpack dev

npm run dev

Go to http://localhost:8080/webpack-dev-server #####Run production

npm start

Go to http://localhost:8000

About the app

• My original website at http://tonyspiro.com is built on the WordPress platform. After running benchmark tests with ApacheBench between my WordPress site and this React / Cosmic JS version, the React version clocks in over 10x FASTER to "first paint". This is the real benefit from the React / API set up, less server overhead and faster page load times between "pages". You can really see a significant speed difference on mobile.

WordPress (26.7 seconds):

React / Cosmic JS (2.3 seconds):

• Benchmarking was performed by running ApacheBench. ab -n 100 -c 10 http://tonyspiro.com/ and ab -n 100 -c 10 http://tonyspiro.com:8000/

• React Router is used to perform the navigation between "pages". Running npm start boots a node server that allows for the pages to render properly when loaded in from a url or on page refresh.

• The Cosmic JS browser package is used to pull the data from the Cosmic JS API into the app.

• Webpack is used for the dev and build process to turn ES6 JS into browser-friendly ES5 JS using the babel-loader.

• The front end style is based off a theme from Start Bootstrap.

###How I did it Here are the steps that were taken to build this app:

1. I exported the data out of my WP blog using the Cosmic JS WP Export plugin. The exported JSON file is included in this repo at tonyspirocom.json
2. I created a new bucket in Cosmic JS
3. I then imported the JSON file into my Cosmic JS bucket
4. I built the React app and edited config.js to point to the correct bucket in Cosmic JS