This is the Delivery Portal project.
- All code is initially pushed into
devbranch from one's own custom branch - When all tests are written, pull request is made from
devtotestbranch - When all tests pass, pull request is made from
testtomasterbranch
No one commits directly to the master branch, all the code should undergo the verification and approval process. test branch
may be surpassed, if changes don't require testing.
| Command | Action |
|---|---|
yarn test or yarn t |
Runs jest --cache --passWithNoTests --runInBand |
yarn development-build or yarn db |
Runs webpack --config webpack.development.js |
yarn development-build-start or yarn dbs |
Runs node server.development.js |
yarn production-build or yarn pb |
Runs webpack --config webpack.production.js |
yarn production-start or yarn ps |
Runs node --max-old-space-size=8192 server.production.js |
yarn production-build-start or yarn pbs |
Runs webpack --config webpack.production.js && node --max-old-space-size=8192 server.production.js |
yarn eject |
Runs react-scripts eject |
One is able to run the project by simply running yarn s.
.
├───.jest ........................ (Contains Jest cache and statistics reports)
├───dist ......................... (Contains only Webpack build output)
├───node_modules ................. (The main module storage)
├───src .......................... (Contains all relevant project codebase)
│ ├───assets ................... (Contains media data)
│ │ ├───fonts ................ (Contains only font files)
│ │ ├───images ............... (Contains only image files)
│ │ └───raw.d.ts ............. (Contains binary file module declarations)
│ ├───components ............... (Contains only .tsx component files)
│ │ ├───<category sub-folders>
│ │ └───App.tsx .............. (Main project component)
│ ├───constants ................ (Contains only constant state-containing files)
│ ├───containers ............... (Contains only containers)
│ ├───hooks .................... (Contains only hooks)
│ ├───mocks .................... (Contains only mocks)
│ ├───state .................... (Contains only state-containing files)
│ ├───types .................... (Contains only reused type info)
│ │ ├───css.d.ts ............. (Contains module mapping for css files)
│ │ └───scss.d.ts ............ (Contains module mapping for scss files)
│ ├───utils .................... (Contains only utility files)
│ │ ├───serviceWorker.ts
│ │ └───setuptests.ts ........ (Jest and Enzyme pre-testing configuration script)
│ └───index.tsx ................ (Project entry point)
├───.env ......................... (Environment variable configuration)
├───.gitignore
├───app.json ..................... (Heroku app configuration)
├───azure-pipelines.yml .......... (Azure pipelines configuration)
├───babel.config.js .............. (Babel configuration script)
├───husky.config.js .............. (Husky configuration script)
├───jest.config.js ............... (Jest configuration script)
├───prettier.config.js ........... (Prettier configuration script)
├───Procfile ..................... (Heroku boot script)
├───package.json
├───README.md
├───server.development.js ........ (Express development server script)
├───server.production.js ......... (Express production server script)
├───tsconfig.json ................ (TypeScript compiler settings)
├───webpack.common.js ............ (Common Webpack configuration script for all builds)
├───webpack.development.js ....... (Webpack configuration script for development build)
├───webpack.production.js ........ (Webpack configuration script for production build)
├───yarn.lock .................... (Auto-generated by Yarn)
└───yarn-error.log ............... (Auto-generated by Yarn)Notes:
- Any folder under
srcmay be extended with__tests__folder containing tests respective to the files in the folder where__tests__resides. - Every file category should be separate, so there is consistency in the codebase
Test folder placement example:
...
├───components
│ ├───__tests__
│ │ └───App.test.tsx
│ ├───buttons
│ │ ├───__tests__
│ │ │ └───BasicButton.test.tsx
│ │ └───BasicButton.tsx
│ ...
│ ├───App.tsx
│ ...
...Any .ts/.tsx file should follow the following structure:
- Imports
- Contents
- Default exporting statement
In order to add CSS or SASS, one need to import the style file into the component and add the corresponding identifier in TSX.
Example:
/* App.tsx */
import React from "react";
import "./App.css";
const App: React.FC = (): JSX.Element => {
return <div className="test">Project template</div>;
};
export default App;/* App.css */
.test {
background-color: #b574ff77;
}- Tests should be named as the file that they are testing, but with
.test.suffix (App.tsx->App.test.tsx) - There should always be unit tests using Enzyme's shallow rendering or/and static rendering
- There optionally may be integration (or system) tests using Enzyme's full DOM rendering (be careful, and use integration tests where necessary, they can drastically slow down your test runs)
- Tests should be structured in the following order.
- Unit
- Integration
- System
Example:
/* ./src/components/App.tsx */
import React from "react";
const App: React.FC = (): JSX.Element => {
return <div>Project template</div>;
};
export default App;/* ./src/components/__tests__/App.test.tsx */
import React from "react";
import { shallow, mount } from "enzyme";
import App from "../App";
describe("'App' component", () => {
describe("Unit tests", () => {
it("Shallow renders without crashing", () => {
shallow(<App />);
});
});
describe("Integration tests", () => {
it("Mounts in a full DOM", () => {
expect(mount(<App />).find(App).length).toBe(1);
});
});
});In-file types should be declared right before their first usage. Try not to use
interface, because it is longer to write, and we are not using class-based components.
Example:
import * as React from "react";
type A = {
/* Your custom type */
};
type B {
/* Your custom type */
}
type Props = A & B;
type State = {
/* Your custom type */
};
const ComponentName: React.FC<Props, State> = (props): JSX.Element => {
return (
<SubComponentName prop={props.subComponentProp}>
Sub-component {util("here")}
</SubComponentName>
);
};
function util(s: string): string {
return s + "!";
}
export default ComponentName;- Configured by
webpack.development.js - Not-minimized
- Configured by
webpack.production.js - Minimized
- Utilizes client cache
- Optimized for initial loads
vendorpackages are minified inproductionmode- Azure pipeline timeouts in 10 minutes, in order to exceed the timeout, increase
timeoutInMinutesproperty value in theMainjob