arpitgo4/react-redux-scaffold

Scaffolding for frontend only applications with React-Redux.

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 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.

react-redux-scaffold's Issues

Css modules style is overrided by vendor stylesheets

In Footer component,

custom style is overriden by the bootstrap's default style for 'color' attribute.

Only, after making some change, and hot reloading the custom styles takes effect.

Hot reloading after some mistake not working !!

Hot reloading is not working after creating some sytactical mistake in development mode, build takes place but not hot loaded. Full browser reload is needed.

Issue exists at (commit hash): 358d423

Compiling fonts in same directory as bundle.js

On building the project, the fonts are copied on the same level as the bundle.js and index.html.

Add them in seperate fonts folder, to make the build output neat.

style.css in bundling in style.bundle.css

Extract-text-plugin configuration is moved to a seperate branch "extract-text-plugin_integration".

Styles from the main stylesheet of the project are not included in the style.bundle.css.

Check for the ExtractTextPlugin configuration, 'style-loader' was make as fallback mechanism in its configuration, otherwise 'self not defined' error was being thrown.

Bootstrap and font-awesome styles are there in the bundle, but style from the project is not included.
Also, check for the hot-loading in development for styles with ExtractTextPlugin as loader.

react-hot-loader added as project dependency

React hot loader is being used in loaders for webpack irrespective of the environment in which application is started.

Desired behaviour,
webpack loaders array for html, css and js must not have react-hot-loader.
so, that react-hot-loader dependecy can be moved to the dev dependencies in the package.json.

Browser refresh needed for Router changes

Upgrade the verison of the react-router to 4, so that hot loading can work.