Directory Structure

You are, of course, free to change the directory structure. This is a starting point. Keeping scripts separate to source is handy for hot reloading and live-updates.

This is the directory of breko hub:

$ tree -I node_modules -d
.
├── scripts
│   └── test
├── src
│   ├── app
│   │   ├── actions
│   │   ├── components
│   │   │   ├── @FlashMessages
│   │   │   ├── App
│   │   │   ├── DevTools
│   │   │   └── HeadNavigation
│   │   ├── composition
│   │   ├── reducers
│   │   ├── routes
│   │   ├── sagas
│   │   ├── selectors
│   │   └── utils
│   ├── assets
│   ├── config
│   ├── helpers
│   ├── server
│   │   ├── components
│   │   ├── middleware
│   │   ├── routes
│   │   └── utils
│   └── styles
└── test
    ├── fixtures
    │   └── assets
    ├── functional
    │   ├── client
    │   └── server
    └── stubs

./scripts has the starting points for npm run commands. The start, build and test commands live in here, each used respectively for:

npm start
npm run build
npm test

./src has the source-code for the application. Files in here are live-updated or hot-reloaded.

./src/app has your single page application, this is where the React components live. The server side render uses the files in here to generate markup and redirects.

./src/app/entry.js is the entry point for the browser app. This isn't used in the server render.

./src/config has configuration files, including the environment setup and webpack configurations.

./src/server provides the server render of your React application. The server serves your socket endpoint and API routes. Functional tests cover the logic for these files.

./src/server/routes This has routes for API endpoints.

./src/server/router.js This provides a function to connect your API routes. The router file uses dependency injection to enable live-updates.

./test has functional tests for client and server render logic and API endpoints.

./test/test.setup.js provides utilities for writing function and unit tests.

Dist/Static Folder

When running the command npm run build, create a ./src/static folder for hosting built assets. The server render uses these files in production.

The src/static folder is not tracked by version control. Configure your hosting to build these production assets on a post-publish or post-install step. Or, build the production assets in a docker image build step.

Directory Configuration

The configuration files in Breko-hub make use of the /src/config/paths.js file. This file has mappings to directories used when building and running the server.

Configure these directories here by changing the mappings.

For example, if you wish to change the location of built assets from /src/static to /dist.

export const STATIC = path.join(SRC, 'static')
// becomes
export const STATIC = path.join(ROOT, 'dist')
// NB. Remember to update the .gitignore

The STATIC const gets used throughout Breko-hub, making it easier to change the values. For example, change the TESTS directory setting here.

This won't update your directory tree... It'll update the processes depending on the test folder's location.