social-media/frontend/SSL-dev.md

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:

   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:

   choco --version
   

   If Chocolatey is installed correctly, it will output the current version number.

Common Chocolatey Commands

• Install a package:

  choco install <package_name>
  

• Uninstall a package:

  choco uninstall <package_name>
  

• Upgrade all installed packages:

  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 (which includes npm)
• Install 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:

     choco install mkcert
     

   • For macOS users, run:

     brew install mkcert
     

2. Install the Local Certificate Authority (CA): After installing mkcert, run the following command to install the local CA:

   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:

   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:

   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:

   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.