Add SSL certificate generation and update Playwright configuration for HTTPS

Author: HexaField

.github/workflows/ci.yml

@@ -22,12 +22,15 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
-          cache: 'pnpm'
+          node-version: "22"
+          cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm install
 
+      - name: Generate SSL Certificates
+        run: pnpm run certs
+
       - name: Build 🔧
         run: pnpm run build
 

package.json

@@ -6,6 +6,7 @@
     "dev": "concurrently \"pnpm --filter @template/client dev\" \"pnpm --filter @template/server dev\"",
     "build": "pnpm -r --if-present build",
     "test": "pnpm -r test",
+    "certs": "mkdir -p .certs && openssl req -x509 -newkey rsa:2048 -keyout .certs/localhost.key -out .certs/localhost.cert -days 365 -nodes -subj \"/CN=localhost\"",
     "lint": "oxlint --fix",
     "format": "oxfmt --write",
     "check": "pnpm -r check && oxlint",

packages/client/playwright.config.ts

@@ -6,10 +6,11 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: [['list'], ['html', { open: 'never' }]],
+  reporter: process.env.CI ? 'github' : 'list',
   use: {
-    baseURL: 'http://localhost:5173',
-    trace: 'on-first-retry'
+    baseURL: 'https://localhost:3000',
+    trace: 'on-first-retry',
+    ignoreHTTPSErrors: true
   },
   projects: [
     {
@@ -19,7 +20,8 @@ export default defineConfig({
   ],
   webServer: {
     command: 'npm run dev',
-    url: 'http://localhost:5173',
-    reuseExistingServer: !process.env.CI
+    url: 'https://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    ignoreHTTPSErrors: true
   }
 })

packages/client/tests/example.spec.ts

@@ -6,7 +6,7 @@ test('has title', async ({ page }) => {
 })
 
 test('shows server message', async ({ page }) => {
-  await page.route('http://localhost:3001/health', async (route) => {
+  await page.route('https://localhost:3001/health', async (route) => {
     const json = { message: 'template', status: 'ok' }
     await route.fulfill({ json })
   })