Skip to content

Instantly share code, notes, and snippets.

@iErik
Created June 21, 2019 19:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iErik/a1a7f58f576b2d600fde25e4662a50f4 to your computer and use it in GitHub Desktop.
Save iErik/a1a7f58f576b2d600fde25e4662a50f4 to your computer and use it in GitHub Desktop.

Currently, we're using two different folder structures for this SPA for each sub-project, one for the Payroll project and another for the Employee project. Although the folder structure used in Payroll is outdated and probably won't be there anytime soon. Both structures share a lot of similarities with each other.

In the Payroll project, we're currently following this structure:

src/
  -- assets/       -> All the assets (images, icons, etc) used in the SPA

  -- components/   -> Visual components used in the SPA
     --- Common/   -> Generic components
     --- Employee/ -> Components used specifically in the Employee domain
     --- Layout/   -> Components used for the SPA layout
     --- Payroll/  -> Components used specifically in the Payroll domain

  -- containers/   -> Components containing application and data logic for each domain of the SPA
     --- Employee/ -> Containers used in the Employee domain, separated by route
     --- Layout/   -> Containers used for the SPA layout
     --- Payroll/  -> Containers used in the Payroll domain, separated by route

  -- content/      -> Contains static files/data (usually .json files) that are used by other components/containers in the App

  -- graphql/      -> Contains GraphQL mutations, fragments and queries used in the App, separated by domain

  -- mixins/       -> Contains Vue mixins (reusable component logic) that are used by components/containers in the App

  -- modules/      -> Contains generic helper modules that are used in multiple regions of the app

  -- router/       -> Contains the router setup for the App

  -- store/        -> Contains store setup for the App, each store is divided in sub-modules

  -- styles/       -> Global SCSS styles used in the App, mostly imports from other libs

  -- views/        -> Currently, this folder only contains our Logged.vue component, which is basically the root component for the App

* App.vue
* main.js
* plugins.js
* registerServiceWorker.js
* router.js
* socket.js
* store.js
src/
  - Common/
    --- assets/
    --- components/
    --- containers/
    --- content/
    --- graphql/
    --- mixins/
    --- modules/
    --- routes/
    --- services/
    --- store/
    --- styles/
    --- views/

  - Employee/
    --- assets/
    --- components/
    --- containers/
    --- content/
    --- graphql/
    --- mixins/
    --- modules/
    --- routes/
    --- services/
    --- store/

  - Payroll/
    --- assets/
    --- components/
    --- containers/
    --- content/
    --- graphql/
    --- mixins/
    --- modules/
    --- routes/
    --- services/
    --- store/

* App.vue
* main.js
* plugins.js
* registerServiceWorker.js
* router.js
* socket.js
* store.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment