Improve file structure

[prank7]

We need to refactor the file structure of shared directory.

[carloscuatin]

I agree as there are several errors in the file structure and the import of these examples would one leave a index.js in each folder and from there export files, classes or components that are part of that folder

containers/index.js

export DevTools from './DevTools/DevTools';
export PostContainer from './PostContainer/PostContainer';

Import of routers.js

import { PostContainer } from './containers';

[SOSANA]

@carloscuatin I think we should have index.js in reducers folder, than each reducer have its name as the purpose, that way in index.js we can utilize import { combineReducers } from 'redux';

good example that I really liked was @choonkending repo react-webpack-node, each reducer as the name as the reducer and added in index check it out here

Also we should add actions by there name as well as in the future this repo should include another api for users so in future we could have /actions/posts.js and /actions/user.js or whatever future action js file that is needed

Also this brings up questions with server side api and how we would include a new schema to our exisitng api? I know we would add a controller and model but what about applying it to our current server.js file? app.use('/api', posts);

[carloscuatin]

exactly what I mean @SOSANA in fact I'm already asking about certain changes to include REACT-router-redux and agree we should separate our api project and then implement nothing but a proxy so that it can be used in mern

[SOSANA]

@carloscuatin 1+

[SOSANA]

@carloscuatin started refactor reducer plus implementation react-router-redux, you down to update rest of redux folder as per my comment on pr #93

@prank7 @carloscuatin I will do a pr for a refactor in shared components and container to have no sub folder just js files. I will update our module pattern for files affected by new directory path. Are okay with this? plus I'll update files to remove minor errors to fix for eslint that keep showing up I can do at same time.

[prank7]

@SOSANA @carloscuatin sure. We need to get rid of redux folder and it should look more like this-

|- shared
  |- components
  |- containers
  |- tests
  |- actions
  |- constants
  |- reducers
  |- store
  - routes.js

I am in favour of keeping folders inside components and containers because it leaves the scope for anyone using css modules to write css files in the same folder. However, we should rename the main files inside these sub-folders to go by the name of index.js like @carloscuatin mentioned.

Is it a good idea to include react-router-redux?

[SOSANA]

@prank7 @carloscuatin what if we used domain file structure instead of organize files by nature (action, component, container, reducer)?

curious if you have this problem working on hashnode or larger projects? "Fast forward two months from now, and the components/ directory contains dozens of files, and I need to open 4 files in 4 different directories each time I touch a single feature." check out this blog

| - shared
    | - app
        | - Header.js
        | - Sidebar.js
        | -  App.js
        | - reducers.js
        | - routes.js
    | - command/
        | - Command.js
        | - CommandContainer.js
        | - CommandActions.js
        | - CommandList.js
        | - CommandItem.js
        | - CommandHelper.js
        | - commandReducer.js
    | - Post
        | - Post.js
        | - PostContainer.js
        | - PostActions.js
        | - PostList.js
        | - PostItem.js
        | - PostImage.js // if we haded this in future
        | - PostReducer.js
        | - Post.css
    | - user // for future
        | - User.js
        | - UserContainer.js
        | - UserActions.js
        | - UserProfile.js
        | - UserAvatar.js
        | - userReducer.js
        | - User.css
    | - test
        | - app
            | - Header.js
            | - Sidebar.js
            | -  App.js
            | - reducers.js
            | - routes.js
        | - command/
            | - Command.js
            | - CommandContainer.js
            | - CommandActions.js
            | - CommandList.js
            | - CommandItem.js
            | - CommandHelper.js
            | - commandReducer.js
            | - Post
        | - Post.js
            | - PostContainer.js
            | - PostActions.js
            | - PostList.js
            | - PostItem.js
            | - PostImage.js // if we haded this in future
            | - PostReducer.js
            | - Post.css
        | - user // for future
            | - User.js
            | - UserContainer.js
            | - UserActions.js
            | - UserProfile.js
            | - UserAvatar.js
            | - userReducer.js
            | - User.css

[carloscuatin]

@prank7 the idea of implementing react-router-redux is because react-router is not well liked redux, implementing react-router-redux allow you to have full control of our application from redux

[YarivGilad]

What do you think about this suggested folder structure approach?
http://marmelab.com/blog/2015/12/17/react-directory-structure.html

[somus]

Hello, everyone. Past few weeks we have been busy with the development of hashnode. In coming weeks, we are planning to actively work on mern.

Regarding the file structure, what @SOSANA has shared make sense. I've added little changes to that structure. Let me know what you think.

| - shared
    | - components // globaly shared components
        |  - Button.js
    | - pages // can also be called views
        | - App
            | - __tests__ // all the tests for this folder goes here
                | - components // Sub components of this page
                    | - Header.spec.js
                    | - Sidebar.spec.js
                | - App.spec.js
                | - AppReducer.spec.js
                | - AppActions.spec.js
            | - components // Sub components of this page
                | - Header.js
                | - Sidebar.js
            | - App.js
            | - AppReducer.js
            | - AppActions.js
            | - App.css
        | - PostPage
            | - components // Sub components of this page
                | - Post.js
                | - PostList.js
                | - PostItem.js
                | - PostImage.js
            | - PostPage.js
            | - PostReducer.js
            | - PostActions.js
            | - PostPage.css
        | - UserPage
            | - components // Sub components of this page
                | - User.js
                | - UserProfile.js
                | - UserAvatar.js
            | - UserPage.js
            | - UserReducer.js
            | - UserActions.js
            | - UserPage.css
| - utils // utility scripts
| - reducer.js // root reducer
| - store.js
| - routes.js

[SOSANA]

@somus 1+

[somus]

I also think, we can merge both client and shared folders. Because the client is only holding the index file.

[somus]

I've added little changes to file structure from my previous comment. Instead of pages, I made it into modules because different pages can use the same reducer. So, it doesn't make sense to put in the pages folder. Now each module folder will have a pages folder where all the related pages for that module will go.

| - shared
    | - components // globaly shared components
        | - __tests__
            | - Button.spec.js
        |  - Button.js
    | - modules
        | - App
            | - __tests__ // all the tests for this folder goes here
                | - components
                    | - Header.spec.js
                    | - Sidebar.spec.js
                | - App.spec.js
                | - AppReducer.spec.js
                | - AppActions.spec.js
            | - components // Sub components of this module
                | - Header.js
                | - Sidebar.js
            | - App.js
            | - AppReducer.js
            | - AppActions.js
            | - App.css
        | - Post
            | - __tests__ // all the tests for this module goes here
                | - components // Sub components of this module
                    | - Post.spec.js
                    | - PostList.spec.js
                    | - PostItem.spec.js
                    | - PostImage.spec.js
                | - pages
                    | - PostPage.spec.js
                    | - PostViewPage.spec.js
                | - PostReducer.spec.js
                | - PostActions.spec.js
            | - components // Sub components of this module
                | - Post.js
                | - PostList.js
                | - PostItem.js
                | - PostImage.js
            | - pages // React Router Pages from this module
                | - PostPage
                    | - PostPage.js
                    | - PostPage.css
                | - PostViewPage
                    | - PostViewPage.js
                    | - PostViewPage.css
            | - PostReducer.js
            | - PostActions.js
        | - User
            | - components // Sub components of this module
                | - User.js
                | - UserProfile.js
                | - UserAvatar.js
            | - pages // React Router Pages from this module
                | - UserPage
                    | - UserPage.js
                    | - UserPage.css
            | - UserReducer.js
            | - UserActions.js
| - utils // utility scripts
| - reducer.js // root reducer
| - store.js
| - routes.js

[hounded]

I'm not sure if you merged client and shared folders yet, but for what it is worth, as a beginner having that seperation albeit small does help with understanding

[carloscuatin]

add atomic design ?

[hounded]

like I said, beginner, I'm going to use it whatever the structure is and appreciate the great work you guys are doing! I see user being added, is it possible to add something around authentication passport?

[carloscuatin]

of course this is going to do with a flag of mern-cli Hashnode/mern-cli#10 👍

[somus]

@hounded Thanks for your kind words. :) We are thinking to merge it because client folder is there to hold just the index file. In server also, we are importing the routes file for server rendering only. Rest of the server code is for handling APIs.

The user is in the comment is for explanation purposes. Adding authentication to the a boilerplate project is not good, bacause different people want to use different authentication methods. We cannot settle on one. So, we planning to enable mern-cli initiate different version of mern project. One of them can be a fork with authentication. As @carloscuatin mentioned, you can read in detail about in Hashnode/mern-cli#10.

@carloscuatin Atomic design can be confusing for beginners, since it introduces new terms.

[hounded]

@somus cool, thank you

[carloscuatin]

@somus totally agree only this structure enrieda me a little, and I think it is better for beginners folder structure used in the same examples of redux. Not that opinions have

[somus]

Done on v2 branch(c9b74d4).