Directory Structure

The following are directory structures that you can follow to start creating React application in Soya Next. The directory structures are not limited to these listed here, so choose whatever that meet your needs.
Basic
  ·
  ├─ components
  │  └─ Layout
  │     ├─ Layout.js
  │     ├─ Layout.module.css
  │     └─ logo.svg
  ├─ config
  │  └─ default.json
  ├─ pages
  │  └─ index.js
  ├─ static
  │  └─ favicon.ico
  ├─ services
  ├─ styles
  │  └─ global.css
  └─ package.json
With babel-plugin-module-resolver, you can organize your directory structure like the following:
  ·
  ├─ config
  │  └─ default.json
  ├─ pages
  │  └─ index.js
  ├─ src
  │  ├─ components
  │  │  └─ Layout
  │  │     ├─ Layout.js
  │  │     ├─ Layout.module.css
  │  │     └─ logo.svg
  │  ├─ services
  │  └─ styles
  │     └─ global.css
  ├─ static
  │  └─ favicon.ico
  └─ package.json
Redux
Rails-style
  ·
+ ├─ actions
  ├─ components
  │  └─ Layout
  │     ├─ Layout.js
  │     ├─ Layout.module.css
  │     └─ logo.svg
  ├─ config
  │  └─ default.json
+ ├─ constants
+ ├─ containers
  ├─ pages
  │  └─ index.js
+ ├─ reducers
  ├─ static
  │  └─ favicon.ico
  ├─ services
  ├─ styles
  │  └─ global.css
  └─ package.json
Domain-style (per domain or feature)
  ·
  ├─ actions
  ├─ components
  │  └─ Layout
  │     ├─ Layout.js
  │     ├─ Layout.module.css
  │     └─ logo.svg
  ├─ config
  │  └─ default.json
  ├─ constants
  ├─ containers
+ ├─ domains
+ │  └─ flight
+ │     ├─ actions
+ │     ├─ components
+ │     ├─ constants
+ │     ├─ containers
+ │     ├─ reducers
+ │     ├─ services
+ │     └─ styles
  ├─ pages
+ │  ├─ flight
+ │  │  └─ index.js
  │  └─ index.js
  ├─ reducers
  ├─ static
+ │  ├─ flight
+ │  │  └─ airline.svg
  │  └─ favicon.ico
  ├─ services
  ├─ styles
  │  └─ global.css
  └─ package.json
Setup
Creating an App
Last modified 4yr ago