# Module structure

## The workspace

Module workspaces should follow guidelines to make each development environment the same.

### package.json

The package.json file should contain the following scripts, jest config and have `@orchard/frontend-cli` and `@orchard/frontend-workstation` as a dependency.

```json{
    "private": true,
    "name": "frontend-my-workstation-module",
    "author": "The Orchard",
    "license": "UNLICENSED",
    "scripts": {
        "build": "frontend build",
        "start": "frontend start",
        "lint:css": "stylelint 'src/**/*.scss' --syntax scss",
        "lint:js": "eslint --ext .js,.ts,.tsx,.jsx src",
        "lint": "yarn lint:css && yarn lint:js",
        "test:unit": "jest",
        "test": "yarn lint && yarn test:unit"
    },
    "dependencies": {
        // should always use the latest versions
        "@orchard/frontend-cli": "^1.1.0",
        "@orchard/frontend-workstation": "^1.1.0",
    },
    "eslintConfig": {
        "extends": "@orchard/frontend"
    },
    "jest": {
        "preset": "@orchard/frontend-cli"
    },
    "frontend": {
        "preset": "@orchard/frontend-workstation"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}
```

### .babelrc

The babel configuration file is needed for transpiling the source code when using jest.

```json
{
    "env": {
        "test": {
            "presets": [
                ["@babel/preset-env", { "targets": { "node": "current" } }],
                "@babel/preset-react"
            ],
            "plugins": [
                "@babel/plugin-syntax-dynamic-import",
                "@babel/plugin-proposal-class-properties",
                "@babel/plugin-proposal-export-default-from"
            ]
        }
    }
}
```

## The root component

Each module must export as default a React component.

```jsx
export default class ModuleApp extends React.Component {
    render() {
        return (
            <ApolloProvider client={client}>
                <Provider store={store}>
                    <MyConnectedApp />
                </Provider>
            </ApolloProvider>
        );
    }
}
```

Functional components works as well.

```jsx
export default () => <MyApp />;
```