• This repository has been archived on 26/Jun/2022
  • Stars
    star
    158
  • Rank 237,131 (Top 5 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A universal blog app built using React, Express and Cosmic

React Universal Blog

View a demo here

Sign up for Cosmic JS to start managing content for your websites and applications faster and easier.

About

The React Universal Blog is a portfolio blog app that renders html on the server to make all pages visible to search engines. Then after initial load from the server, it is converted to a single page application to allow for fast navigation between pages.

Notes

I tried to keep the organization as simple as possible. There are no client, server or shared component folders. All components are shared and the only difference between client and server are the entry points (app-client.js, app-server.js and app.js).

It uses the following:

  1. React for UI views
  2. Express for server side rendering
  3. React Router for routing
  4. React Hot Loader for hot loading in development
  5. Flux for data flow
  6. Cosmic JS for content management
Install
git clone https://github.com/tonyspiro/react-universal-blog
cd react-universal-blog
npm install
Run development
npm run development

Go to http://localhost:8080

Run production
npm start

Go to http://localhost:3000

Configure your Cosmic JS bucket

After setting up your bucket on Cosmic JS, edit the config.js file and edit the slug to point to the slug of your bucket:

// config.js
export default {
  bucket: {
    slug: 'react-universal-blog'
  }
}

More Repositories

1

react-chat-app

A basic real time chat app using React, Socket.io and Cosmic JS
JavaScript
116
star
2

blackjack

This is a blackjack program built using HTML5, JQuery and CSS.
CSS
46
star
3

easy-mobx-example

Easy MobX + React Example
JavaScript
43
star
4

tonyspiro.com-react

My blog (tonyspiro.com) built using React and the Cosmic JS content API.
JavaScript
42
star
5

react-flux-cosmicjs

Data-driven React application using the Flux pattern and the Cosmic JS browser client.
JavaScript
38
star
6

easy-flux-example

An easy React application that demonstrates basic usage of the Flux architecture pattern.
JavaScript
35
star
7

shorti

Shorti helps you style your React components by rendering short-hand "class names" into inline styles.
JavaScript
22
star
8

react-typeahead-search

A basic search app that shows a bootstrap modal search form and, on typing, pulls in search results via ajax and React.
JavaScript
13
star
9

gulp-mamp

Gulp MAMP allows you to configure, start and stop your MAMP server from the terminal.
JavaScript
11
star
10

progressive-image

Progressive Image is a JQuery plugin that progressively adds larger images based on the current browser width.
JavaScript
6
star
11

react-es6-app-example

This is an example app that uses react in es6 to pull information from a github user with a little Browser Sync thrown in for easy development.
JavaScript
4
star
12

grunt-html5-boilerplate

An HTML5 boilerplate with Grunt task managment functionality
JavaScript
4
star
13

php-gulp-boilerplate

PHP Gulp Boilerplate gives you everything you need to get started with a well-organized, modern web application.
PHP
3
star
14

gatsby-starter

JavaScript
1
star
15

something-awesome-gatsby

🚀⚡️ Blazing fast blog built with Gatsby and Cosmic JS 🔥
JavaScript
1
star
16

vue-blog-netlify-template

JavaScript
1
star
17

vue-blog-cosmicjs

JavaScript
1
star
18

twitter-class-php

This is an easy php class to pull search results from twitter
PHP
1
star
19

another-gatsby-test-site

🚀⚡️ Blazing fast blog built with Gatsby and Cosmic JS 🔥
JavaScript
1
star
20

tony-spiro-netlify

JavaScript
1
star