https://github.com/arpitgo4/react-redux-scaffold

Scaffolding for frontend only applications with React-Redux.
https://github.com/arpitgo4/react-redux-scaffold

babel css-modules css3 docker eslint express html nginx nodejs postcss postcss-plugins react-hot-loader-3 react-redux react-router reactjs redux redux-thunk webpack webpack-dev-middleware webpack-hot-middleware

Last synced: 23 days ago
JSON representation

Scaffolding for frontend only applications with React-Redux.

• Host: GitHub
• URL: https://github.com/arpitgo4/react-redux-scaffold
• Owner: arpitgo4
• Created: 2017-04-10T04:32:25.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-05-21T05:44:42.000Z (over 5 years ago)
• Last Synced: 2024-11-08T17:50:47.891Z (3 months ago)
• Topics: babel, css-modules, css3, docker, eslint, express, html, nginx, nodejs, postcss, postcss-plugins, react-hot-loader-3, react-redux, react-router, reactjs, redux, redux-thunk, webpack, webpack-dev-middleware, webpack-hot-middleware
• Language: JavaScript
• Homepage: https://react-redux-scaffold.herokuapp.com/
• Size: 134 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# React-Redux-Scaffold [![Build Status](https://travis-ci.org/arpitgo4/React-Redux-Scaffold.svg?branch=master)](https://travis-ci.org/arpitgo4/React-Redux-Scaffold)

Client side scaffold with React-Redux on the frontend and Express server to serve built files in the production mode. Scaffold supports production and development modes, with **Best Developer Experience** ( DX ) by Hot-Loading for the client side application. There will be no need to restart during development, hence making the experience smooth and decrease the delivery time.

## Scaffold Structure 

```

	.

	├── src                     	#  Frontend source files

	|   ├── actions			#  Action Creators

	|   ├── components          	#  React component's source

	|   ├── config              	#  Redux store's configuration

	|   ├── layouts             	#  React layout component's source

	|   |   └── App.Router.js 	#  React Router    

	|   ├── reducers            	#  Redux reducer's source

	|   ├── index.html          	#  Root HTML template

	|   ├── index.js            	#  Frontend source entry point

	|   └── style.scss           	#  Global Sass stylesheet

	├── .babelrc                	#  Babel configuration ( ES6, React, JSX )

	├── .eslintrc               	#  ESLint configuration

	├── .travis.yml 		#  Travis CI configuration file

	├── devServer.js            	#  Hot loading server source ( development mode )

	├── Dockerfile			#  Docker build script

	├── dist                      	#  Compiled files

	├── .gitignore                	#  Ignored files from git commit

	├── nginx.conf                	#  Nginx production server configuration

	├── package.json              	#  Frontend dependencies

	├── postcss.config.js 		#  PostCSS configuration

	├── Procfile			#  Heroku procfile, for deployment

	├── README.md                 	#  This file

	├── webpack.config.js           #  Webpack configuration for 'production' & 'development' 

```

## Development

```	

# Start client in development mode with hot code loading,

docker run --rm -it -p 3000:3000 -v $(pwd):/usr/src/app arpitgo4/alpine-node

# Inside docker container,

cd /usr/src/app 

npm run start:development

# Open web browser at http://localhost:3000

# Hit frontend dev server to load application in the browser, enjoy developing :)

```

Refer to the [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) for further description.

## Production

```

# Docker image build

docker build -t react-redux-scaffold .

# Start the project

docker run --rm --name react-redux-scaffold -d -p 80:80 react-redux-scaffold

# Open web browser at http://localhost

# You will see a sample Single Page Application

```

## Known Limitations

* Hot Reloading of the Routes ( Browser refresh is needed! ).

## Feedback

In case of any query or feedback, please feel free to connect via

* [email protected] (Arpit Goyal)

Or, open an issue at github.