Folder & File Structure

In this article, we will take a closer look into the folder structure of Wieldy .

Let's get started.

• node_modules/
  

  All the dependency and third party libraries are placed in this folder.

• public/
  

  This folder basically keeps the public assets.

• src/
  

  You can find all the pages, components, modules, apps etc. here in this folder. This is the main workplace for you to start writing/extending the application source code.

  • appRedux/
    

    AppRedux folder contains all the redux related functionality

    1. actions/
       

       Actions folder contains all the redux actions. For example, collapsing the drawer, changing the theme color in demo etc.

    2. reducers/
       

       reducers/ folder keeps all the reducers related files

    3. saga/
       

       saga/ folder keeps alternative side effect model for Redux

    4. store/
       

       store/ folder stores all the state of app

  • routes/
    

    app folder has all the layouts, pages and routes. We will come back to this shortly.

    Here in this app folder, you will find routes/ folder which contains all the pages components and this index.js has all the parent routes defined in it.

    Wieldy has kept the folder structure so easy to remember where the folder structure follow the structure defined in route.

    All the routes defined for sub-menus are inside those parent page component. For example, routes defined for sub-menus of dashboard are inside the dashboard folder’s index.js

  • assets/
    

    This folder keeps the images and other raw materials needed in the app.

  • components/
    

    Now, here comes the components/ folder where we place common components used throughout the app. So, if you want to create a component which you want to reuse throughout the app, you should place that component here.

  • constants/
    

    constants/ folder contains all the constants defined here which are being used throughout the app

  • containers/
    

    All the stateful components rests here in this folder. For example sidenav where we manage the state of the opened link or its style.

  • styles/
    

    This folder contains all the less implementation. So, this is the right place for you to change the color theme or do any theme related customization

So, this was all about the folder structure Wieldy uses.

I hope this article was helpful.