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?
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
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.
- 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.
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.
Have a look at scripts in
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.
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
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.
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 :)