What is the best way to export modules with submodules in (Vue, React) [closed]

Question

What is the best way to export a module that includes submodules using an index.js. For a long time now I follow a pattern on naming and saving my web components on my projects (Vue or React). But I want a more practical way to export a module using a single index to avoid cases like the following:

My Pattern

import PostDetail from 'src/views/posts/PostDetail'

Answer 1

We use react and redux for my applications. We mostly try to follow modular design in code folder structure.

Modules happen to be independent in itself and can be used standalone. If some parts of modules are required to be used outside the module itself, we only expose those files through it's index.js

Here's what we follow:

Project-name
├── assets
│   ├── images
│   └── stylesheets
│       ├── components
│       ├── misc
│       ├── objects
│       └── vendor
├── build
│   ├── javascripts
│   └── stylesheets
├── src
│   ├── modules
│   │   │  
│   │   ├── common
│   │   │   ├── actions
│   │   │   ├── components
│   │   │   ├── helpers
│   │   │   └── reducers
│   │   ├── module_1
│   │   │   ├── sub_module_1
│   │   │   │   ├── actions
│   │   │   │   ├── components
│   │   │   │   │   └── body
│   │   │   │   ├── helpers
│   │   │   │   └── reducers
│   │   │   └── sub_module_2
│   │   │       ├── actions
│   │   │       ├── components
│   │   │       ├── helpers
│   │   │       └── reducers
│   │   ├── module_2
│   │   │   └── components
│   │   ├── module_3
│   │   │   ├── actions
│   │   │   ├── components
│   │   │   │   └── body
│   │   │   ├── helpers
│   │   │   └── reducers
│   │   └── module_4
│   │       ├── components
│   │       └── helpers
│   └── pages
├── stories
│   ├── common
│   ├── establishment
│   │   └── visiting_clinics
│   ├── providers
│   │   └── body
│   └── relations
└── tools

Each module has an index.js at it's root directory which exposes required files and functions which is to be used in other modules.

This structure makes local file interactions smooth as imports are short, clearly visible and name spaced(functionality based) where it's coming from.

Answer 2

This is an interesting question. I've had this same question in mind for a while and tried out a few different approaches and settled at one that seems to work pretty fine for me.

1. Put your reusable components in one place.
2. Put your layout wrappers that use the reusable components in one place.

1. Reusable Components

All your reusable components include custom buttons and standalone components like Posts as you've mentioned. If you're posts can have details and comments, keep two separate components PostDetails and PostComments and import and compose them in a separate Post component. Plug and play is the key.. You can opt for two structures here,

components/PostDetails

components/PostComments

components/Post

or

components/Post/PostDetails/...

components/Post/PostComments/...

and import them in components/Post/Post.js

But your default export will be in components/Post/index.js that will export Post.js. This way you're making sure, Post component is composed and reusable and can be imported as components/Post in any page/layout.

2. Layout Wrappers

All your pages/layouts go here. Typical example would be home page, about page that would import the components and put them in the right place.

This usually goes like with folder names like pages or containers depending on the project.

pages/home

pages/about

I have a few code repos that can help you better grasp this project structure.

Portfolio

React-Redux Boilerplate