New section - Project folders & files

- Replaced section `Folder structure` with `Project folders & files`.

Author: iamWing

README.md

@@ -89,30 +89,119 @@ To package your Electron app, run `npm run prod` to get your code compiled in
   uses Webpack to minify your code in `production` builds, so there shouldn't
   be any significant performance different with `asar` archiving disabled.
 
-## Folder structure
-```
-electron-react-typescript-base-proj/
-| - dist/               //- Generated by Webpack automatically
-| - node_modules/
-| - out/                //- Generated by build script automatically
-| - public/             //- Global static assets
-| | - index.html
-| | - style.css
-| - src/
-| | - main/             //- Backend modules for the Electron app
-| | | - main.ts         //- Entry point of 'electron-main'
-| | - models/
-| | - renderer/         //- Frontend React components for the Electron app
-| | | - renderer.tsx    //- Entry point of 'electron-renderer'
-| | - utils/            //- Common utilities
-| - test/               //- Unit tests
-| - .eslintrc           //- ESLint config
-| - .gitignore
-| - package-lock.json
-| - package.json
-| - tsconfig.json       //- TypeScript config
-| - webpack.config.js   //- Webpack config
-```
+## Project folders & files
+- `dist/` - [Webpack] output location
+
+  __Contents will be flushed automatically on execution of `npm run <dev|prod>`
+  script.__
+
+- `out/` - [`electron-builder`] output location
+
+- `public/` - Global static assets.
+  - `index.html` - Template for `HTML Webpack Plugin`
+
+    Update the value of `<title>` tag to change the default window title.
+
+  - `style.css` - `CSS` file location sample
+
+    Not much defined in this file. You can either put your `CSS` settings here
+    or use any other tools you prefer.
+
+- `src/` - Folder for all your source code
+  - `main/` - For modules which run on the `main` process.
+    - `main.ts` - [Electron] `main` process entry point
+
+  - `preload` - Preload scripts go here
+    - `ipc-api.ts` - APIs for IPC between `main` & `renderer`
+
+      Consider convert this module into a collection of submodules if you have
+      many APIs for IPC. See example as below:
+      ```ts
+      // ipc-api/index.ts
+      import submoduleA from './submodule-a';
+      import submoduleB from './submodule-b';
+
+      export default { ...submoduleA, ...submoduleB };
+
+      // ipc-api/submodule-a.ts 
+      import { ipcRenderer } from 'electron';
+
+      function a { ipcRenderer.send('a'); }
+
+      export default { a };
+
+      // ipc-api/submodule-b.ts
+      import { ipcRenderer } from 'electron';
+
+      function b { ipcRenderer.send('b'); }
+
+      export default { b };
+      ```
+
+    - `preload.ts` - [Electron] preload script entry point
+
+      There should be no need to modify this file unless you want to use other
+      key(s) for your IPC APIs. By default, all APIs defined in `ipc-api`
+      module are exposed under key `ipcApi` in `contextBridge`.
+
+  - `renderer/` - Where the frontend scripts stay
+    - `App.tsx` - Root [React] component
+    - `renderer.tsx` - [Electron] `renderer` process entry point
+
+      *`public/style.css` imported here. Change it if you want.*
+
+  - `types/` - Home for self-defined `.d.ts` files
+    - `global.d.ts` - Extends global scope interfaces
+
+      This file includes ambient declaration for calling the IPC APIs defined in
+      `preload/ipc-api` from the `renderer`. Remember __NOT__ to remove this
+      part, otherwise TypeScript will tell you `type not exist`. However, if
+      you've opted to use a different key other than `ipcAPI` in the preload
+      script, __DO__ remember to update this file to match your own settings.
+
+  - `utils/` - Place to store the helper scripts
+    - `node-env.ts` - Shortcut to determine `NODE` environment
+
+- `tests/` - Unit testing files location
+  
+  To avoid test files mixing up with the source code, [Jest] is configured to
+  look for test file(s) within this folder only.
+  
+  File name of the test files can either be `[filename].test.tsx` or
+  `[filename].spec.ts(x)`. `js(x)` can also be used for test files, but I assume
+  you'd use TypeScript if you're using this boilerplate.
+
+  - `main/main.spec.ts` - Sample test file for `src/main/main`
+  - `tsconfig.json` - TypeScript config file for `tests` module
+- `.eslintignore` - [ESLint] ignore file
+- `.eslintrc` - [ESLint] config file
+
+  Configured to use Airbnb's rules with [TypeScript] supported, and rules for
+  [Jest] applied.
+
+- `.gitignore` - Git ignore file
+- `CHANGELOG.md` - Change log of this boilerplate
+- `jest.config.js` - [Jest] config file
+- `LICENSE` - MIT license
+- `package-lock.json`
+- `package.json`
+
+  Includes basic build config for `electron-builder`. It's likely that you'll
+  have to personalise the build config when it comes to the time you're about
+  to release your app. Please read [`electron-builder`'s document] for the
+  build config setup guides.
+
+- `README.md`
+- `tsconfig.json` - [TypeScript] config file
+
+  Module path aliases are configured here. [Jest] & [Webpack] will pick up the
+  alias settings here to config their own. No need to manually config in Jest
+  & Webpack again.
+
+- `webpack.config.json` - [Webpack] config file
+
+  Includes configurations targetting `electron-main`, `electron-preload`, and
+  `electron-renderer` respectively.
 
 ## Author
 [Wing Chau](https://github.com/iamWing) [@Devtography](https://github.com/Devtography)