. 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 framework. To start the server run from the root folder. Express node index.js Files are separated into folders, so if you do not need Node server just remove the file and the folder. index.js server 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 for two routes that we have. ./ index.html React + Redux Check out the folders structure. Created with help of https://creately.com - are payloads of information that send data from your application to your store actions - folder has folder where components stored and components also store here components dumb dumb or presentational smart or container - pages based on routes pages - specify how the application’s state changes in response reducers - HTTP request files for each component resources - reusable global services, e.g. Alert, Notification service services For more details, you can jump into any folder and check files inside. Inside folder you may find file. It takes all pages and connect() React Redux store with the higher-order component. pages App.jsx withRouter Store The store is created in the file. You may see that in production process we do not add redux-logger to middleware. app/store.js Build Configurations Scripts Have a look at scripts in . package.json You may see three build types dev build we run Webpack and Gulp concurrently as they are not dependent on each other. dev, prod, staging. Webpack For production and staging builds we need to minify files and set the process environment to , so for that, we are using production webpack-merge CDN If you want to support CDN for static files (js, css, images, fonts) you are welcome. Specify in file 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. config.json assetHost Gulp replace static files: Grunt images and fonts inside: You can download the or install through npm and follow instructions. For more information, have a look what’s new in v4. repository npm i create-react-redux-app-structure _If you missed first part go here and figure out what is create-react-redux-app-structure about 😎_codeburst.io v4 Create React + Redux app structure with build configurations. What’s new? 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
