Enable SSL for dev env

.github/DEVELOPMENT.md

@@ -27,14 +27,17 @@ Start the development environment using:
 npm start
 ```
 
+> [!NOTE]
+> You might be prompted to enter your password. It's needed to set up the local SSL certificate. [Learn More](https://nextjs.org/docs/pages/api-reference/next-cli#https-for-local-development).
+
 This command starts two services:
 
 - Quill's webpack dev server
 - Website's Next.js dev server
 
 These servers dynamically build and serve the latest copy of the source code.
 
-Access the running website at [localhost:9000](http://localhost:9000/). By default, the website will use your local Quill build, that includes all the examples in the website. This convenient setup allows for seamless development and ensures changes to Quill do not disrupt the website's content.
+Access the running website at [localhost:9000](https://localhost:9000/). By default, the website will use your local Quill build, that includes all the examples in the website. This convenient setup allows for seamless development and ensures changes to Quill do not disrupt the website's content.
 
 If you need to modify only the website's code, start the website with `npm start -w website``. This makes the website use the latest CDN version.
 
@@ -53,6 +56,6 @@ To execute the E2E tests, run:
 A standard development workflow involves:
 
 1. `npm start` - to run development services
-2. [localhost:9000/standalone/snow](http://localhost:9000/standalone/snow) - to interactively develop and test an isolated example
+2. [localhost:9000/standalone/snow](https://localhost:9000/standalone/snow) - to interactively develop and test an isolated example
 3. `npm run test:unit -w quill` - to run unit tests
 4. If everything is working, run the E2E tests

packages/quill/webpack.config.ts

@@ -33,6 +33,9 @@ export default (env: Record<string, unknown>) =>
         directory: path.resolve(__dirname, './dist'),
       },
       hot: false,
+      client: {
+        webSocketURL: `wss://localhost:${process.env.npm_package_config_ports_website}/webpack-dev-server/ws`,
+      },
       allowedHosts: 'all',
       devMiddleware: {
         stats: 'minimal',

packages/website/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 
 .next
-out
+out
+certificates

packages/website/env.js

@@ -1,7 +1,7 @@
 const { version, homepage } = require('./package.json');
 
 const cdn = process.env.NEXT_PUBLIC_LOCAL_QUILL
-  ? `http://localhost:${process.env.npm_package_config_ports_webpack}`
+  ? `https://localhost:${process.env.npm_package_config_ports_website}/webpack-dev-server`
   : `https://cdn.jsdelivr.net/npm/quill@${version}/dist`;
 
 module.exports = {

packages/website/next.config.mjs

@@ -45,4 +45,12 @@ export default withMDX()({
 
     return config;
   },
+  async rewrites() {
+    return [
+      {
+        source: '/webpack-dev-server/:path*',
+        destination: `http://localhost:${process.env.npm_package_config_ports_webpack}/:path*`,
+      },
+    ];
+  },
 });

packages/website/package.json

@@ -7,7 +7,7 @@
   "keywords": [],
   "license": "BSD-3-Clause",
   "scripts": {
-    "dev": "PORT=$npm_package_config_ports_website next dev",
+    "dev": "PORT=$npm_package_config_ports_website next dev --experimental-https",
     "start": "npm run dev",
     "build": "next build",
     "lint": "next lint",