Standalone dev server: Use HTTPS (#25900)

client/web/README.md

@@ -4,6 +4,8 @@
 
 Use `sg` CLI tool to configure and start local development server. For more information checkout `sg` [README](../../dev/sg/README.md).
 
+Our local development server runs by starting both a [Caddy](https://caddyserver.com/) HTTPS server and a Node HTTP server. We then can reverse proxy requests to the Node server to serve client assets under HTTPS.
+
 ### Configuration
 
 Environment variables important for the web server:
@@ -16,28 +18,30 @@ It's possible to overwrite these variables by creating `sg.config.overwrite.yaml
 ### Development server
 
 ```sh
-sg run web-standalone
+sg start web-standalone
 ```
 
-For enterprise version:
+For open-source version:
 
 ```sh
-sg run enterprise-web-standalone
+sg start oss-web-standalone
 ```
 
 ### Production server
 
 ```sh
-sg run web-standalone-prod
+sg start web-standalone-prod
 ```
 
-For enterprise version:
+For open-source version:
 
 ```sh
-sg run enterprise-web-standalone-prod
+sg start oss-web-standalone-prod
 ```
 
-Web app should be available at `http://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}` (note the `http` not `https`). Build artifacts will be served from `<rootRepoPath>/ui/assets`.
+Web app should be available at `https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}`. Build artifacts will be served from `<rootRepoPath>/ui/assets`.
+
+Note: If you are unable to use the above commands (e.g. you can't install Caddy), you can use `sg run web-standalone` instead. This will start a development server using only Node, and will be available at `http://localhost:${CLIENT_PROXY_DEVELOPMENT_PORT}`.
 
 ### API proxy
 

client/web/dev/server/development.server.ts

@@ -17,7 +17,8 @@ import {
     shouldCompressResponse,
     STATIC_ASSETS_PATH,
     STATIC_ASSETS_URL,
-    WEB_SERVER_URL,
+    HTTPS_WEB_SERVER_URL,
+    HTTP_WEB_SERVER_URL,
     PROXY_ROUTES,
 } from '../utils'
 import { getHTMLPage } from '../webpack/get-html-webpack-plugins'
@@ -25,7 +26,12 @@ import { getHTMLPage } from '../webpack/get-html-webpack-plugins'
 // TODO: migrate webpack.config.js to TS to use `import` in this file.
 // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
 const webpackConfig = require('../../webpack.config') as Configuration
-const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTPS_PORT, IS_HOT_RELOAD_ENABLED } = environmentConfig
+const {
+    SOURCEGRAPH_API_URL,
+    SOURCEGRAPH_HTTPS_PORT,
+    CLIENT_PROXY_DEVELOPMENT_PORT,
+    IS_HOT_RELOAD_ENABLED,
+} = environmentConfig
 
 interface DevelopmentServerInit {
     proxyRoutes: string[]
@@ -81,14 +87,18 @@ async function startWebpackDevelopmentServer({
         liveReload: false,
         allowedHosts: 'all',
         hot: IS_HOT_RELOAD_ENABLED,
-        // TODO: resolve https://github.com/webpack/webpack-dev-server/issues/2313 and enable HTTPS.
-        https: false,
         historyApiFallback: {
             disableDotRule: true,
         },
-        port: SOURCEGRAPH_HTTPS_PORT,
+        port: CLIENT_PROXY_DEVELOPMENT_PORT,
         client: {
             overlay: false,
+            webSocketTransport: 'ws',
+            logging: 'verbose',
+            webSocketURL: {
+                port: SOURCEGRAPH_HTTPS_PORT,
+                protocol: 'wss',
+            },
         },
         static: {
             directory: STATIC_ASSETS_PATH,
@@ -115,7 +125,8 @@ async function startWebpackDevelopmentServer({
     )
 
     await server.start()
-    signale.success(`Development server is ready at ${chalk.blue.bold(WEB_SERVER_URL)}`)
+    signale.info(`Development HTTP server is ready at ${chalk.blue.bold(HTTP_WEB_SERVER_URL)}`)
+    signale.success(`Development HTTPS server is ready at ${chalk.blue.bold(HTTPS_WEB_SERVER_URL)}`)
     signale.await('Waiting for Webpack to compile assets')
 }
 

client/web/dev/server/production.server.ts

@@ -13,11 +13,12 @@ import {
     getCSRFTokenAndCookie,
     STATIC_ASSETS_PATH,
     STATIC_INDEX_PATH,
-    WEB_SERVER_URL,
+    HTTP_WEB_SERVER_URL,
+    HTTPS_WEB_SERVER_URL,
     shouldCompressResponse,
 } from '../utils'
 
-const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTPS_PORT } = environmentConfig
+const { SOURCEGRAPH_API_URL, CLIENT_PROXY_DEVELOPMENT_PORT } = environmentConfig
 
 async function startProductionServer(): Promise<void> {
     if (!SOURCEGRAPH_API_URL) {
@@ -55,8 +56,9 @@ async function startProductionServer(): Promise<void> {
     // Redirect remaining routes to index.html
     app.get('/*', (_request, response) => response.sendFile(STATIC_INDEX_PATH))
 
-    app.listen(SOURCEGRAPH_HTTPS_PORT, () => {
-        signale.success(`Production server is ready at ${chalk.blue.bold(WEB_SERVER_URL)}`)
+    app.listen(CLIENT_PROXY_DEVELOPMENT_PORT, () => {
+        signale.info(`Production HTTP server is ready at ${chalk.blue.bold(HTTP_WEB_SERVER_URL)}`)
+        signale.success(`Production HTTPS server is ready at ${chalk.blue.bold(HTTPS_WEB_SERVER_URL)}`)
     })
 }
 

client/web/dev/utils/environment-config.ts

@@ -9,6 +9,7 @@ export const environmentConfig = {
     SOURCEGRAPH_API_URL: process.env.SOURCEGRAPH_API_URL,
     SOURCEGRAPH_HTTPS_DOMAIN: process.env.SOURCEGRAPH_HTTPS_DOMAIN || 'sourcegraph.test',
     SOURCEGRAPH_HTTPS_PORT: Number(process.env.SOURCEGRAPH_HTTPS_PORT) || 3443,
+    CLIENT_PROXY_DEVELOPMENT_PORT: Number(process.env.CLIENT_PROXY_DEVELOPMENT_PORT) || 3080,
     WEBPACK_SERVE_INDEX: process.env.WEBPACK_SERVE_INDEX === 'true',
     SITE_CONFIG_PATH: process.env.SITE_CONFIG_PATH || DEFAULT_SITE_CONFIG_PATH,
     ENTERPRISE: Boolean(process.env.ENTERPRISE),
@@ -22,6 +23,7 @@ export const environmentConfig = {
     IS_HOT_RELOAD_ENABLED: process.env.NO_HOT !== 'true',
 }
 
-const { SOURCEGRAPH_HTTPS_PORT, SOURCEGRAPH_HTTPS_DOMAIN } = environmentConfig
+const { SOURCEGRAPH_HTTPS_PORT, SOURCEGRAPH_HTTPS_DOMAIN, CLIENT_PROXY_DEVELOPMENT_PORT } = environmentConfig
 
-export const WEB_SERVER_URL = `http://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}`
+export const HTTPS_WEB_SERVER_URL = `https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}`
+export const HTTP_WEB_SERVER_URL = `http://localhost:${CLIENT_PROXY_DEVELOPMENT_PORT}`

doc/dev/background-information/web/web_app.md

@@ -19,13 +19,13 @@ To install it, [see the instructions](../../getting-started/quickstart_3_install
 1. Start the web server and point it to any deployed API instance. See more info in the web app [README](https://github.com/sourcegraph/sourcegraph/blob/main/client/web/README.md).
 
     ```sh
-    sg run web-standalone
+    sg start web-standalone
     ```
 
-    For the enterprise version:
+    For the open-source version:
 
     ```sh
-    sg run enterprise-web-standalone
+    sg start oss-web-standalone
     ```
 
 2. Start all backend services with the frontend server.

sg.config.yaml

@@ -333,14 +333,6 @@ commands:
       WEBPACK_SERVE_INDEX: true
       SOURCEGRAPH_API_URL: https://k8s.sgdev.org
 
-  enterprise-web-standalone:
-    cmd: yarn workspace @sourcegraph/web serve:dev
-    install: yarn --no-progress
-    env:
-      ENTERPRISE: 1
-      WEBPACK_SERVE_INDEX: true
-      SOURCEGRAPH_API_URL: https://k8s.sgdev.org
-
   web-standalone-prod:
     cmd: yarn workspace @sourcegraph/web serve:prod
     install: yarn workspace @sourcegraph/web run build
@@ -349,15 +341,6 @@ commands:
       WEBPACK_SERVE_INDEX: true
       SOURCEGRAPH_API_URL: https://k8s.sgdev.org
 
-  enterprise-web-standalone-prod:
-    cmd: yarn workspace @sourcegraph/web serve:prod
-    install: yarn workspace @sourcegraph/web run build
-    env:
-      ENTERPRISE: 1
-      NODE_ENV: production
-      WEBPACK_SERVE_INDEX: true
-      SOURCEGRAPH_API_URL: https://k8s.sgdev.org
-
   docsite:
     cmd: .bin/docsite_${DOCSITE_VERSION} -config doc/docsite.json serve -http=localhost:5080
     install: |
@@ -913,6 +896,30 @@ commandsets:
       - enterprise-web
       - caddy
 
+  web-standalone:
+    commands:
+      - web-standalone
+      - caddy
+    env:
+      ENTERPRISE: 1
+
+  oss-web-standalone:
+    commands:
+      - web-standalone
+      - caddy
+
+  web-standalone-prod:
+    commands:
+      - web-standalone-prod
+      - caddy
+    env:
+      ENTERPRISE: 1
+
+  oss-web-standalone-prod:
+    commands:
+      - web-standalone-prod
+      - caddy
+
 tests:
   # These can be run with `sg test [name]`
   backend: