Read the SSL-dev.md to configure your SSL

SSL-dev.md

@@ -0,0 +1,137 @@
+
+# Setting Up SSL for Local Development
+
+## Installing Chocolatey (Windows Only)
+
+### What is Chocolatey?
+Chocolatey is a package manager for Windows, making it easy to install and manage software packages via the command line.
+
+### Steps to Install Chocolatey:
+
+1. **Open PowerShell as Administrator**:
+    - Press `Windows + X` and select **Windows PowerShell (Admin)** from the menu.
+
+2. **Run the Following Command to Install Chocolatey**:
+
+   ```powershell
+   Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
+   ```
+
+3. **Verify the Installation**:
+   Once the installation is complete, you can verify Chocolatey is installed by running the following command:
+
+   ```powershell
+   choco --version
+   ```
+
+   If Chocolatey is installed correctly, it will output the current version number.
+
+### Common Chocolatey Commands
+
+- **Install a package**:
+
+  ```powershell
+  choco install <package_name>
+  ```
+
+- **Uninstall a package**:
+
+  ```powershell
+  choco uninstall <package_name>
+  ```
+
+- **Upgrade all installed packages**:
+
+  ```powershell
+  choco upgrade all
+  ```
+
+### Additional Notes
+
+- Chocolatey is required for installing `mkcert` and other software dependencies.
+- Make sure to always run PowerShell as Administrator when using Chocolatey to install or manage packages.
+
+---
+
+## Setting Up SSL for Local Development
+
+To ensure that your local development environment runs with SSL, follow these steps to generate a locally trusted SSL certificate using `mkcert`:
+
+### Requirements
+
+- Install [Node.js](https://nodejs.org) (which includes npm)
+- Install [mkcert](https://github.com/FiloSottile/mkcert)
+
+### Steps
+
+1. **Install `mkcert`**:
+    - Install `mkcert` using Chocolatey on Windows (or use an appropriate package manager for other OS).
+    - For Windows users, open PowerShell as Administrator and run:
+
+      ```powershell
+      choco install mkcert
+      ```
+
+    - For macOS users, run:
+
+      ```bash
+      brew install mkcert
+      ```
+
+2. **Install the Local Certificate Authority (CA)**:
+   After installing `mkcert`, run the following command to install the local CA:
+
+   ```bash
+   mkcert -install
+   ```
+
+   This will set up a trusted local CA to issue certificates.
+
+3. **Generate SSL Certificates**:
+   In your project root (or a preferred directory), generate the SSL certificate and key for `localhost`:
+
+   ```bash
+   mkcert localhost
+   ```
+
+   This will generate two files:
+    - `localhost.pem` (the certificate)
+    - `localhost-key.pem` (the private key)
+
+4. **Update the `vite.config.js`**:
+   Ensure your project is set up to use the generated certificate. Your `vite.config.js` should contain the following lines to enable SSL for the development server:
+
+   ```javascript
+   import { defineConfig } from 'vite';
+   import vue from '@vitejs/plugin-vue';
+   import fs from 'fs';
+   import path from 'path';
+
+   export default defineConfig({
+     plugins: [vue()],
+     server: {
+       https: {
+         key: fs.readFileSync(path.resolve(__dirname, 'path_to_your_key/localhost-key.pem')),
+         cert: fs.readFileSync(path.resolve(__dirname, 'path_to_your_cert/localhost.pem')),
+       },
+       host: 'localhost',
+     },
+   });
+   ```
+
+   Replace `path_to_your_key` and `path_to_your_cert` with the location of your generated certificate and key files.
+
+5. **Start the Development Server**:
+   Run the development server with SSL by using:
+
+   ```bash
+   npm run dev
+   ```
+
+6. **Access the Application**:
+   Open your browser and navigate to `https://localhost:3000` (or the port your Vite server is running on).
+
+### Additional Notes
+
+- If you encounter any issues related to SSL, ensure that the local CA is properly installed by running `mkcert -install` again.
+- Each developer should follow these steps to generate their own trusted SSL certificate. Avoid committing the generated `.pem` and `.key` files to version control for security reasons.

vite.config.js

@@ -2,6 +2,8 @@ import {fileURLToPath, URL} from 'node:url'
 import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import svgLoader from 'vite-svg-loader'
+import fs from 'fs';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => {
@@ -12,6 +14,13 @@ export default defineConfig(({mode}) => {
             vue(),
             svgLoader()
         ],
+        server: {
+            https: {
+                key: fs.readFileSync(path.resolve(__dirname, 'c:/git/localhost-key.pem')),
+                cert: fs.readFileSync(path.resolve(__dirname, 'c:/git/localhost.pem')),
+            },
+            host: 'localhost',
+        },
         resolve: {
             alias: {
                 '@': fileURLToPath(new URL('./src', import.meta.url))