diff --git a/SSL-dev.md b/SSL-dev.md new file mode 100644 index 0000000..ef8f29f --- /dev/null +++ b/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 + ``` + +- **Uninstall a package**: + + ```powershell + choco uninstall + ``` + +- **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. \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 6ab7268..7541861 100644 --- a/vite.config.js +++ b/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))