web: add Local Development section to the web_app.md (#19683)

client/web/gulpfile.js

@@ -107,18 +107,29 @@ async function webpackDevelopmentServer() {
   })
 }
 
+// Ensure the typings that TypeScript depends on are build to avoid first-time-run errors
+const codeGen = gulp.parallel(schema, graphQlOperations, graphQlSchema)
+
+// Watches code generation only, rebuilds on file changes
+const watchCodeGen = gulp.parallel(watchSchema, watchGraphQlSchema, watchGraphQlOperations)
+
 /**
  * Builds everything.
  */
-const build = gulp.series(gulp.parallel(schema, graphQlOperations, graphQlSchema), webpack)
+const build = gulp.series(codeGen, webpack)
 
 /**
- * Starts a development server, watches everything and rebuilds on file changes.
+ * Starts a development server without initial code generation, watches everything and rebuilds on file changes.
+ */
+const developmentWithoutInitialCodeGen = gulp.parallel(watchCodeGen, webpackDevelopmentServer)
+
+/**
+ * Runs code generation first, then starts a development server, watches everything and rebuilds on file changes.
  */
 const development = gulp.series(
   // Ensure the typings that TypeScript depends on are build to avoid first-time-run errors
-  gulp.parallel(schema, graphQlOperations, graphQlSchema),
-  gulp.parallel(watchSchema, watchGraphQlSchema, watchGraphQlOperations, webpackDevelopmentServer)
+  codeGen,
+  developmentWithoutInitialCodeGen
 )
 
 /**
@@ -127,14 +138,15 @@ const development = gulp.series(
  */
 const watch = gulp.series(
   // Ensure the typings that TypeScript depends on are build to avoid first-time-run errors
-  gulp.parallel(schema, graphQlOperations, graphQlSchema),
-  gulp.parallel(watchSchema, watchGraphQlSchema, watchGraphQlOperations, watchWebpack)
+  codeGen,
+  gulp.parallel(watchCodeGen, watchWebpack)
 )
 
 module.exports = {
   build,
   watch,
   dev: development,
+  unsafeDev: developmentWithoutInitialCodeGen,
   webpackDevServer: webpackDevelopmentServer,
   webpack,
   watchWebpack,

client/web/package.json

@@ -6,21 +6,25 @@
   "license": "Apache-2.0",
   "scripts": {
     "test": "jest --testPathIgnorePatterns end-to-end --testPathIgnorePatterns regression integration",
-    "test:regression": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha './src/regression/**/*.test.ts' --exit",
-    "test:regression:codeintel": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/codeintel.test.ts",
-    "test:regression:config-settings": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/config-settings.test.ts",
-    "test:regression:core": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/core.test.ts",
-    "test:regression:init": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/init.test.ts",
-    "test:regression:integrations": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/integrations.test.ts",
-    "test:regression:onboarding": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/onboarding.test.ts",
-    "test:regression:search": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha ./src/regression/search.test.ts",
-    "test-e2e-sgdev": "env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' SOURCEGRAPH_BASE_URL=https://sourcegraph.sgdev.org OVERRIDE_AUTH_SECRET=${SGDEV_OVERRIDE_AUTH_SECRET} mocha ./end-to-end/end-to-end.test.ts",
+    "task:mocha": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha",
+    "test:regression": "yarn task:mocha './src/regression/**/*.test.ts' --exit",
+    "test:regression:codeintel": "yarn task:mocha ./src/regression/codeintel.test.ts",
+    "test:regression:config-settings": "yarn task:mocha ./src/regression/config-settings.test.ts",
+    "test:regression:core": "yarn task:mocha ./src/regression/core.test.ts",
+    "test:regression:init": "yarn task:mocha ./src/regression/init.test.ts",
+    "test:regression:integrations": "yarn task:mocha ./src/regression/integrations.test.ts",
+    "test:regression:onboarding": "yarn task:mocha ./src/regression/onboarding.test.ts",
+    "test:regression:search": "yarn task:mocha ./src/regression/search.test.ts",
+    "test-e2e-sgdev": "cross-env SOURCEGRAPH_BASE_URL=https://sourcegraph.sgdev.org OVERRIDE_AUTH_SECRET=${SGDEV_OVERRIDE_AUTH_SECRET} yarn task:mocha ./src/end-to-end/end-to-end.test.ts",
     "serve:dev": "ts-node-transpile-only --project ./dev/tsconfig.json ./dev/server/development.server.ts",
     "serve:prod": "ts-node-transpile-only --project ./dev/tsconfig.json ./dev/server/production.server.ts",
-    "build": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" gulp build",
-    "watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" gulp watch",
-    "watch-webpack": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" gulp watchWebpack",
-    "webpack": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" gulp webpack",
+    "task:gulp": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" gulp",
+    "dev": "yarn task:gulp dev",
+    "unsafeDev": "yarn task:gulp unsafeDev",
+    "build": "yarn task:gulp build",
+    "watch": "yarn task:gulp watch",
+    "watch-webpack": "yarn task:gulp watchWebpack",
+    "webpack": "yarn task:gulp webpack",
     "lint": "yarn run eslint && gulp unusedExports && yarn run stylelint",
     "eslint": "eslint --cache '**/*.[tj]s?(x)'",
     "stylelint": "stylelint 'src/**/*.scss' --quiet",

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

@@ -89,3 +89,39 @@ You can run unit tests via `yarn test` (to run all) or `yarn test --watch` (to r
 ### E2E tests
 
 See [testing.md](../../how-to/testing.md).
+
+### Local development
+
+Basic commands for local development can be found [here](../../getting-started/quickstart_6_start_server.md).
+Commands specifically useful for the web team can be found in the root [package.json](https://github.com/sourcegraph/sourcegraph/blob/main/package.json).
+Also, check out the web app [README](https://github.com/sourcegraph/sourcegraph/blob/main/client/web/README.md).
+
+1. Regenerate GraphQL schema, Typescript types for GraphQL operations, and start a development server for the web app.
+
+   ```sh
+   yarn dev-web
+   ```
+
+2. Same as the previous one, but skip initial code generation task.
+
+   ```sh
+   yarn unsafeDev-web
+   ```
+
+3. Start all backend services and the frontend server with enterprise functionality.
+
+   ```sh
+   ./enterprise/dev/start.sh
+   ```
+
+4. Start the web server only 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
+  ```
+
+  For enterprise version:
+
+  ```sh
+  sg run enterprise-web-standalone
+  ```

sg.config.yaml

@@ -194,12 +194,14 @@ commands:
 
   web-standalone:
     cmd: yarn workspace @sourcegraph/web serve:dev
+    install: yarn --no-progress
     env:
       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