Jonathan Bourdon
ab911955ed
git-subtree-dir: frontend git-subtree-mainline:205a3bd14bgit-subtree-split:c070c0315d
137 lines
4.0 KiB
Markdown
137 lines
4.0 KiB
Markdown
|
|
# 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. |