Universal React.js Starter

---

Packed with:

React

Redux

Redux Universal !

React Router v4 !

Express

Mongoose

Webpack v2

Immutee

Simple starter-kit for universal React.js app, Using express.js for server-side, and mongoose.js for database. with react-router v4 server side rendering

Easy project structure, SEO friendly, fast performance, and easy to maintain.

with modular sass + plop generator + hot reload + server side rendering !

---

Let's get started

Project Structure

universal-react-starter

	client
		App // layout + provider + routers components
		component // dumb component (stateless component)
		container // smart component connected with redux store
		index.js // entry point client
		main.scss // global styling
		reducers.js // config reducer
		routes.js // config routes

	public //static file
		javascripts
		stylesheets
		favicon.ico
		robots.txt

	server
		db
			model // schemas
			index.js // config db
		source // source routers
		app.js // express setup
		index.js // entry point server

	utils
		starting // template for starting project
		templates // template for generator
		clean.js // cleaning project config (becareful with this !)
		plopfile.js // generator config

	.babelrc // babel loader & css module loader config
	postcss.config.js // auto prefixer for sass
	sass-loader.js // sass loader config
	package.json
	webpack.config.devClient.js
	webpack.config.devServer.js
	webpack.config.prodClient.js
	webpack.config.prodServer.js

/client, contains entry point for client side, config for reducers and routes.

/client/App, main wrapper for app layout, routers, reducers.

/client/component, contains dumb React components which depend on containers for data.

/client/container, contains React components which are connected to the redux store.

/server, entry point for server side and express config.

/server/db, models, schemas.

/server/source, router, API and config for server side rendering.

/utils, contains plop config, clean config, starting template and generator template.

/utils/starting, contains starting template (if project got cleaned with npm run clean).

/utils/template, plop generator template.

Container care about how things work, while Component care about how things look.

component & container structure

component
	Header
		index.js // entry component
		style.css // styling for component

container
	Home
		action.js // actions for dispatching store
		constants.js // action type
		index.js // entry container
		reducer.js // container's reducer
		style.css // styling for container

START development

Clone the project from GitHub

git clone https://github.com/firstpersoncode/universal-react-starter.git

Install all dependencies

npm install

start the development ! You can see the sample app with this script if you're not cleaning the project yet

npm start

Before start the new project, you can use this script to remove the sample app, this script will remove everything inside /client and /server directories, and generate the starting components and containers

npm run clean

Bundle all the files, it will create the style.css for all the style files, bundle.js for the client app, and app.js for the server app. the output directory will be in /.build directory.

npm run build

If you want to see your project in production environtment

npm run start:prod

This Universal ReactJS Starter-kit is packed with plop generator, you can generate component or container template using this script

npm run generator

Hit me up if you have any questions regarding to the project > [email protected]