pack: change documentation directory link

docs/src/electron-how-to/main-and-renderer-process.md

@@ -0,0 +1,25 @@
+# Main vs Renderer Process
+
+A **Vutron** application is divided into code into a Main process and a Renderer process.
+
+**"Main"** is the code of `src/main` and is mainly the process code handled by Electron. **"Renderer"** is the code of `src/renderer`, mainly for front-end rendering process like Vue.
+
+In general, **NodeJS** scripts cannot be run in the renderer process. Examples include modules that contain APIs used by NodeJS, or native modules of **NodeJS** such as `path` or `net`, `os` or `crypto`.
+
+Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of NodeJS scripts in the renderer area separate and isolated for security reasons.
+
+For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via **IPC communication**.
+
+For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
+
+### How to run NodeJS on a renderer?
+
+If you want to skip the security issues and use NodeJS scripts in your renderer, you need to set `nodeIntegration` to `true` in your `vite.config.ts` file.
+
+```javascript
+rendererPlugin({
+  nodeIntegration: true
+})
+```
+
+For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer

docs/src/electron-how-to/preload-script.md

@@ -0,0 +1,20 @@
+# Preload Script
+
+The preload script in Electron.js is a secure area designed for communication between the main and renderer processes. It is typically used for **[IPC communication](https://www.electronjs.org/docs/latest/tutorial/ipc)**.
+
+For more information, see the following articles https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
+
+For compatibility and security with the latest version of Electron, we do not recommend using the old `electron/remote` module. If you want to utilize system events or Node scripts, it is recommended to do so in the main process, not the renderer.
+
+Vutron's preload script is located in the `src/preload` folder. To create a new IPC communication channel, add the channel name to the following variable to whitelist it for communication.
+
+- `mainAvailChannels`: Send an event from main to renderer. (`window.mainApi.send('channelName'')`)
+- `rendererAvailChannels`: Send an event from renderer to main. (`mainWindow.webContents.send('channelName')`)
+
+When sending events from renderer to main, you access the `window.mainApi` object instead of `ipcRenderer.send`. The `mainApi` is the name you set in your Vutron template and can be changed.
+
+Here are the supported functions for mainApi: (To change and modify this, you need to modify `exposeInMainWorld` in `src/preload/index.ts`).
+
+- `send`: Send an event to main.
+- `receive`: A listener to receive events sent by main.
+- `invoke`: Functions that can send events to main and receive data asynchronously.