Folder Structure

After bootstrapping a new application, your project should look like this:

.
├── README.md
├── custom-application-config.json
├── jest.test.config.js
├── menu.json
├── package.json
├── src
│   ├── components
│   │   ├── entry-point
│   │   │   ├── entry-point.js
│   │   │   ├── entry-point.spec.js
│   │   │   └── index.js
│   │   ├── main-view
│   │   │   ├── index.js
│   │   │   ├── main-view.js
│   │   │   ├── main-view.mod.css
│   │   │   ├── main-view.spec.js
│   │   │   └── messages.js
│   │   ├── view-one
│   │   │   ├── index.js
│   │   │   ├── messages.js
│   │   │   └── view-one.js
│   │   └── view-two
│   │       ├── index.js
│   │       ├── messages.js
│   │       └── view-two.js
│   ├── i18n
│   │   ├── data
│   │   │   ├── core.json
│   │   │   ├── de.json
│   │   │   ├── en.json
│   │   │   └── es.json
│   │   └── index.js
│   ├── index.js
│   ├── load-messages.js
│   └── routes.js
└── yarn.lock

• src/: Directory containing all the JavaScript files (for example React components) for the application. More specifically, it should include the following:
  • src/index.js: The application entry point. Contains the import statements to render the React application. The path to this file is also defined in the webpack.config.<env>.js as the entryPoint.
  • src/routes.js: Defines the sub routes and components rendered by the application. The main route is defined in the <EntryPoint> component and is loaded asynchronously using Code-Splitting.
  • src/load-messages.js: See Translations.
  • src/i18n: Contains the translations from the Intl messages.
  • src/components/entry-point: Contains the <EntryPoint> component which must:
    • Use the <ApplicationShell> component to load the core logic of the application (including layout elements like the left hand and top navigation).
    • Define a <Route> component to handle requests matching the main application route path.
• custom-application-config.json: See Application config
• webpack.config.<env>.js: Contains the setup for getting the webpack configurations for development and production.
• jest.test.config.js: Contains configurations for running tests using a Jest runner.
• dist/: Contains the production bundles (created once you run yarn build).
• package.json: Contains the dependencies to work on the project and npm scripts to perform important tasks (for example yarn test, yarn start, yarn build, yarn compile-html, etc.).