How create-react-redux-app-structure helps you to start a project faster

See the code on GitHub. Learn more on npmjs.com

I prefer to create a project from the scratch, it helps you to learn, investigate and just understand how tool which you want to add works. New tools come to life more and more often and it is not too easy and fast to start a new project. For example, I decided that React+Redux fits my needs very well, so I started application based on it. I want to use ES6, async/await and more. To run all this stuff I need to configure Wepback, Babel, also Gulp/Grunt will help. So, to make this all to run will take much time. That is why, I decided to prepare and share App Structure for starting project faster with build configurations.

What can we find here?

Server

The server runs on Express framework. To start the server run node index.js from the root folder.

Files are separated into folders, so if you do not need Node server just remove the index.js file and the server folder.

As we are running the server we need to deliver static files .html, .css, .js, images. So for that, we are listening root folder ./ and deliver index.html for two routes that we have.

React + Redux

Check out the folders structure.

Created with help of https://creately.com

• actions - are payloads of information that send data from your application to your store
• components - folder has dumb folder where dumb or presentational components stored and smart or container components also store here
• pages - pages based on routes
• reducers - specify how the application’s state changes in response
• resources - HTTP request files for each component
• services - reusable global services, e.g. Alert, Notification service

For more details, you can jump into any folder and check files inside.

Inside pages folder you may find App.jsx file. It takes all pages and connect() React Redux store with the withRouter higher-order component.

Store

The store is created in the app/store.js file. You may see that in production process we do not add redux-logger to middleware.

Build Configurations

Scripts

Have a look at scripts in package.json .

You may see three build types dev, prod, staging. dev build we run Webpack and Gulp concurrently as they are not dependent on each other.

Webpack

For production and staging builds we need to minify files and set the process environment to production , so for that, we are using webpack-merge

CDN

If you want to support CDN for static files (js, css, images, fonts) you are welcome. Specify in config.json file assetHost URL value for the build where you want to use CDN. After the build is finished you may see prefix assetHost URL in the root index.html file and .css images/fonts.

Gulp replace static files:

Grunt images and fonts inside:

You can download the repository or install through npm npm i create-react-redux-app-structure and follow instructions. For more information, have a look what’s new in v4.

v4 Create React + Redux app structure with build configurations. What’s new?_If you missed first part go here and figure out what is create-react-redux-app-structure about 😎_codeburst.io

Hope it will help you to start your project faster and easier.

I would love to have your help. If you have an idea how to improve, change the app structure please submit a pull request or create an issue.

Thank you for reading. Suggestions, comments, thoughts are welcome :)

If you like this, clap, follow me on medium, twitter, github share with your friends ✌️