imbhargav5 / react-universal-starter

React@16, react-router@4, redux and webpack@4 starter project

react-universal-starter

The popular front end stack today is changing fast with React, react-router and webpack releasing newer versions. This is a starter app aimed to demonstrate how to integrate babel@7, react@16,react-router@4 and webpack@4.

Link

Screenshot

Features

This project comes with the following features

• React 16
• React Router 4
• Webpack 3
• Babel
• Server rendering
• Redux integration
• Dynamic imports
• Chunk splitting
• Styled components
• Nodemon

Installation

git clone [email protected]:imbhargav5/react-universal-starter.git
cd react-universal-starter
npm install

Usage

To run app in dev mode

npm run dev

The app should be running on http://localhost:8888/

---

To run app in production mode

npm build
npm start

The app should be running on http://localhost:8888/

---

To clean and rebuild

npm run build

Available build scripts

npm run <script>	Description
prebuild	Cleans up previous build folders.
build:client	Compiles client in production mode.
build:server	Compiles server in production mode.
build	Compiles client and server in production mode.
dev:client	Runs client in development mode
dev:server	Runs server in development mode
dev	Runs client and server in development mode
start	Start app in production mode.
deploy	Deploy(already compiled) app to www through a temporary now.sh url. If now is not already installed, Run npm install -g now.

Contributors

Thanks goes to these wonderful people (emoji key):

Bhargav Ponnapalli 💻	Tirta Nugraha 💻	Ned. 📖	rishabh-327 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT Bhargav Ponnapalli(2017)

react-universal-starter's Issues

use renderToNodeStream instead of renderToString

cc @sagiavinash

Upgrade to babel 7

Thoughts about converting this into a hackathon starter?

Add webpack 3 optimisation plugins

how to use react-helmet with this

kindly suggest how to use react-helmet with this

Build Production Mode

Built Production Mode got dead code elimination from react-tools extension

Integrate nivo

Add @tagraha as contributor

Better design for home page

Dynamic import - Bundle names

Magic comments with webpack 3

Add links

• Git hub repo link
• twitter

npm run build:client

what is this build script for?

when I run it and go to localhost:8080 I get
'Cannot GET /'

I assume this is supposed to run the client side only using webpack dev server without express based server side rending ?

what is the expected behaviour?

Fix nodemon to rerun when server files change

Right now, it doesn't. It just runs once.

Remove package-lock from history

Server side rendering with React router

Two column view with sticky sidebar

http2

Add comments to client/app.js

Server rendering support with Redux

Upgrade to webpack4

Add eslint configuration

Server rendering with data preloading

Deployable to now.sh

Navbar links should activate on route match

We need to use children prop on Route to achieve this.

npm start tmp/lib/server

npm start fails with following error:

> cross-env NODE_ENV=production node tmp/lib/server

module.js:544
    throw err;
    ^

Cannot find module 'users/n/react-universal-starter/tmp/lib/server'

Is this some missing code?

Upgrade to React 16.4

GraphQL support

Universal Async data fetching example

Automatically open app in dev mode

Add 500 page

Add 404 page

Add contributor

Add @negati-ve as contributor.

Animations on Route change

Can we try fade in /fade out animations for the core content on route change?
Also, when a route changes, the links could animate from a lesser opacity when it becomes active.