DEVREL-991 Add commands for running https proxy for use in web spotlight

README.md

@@ -60,8 +60,18 @@ yarn create next-app --example https://github.com/kontent-ai/sample-app-next-js
     ```
 
 🎉 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-> If you want to use your app inside [web spotlight](https://kontent.ai/features/webspotlight/), you will need to run the project under the `https` scheme.
-> To do that you can use a proxy like [Ngrok](https://ngrok.com/) or [write you own server](https://github.com/vercel/next.js/tree/canary/examples/custom-server).
+
+#### Running the app in web spotlight
+If you want to use your app inside [web spotlight](https://kontent.ai/features/webspotlight/), you will need to run the app under the `https` scheme.
+
+To run the app under the `https` scheme you can use one of the following methods:
+* Run `npm run https:dev` to run the app in the development mode and a proxy server proxying `https://localhost:3001` to `http://localhost:3000`. 
+  * The proxy will use a self-signed certificate which might not work in some browsers.
+  * The proxy is run using the [`local-ssl-proxy`](https://www.npmjs.com/package/local-ssl-proxy) package.
+* Run `npm run https:proxy` to create a proxy as above without running the app (you are expected to run the app separately).
+  * You can use this command with a custom trusted certificate like this `npm run https:proxy -- --key localhost-key.pem --cert localhost.pem`. See [the package documentation](https://github.com/cameronhunter/local-ssl-proxy#run-ssl-proxy-with-a-self-signed-trusted-certificate) for more details
+* [Write you own server](https://github.com/vercel/next.js/tree/canary/examples/custom-server).
+* Use [Ngrok](https://ngrok.com/) or something similar.
 
 You can start editing the page by modifying `pages/[envId]/index.tsx`. The page auto-updates as you edit the file.
 

package.json

@@ -9,6 +9,8 @@
     "build": "next build",
     "export": "next export",
     "start": "next start",
+    "https:dev": "concurrently -n dev,proxy \"npm run dev\" \"local-ssl-proxy --source 3001 --target 3000\"",
+    "https:proxy": "local-ssl-proxy --source 3001 --target 3000",
     "test": "jest"
   },
   "dependencies": {
@@ -38,10 +40,12 @@
     "@types/react": "^18.0.24",
     "autoprefixer": "^10.4.14",
     "babel-jest": "^29.6.2",
+    "concurrently": "^8.2.1",
     "dotenv": "^16.0.3",
     "eslint": "^8.26.0",
     "eslint-config-next": "^13.0.0",
     "jest": "^29.6.2",
+    "local-ssl-proxy": "^2.0.5",
     "postcss": "^8.4.22",
     "rimraf": "^5.0.0",
     "tailwindcss": "^3.3.1",