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 âď¸