mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:11:49 +00:00
name client/web entrypoint bundles after their entrypoint, not a custom name (#57292)
This removes another source of "names" and also makes it so that client/web can be built by esbuild via Bazel in the future (which does not support renaming entrypoints).
This commit is contained in:
Quinn Slack
GitHub
parent
46bcd43df4
commit
3a9aff1472
@ -1,4 +1,4 @@
|
||||
import { listen, Event } from '@tauri-apps/api/event'
|
||||
import { listen, type Event } from '@tauri-apps/api/event'
|
||||
import { invoke } from '@tauri-apps/api/tauri'
|
||||
|
||||
import { logger } from '@sourcegraph/common'
|
||||
@ -8,7 +8,7 @@ import { logger } from '@sourcegraph/common'
|
||||
// * app-shell.tsx: before the Go backend has started, this is served. If the Go backend crashes,
|
||||
// then the Tauri Rust application can bring the user back here to present debugging/error handling
|
||||
// options.
|
||||
// * app-main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else.
|
||||
// * app/main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else.
|
||||
|
||||
function addRedirectParamToSignInUrl(url: string, returnTo: string): string {
|
||||
const urlObject = new URL(url)
|
||||
|
||||
@ -7,6 +7,8 @@ import postcss from 'postcss'
|
||||
import postcssModules from 'postcss-modules'
|
||||
import sass from 'sass'
|
||||
|
||||
// eslint-disable import/extensions
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
import postcssConfig from '../../../../postcss.config'
|
||||
|
||||
@ -59,9 +59,9 @@ ts_project(
|
||||
jest_test(
|
||||
name = "test",
|
||||
data = [
|
||||
"src/webBundleSize/__mocks__/assets/scripts/app.bundle.js",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.br",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.gz",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/main.js",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/main.js.br",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/main.js.gz",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/sg_home.js",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/sg_home.js.br",
|
||||
"src/webBundleSize/__mocks__/assets/scripts/sg_home.js.gz",
|
||||
|
||||
@ -24,8 +24,8 @@ jest.mock(
|
||||
jest.mock(
|
||||
'webpack.manifest.json',
|
||||
() => ({
|
||||
'app.js': '/.assets/scripts/app.bundle.js',
|
||||
'app.css': '/.assets/styles/app.123.bundle.css',
|
||||
'main.js': '/.assets/scripts/main.js',
|
||||
'main.css': '/.assets/styles/main.css',
|
||||
}),
|
||||
{ virtual: true }
|
||||
)
|
||||
@ -39,7 +39,7 @@ describe('getBundleSizeStats', () => {
|
||||
})
|
||||
|
||||
expect(stats).toEqual({
|
||||
'scripts/app.bundle.js': {
|
||||
'scripts/main.js': {
|
||||
raw: 15,
|
||||
gzip: 6,
|
||||
brotli: 4,
|
||||
@ -59,7 +59,7 @@ describe('getBundleSizeStats', () => {
|
||||
isJs: true,
|
||||
raw: 15,
|
||||
},
|
||||
'styles/app.123.bundle.css': {
|
||||
'styles/main.css': {
|
||||
raw: 25,
|
||||
gzip: 6,
|
||||
brotli: 4,
|
||||
|
||||
@ -398,10 +398,10 @@ ts_project(
|
||||
"src/devsettings/settings/eventLoggingDebug.tsx",
|
||||
"src/devsettings/utils.ts",
|
||||
"src/enterprise/EnterpriseWebApp.tsx",
|
||||
"src/enterprise/app-main.tsx",
|
||||
"src/enterprise/app/AppAuthCallbackPage.tsx",
|
||||
"src/enterprise/app/components/index.ts",
|
||||
"src/enterprise/app/components/zero-states/AppZeroStates.tsx",
|
||||
"src/enterprise/app/main.tsx",
|
||||
"src/enterprise/app/routes.tsx",
|
||||
"src/enterprise/app/settings/AppSettingsArea.tsx",
|
||||
"src/enterprise/app/settings/about/AboutPage.tsx",
|
||||
@ -2126,7 +2126,7 @@ BUNDLE_DATA_DEPS = [
|
||||
"//:package_json",
|
||||
],
|
||||
entry_points = {
|
||||
"src/enterprise/main.js": "app",
|
||||
"src/enterprise/main.js": "main",
|
||||
"src/enterprise/embed/main.js": "embed",
|
||||
},
|
||||
env = {
|
||||
@ -2156,7 +2156,7 @@ webpack_web_app(
|
||||
"//:package_json",
|
||||
],
|
||||
entry_points = {
|
||||
"src/enterprise/main.js": "app",
|
||||
"src/enterprise/main.js": "main",
|
||||
},
|
||||
env = {
|
||||
"NODE_ENV": "production",
|
||||
|
||||
@ -15,7 +15,7 @@ const config = {
|
||||
* Our main entry JavaScript bundles, contains core logic that is loaded on every page.
|
||||
*/
|
||||
{
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/app.*.bundle.js.br'),
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/main.*.js.br'),
|
||||
/**
|
||||
* Note: Temporary increase from 400kb.
|
||||
* Primary cause is due to multiple ongoing migrations that mean we are duplicating similar dependencies.
|
||||
@ -25,17 +25,17 @@ const config = {
|
||||
compression: 'none',
|
||||
},
|
||||
{
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/embed.*.bundle.js.br'),
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/embed.*.js.br'),
|
||||
maxSize: '155kb',
|
||||
compression: 'none',
|
||||
},
|
||||
{
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/react.*.bundle.js.br'),
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/react.*.js.br'),
|
||||
maxSize: '45kb',
|
||||
compression: 'none',
|
||||
},
|
||||
{
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/opentelemetry.*.bundle.js.br'),
|
||||
path: path.join(STATIC_ASSETS_PATH, 'scripts/opentelemetry.*.js.br'),
|
||||
maxSize: '40kb',
|
||||
compression: 'none',
|
||||
},
|
||||
@ -68,7 +68,7 @@ const config = {
|
||||
* Our main entry CSS bundle, contains core styles that are loaded on every page.
|
||||
*/
|
||||
{
|
||||
path: path.join(STATIC_ASSETS_PATH, 'styles/app.*.css.br'),
|
||||
path: path.join(STATIC_ASSETS_PATH, 'styles/main.*.css.br'),
|
||||
maxSize: '50kb',
|
||||
compression: 'none',
|
||||
},
|
||||
@ -81,7 +81,7 @@ const config = {
|
||||
compression: 'none',
|
||||
},
|
||||
{
|
||||
path: path.join(STATIC_ASSETS_PATH, 'styles/!(app|embed).*.css.br'),
|
||||
path: path.join(STATIC_ASSETS_PATH, 'styles/!(main|embed).*.css.br'),
|
||||
maxSize: '25kb',
|
||||
compression: 'none',
|
||||
},
|
||||
|
||||
@ -25,11 +25,11 @@ const isCodyApp = ENVIRONMENT_CONFIG.CODY_APP
|
||||
const omitSlowDeps = ENVIRONMENT_CONFIG.DEV_WEB_BUILDER_OMIT_SLOW_DEPS
|
||||
|
||||
export const BUILD_OPTIONS: esbuild.BuildOptions = {
|
||||
entryPoints: {
|
||||
'scripts/app': isCodyApp
|
||||
? path.join(ROOT_PATH, 'client/web/src/enterprise/app-main.tsx')
|
||||
entryPoints: [
|
||||
isCodyApp
|
||||
? path.join(ROOT_PATH, 'client/web/src/enterprise/app/main.tsx')
|
||||
: path.join(ROOT_PATH, 'client/web/src/enterprise/main.tsx'),
|
||||
},
|
||||
],
|
||||
bundle: true,
|
||||
minify: IS_PRODUCTION,
|
||||
format: 'esm',
|
||||
@ -38,7 +38,7 @@ export const BUILD_OPTIONS: esbuild.BuildOptions = {
|
||||
jsxDev: IS_DEVELOPMENT,
|
||||
splitting: true,
|
||||
chunkNames: 'chunks/chunk-[name]-[hash]',
|
||||
entryNames: IS_PRODUCTION ? 'scripts/[name]-[hash]' : undefined,
|
||||
entryNames: IS_PRODUCTION ? 'scripts/[name]-[hash]' : 'scripts/[name]',
|
||||
outdir: STATIC_ASSETS_PATH,
|
||||
plugins: [
|
||||
stylePlugin,
|
||||
|
||||
@ -10,8 +10,8 @@ import { type WebpackManifest, WEBPACK_MANIFEST_PATH } from '../utils'
|
||||
export const assetPathPrefix = '/.assets'
|
||||
|
||||
export const getManifest = (jsEntrypoint?: string, cssEntrypoint?: string): WebpackManifest => ({
|
||||
'app.js': path.join(assetPathPrefix, jsEntrypoint ?? 'scripts/app.js'),
|
||||
'app.css': path.join(assetPathPrefix, cssEntrypoint ?? 'scripts/app.css'),
|
||||
'main.js': path.join(assetPathPrefix, jsEntrypoint ?? 'scripts/main.js'),
|
||||
'main.css': path.join(assetPathPrefix, cssEntrypoint ?? 'scripts/main.css'),
|
||||
isModule: true,
|
||||
})
|
||||
|
||||
@ -19,8 +19,6 @@ const writeManifest = async (manifest: WebpackManifest): Promise<void> => {
|
||||
await fs.promises.writeFile(WEBPACK_MANIFEST_PATH, JSON.stringify(manifest, null, 2))
|
||||
}
|
||||
|
||||
const ENTRYPOINT_NAME = 'scripts/app'
|
||||
|
||||
/**
|
||||
* An esbuild plugin to write a webpack.manifest.json file (just as Webpack does), for compatibility
|
||||
* with our current Webpack build.
|
||||
@ -39,12 +37,12 @@ export const manifestPlugin: esbuild.Plugin = {
|
||||
console.error('[manifestPlugin] No entrypoints found')
|
||||
return
|
||||
}
|
||||
const absoluteEntrypoint: string | undefined = (entryPoints as any)[ENTRYPOINT_NAME]
|
||||
if (!absoluteEntrypoint) {
|
||||
console.error('[manifestPlugin] No entrypoint found with the name scripts/app')
|
||||
if (!Array.isArray(entryPoints) || typeof entryPoints[0] !== 'string' || entryPoints.length === 0) {
|
||||
console.error('[manifestPlugin] Unexpected entryPoints format')
|
||||
return
|
||||
}
|
||||
const relativeEntrypoint = path.relative(process.cwd(), absoluteEntrypoint)
|
||||
const entryPoint = entryPoints[0]
|
||||
const relativeEntrypoint = path.relative(process.cwd(), entryPoint)
|
||||
|
||||
if (!outputs) {
|
||||
return
|
||||
|
||||
@ -16,10 +16,10 @@ export const getWebpackManifest = (): WebpackManifest =>
|
||||
JSON.parse(readFileSync(WEBPACK_MANIFEST_PATH, 'utf-8')) as WebpackManifest
|
||||
|
||||
export interface WebpackManifest {
|
||||
/** Main app entry JS bundle */
|
||||
'app.js': string
|
||||
/** Main app entry CSS bundle, only used in production mode */
|
||||
'app.css'?: string
|
||||
/** Main JS bundle */
|
||||
'main.js': string
|
||||
/** Main CSS bundle, only used in production mode */
|
||||
'main.css'?: string
|
||||
/** Runtime bundle, only used in development mode */
|
||||
'runtime.js'?: string
|
||||
/** React entry bundle, only used in production mode */
|
||||
@ -55,8 +55,8 @@ export function getIndexHTML(options: GetHTMLPageOptions): string {
|
||||
const { manifestFile, jsContext, jsContextScript } = options
|
||||
|
||||
const {
|
||||
'app.js': appBundle,
|
||||
'app.css': cssBundle,
|
||||
'main.js': mainBundle,
|
||||
'main.css': mainBundleCSS,
|
||||
'runtime.js': runtimeBundle,
|
||||
'react.js': reactBundle,
|
||||
'opentelemetry.js': oTelBundle,
|
||||
@ -72,7 +72,7 @@ export function getIndexHTML(options: GetHTMLPageOptions): string {
|
||||
<meta name="viewport" content="width=device-width, viewport-fit=cover" />
|
||||
<meta name="referrer" content="origin-when-cross-origin"/>
|
||||
<meta name="color-scheme" content="light dark"/>
|
||||
${cssBundle ? `<link rel="stylesheet" href="${cssBundle}">` : ''}
|
||||
${mainBundleCSS ? `<link rel="stylesheet" href="${mainBundleCSS}">` : ''}
|
||||
${
|
||||
ENVIRONMENT_CONFIG.SOURCEGRAPHDOTCOM_MODE
|
||||
? '<script src="https://js.sentry-cdn.com/ae2f74442b154faf90b5ff0f7cd1c618.min.js" crossorigin="anonymous"></script>'
|
||||
@ -99,7 +99,7 @@ export function getIndexHTML(options: GetHTMLPageOptions): string {
|
||||
${runtimeBundle ? `<script src="${runtimeBundle}"></script>` : ''}
|
||||
${reactBundle ? `<script src="${reactBundle}" ${isModule ? 'type="module"' : ''}></script>` : ''}
|
||||
${oTelBundle ? `<script src="${oTelBundle}" ${isModule ? 'type="module"' : ''}></script>` : ''}
|
||||
<script src="${appBundle}" ${isModule ? 'type="module"' : ''}></script>
|
||||
<script src="${mainBundle}" ${isModule ? 'type="module"' : ''}></script>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// * app-shell.tsx: before the Go backend has started, this is served. If the Go backend crashes,
|
||||
// then the Tauri Rust application can bring the user back here to present debugging/error handling
|
||||
// options.
|
||||
// * app-main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else.
|
||||
// * app/main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else.
|
||||
|
||||
// Order is important here
|
||||
// Don't remove the empty lines between these imports
|
||||
@ -12,18 +12,17 @@
|
||||
import '@sourcegraph/shared/src/polyfills'
|
||||
// prettier-ignore-end
|
||||
|
||||
import '../initBuildInfo'
|
||||
import '../monitoring/initMonitoring'
|
||||
import '../../initBuildInfo'
|
||||
import '../../monitoring/initMonitoring'
|
||||
|
||||
import { createRoot } from 'react-dom/client'
|
||||
|
||||
import { logger } from '@sourcegraph/common'
|
||||
import { setLinkComponent } from '@sourcegraph/wildcard'
|
||||
|
||||
import { TauriLink } from '../app/TauriLink'
|
||||
import { initAppShell } from '../storm/app-shell-init'
|
||||
|
||||
import { EnterpriseWebApp } from './EnterpriseWebApp'
|
||||
import { TauriLink } from '../../app/TauriLink'
|
||||
import { initAppShell } from '../../storm/app-shell-init'
|
||||
import { EnterpriseWebApp } from '../EnterpriseWebApp'
|
||||
|
||||
const appShellPromise = initAppShell()
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
{{end}}
|
||||
{{end}}
|
||||
<title>{{.Title}}</title>
|
||||
{{if .Manifest.AppCSSBundlePath}}<link rel="stylesheet" href="{{.Manifest.AppCSSBundlePath}}">{{end}}
|
||||
{{if .Manifest.MainCSSBundlePath}}<link rel="stylesheet" href="{{.Manifest.MainCSSBundlePath}}">{{end}}
|
||||
<link id='sourcegraph-chrome-webstore-item' rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/dgjhfomjieaadpoljlnidmbgkdffpack">
|
||||
<link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="Sourcegraph Search">
|
||||
{{if .PreloadedAssets}}
|
||||
@ -107,10 +107,10 @@
|
||||
<br>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
{{if .Manifest.AppJSRuntimeBundlePath}}<script src="{{.Manifest.AppJSRuntimeBundlePath}}"></script>{{end}}
|
||||
{{if .Manifest.RuntimeJSBundlePath}}<script src="{{.Manifest.RuntimeJSBundlePath}}"></script>{{end}}
|
||||
<script src="{{.Manifest.ReactJSBundlePath}}" {{if .Manifest.IsModule}}type="module"{{end}}></script>
|
||||
<script src="{{.Manifest.OpenTelemetryJSBundlePath}}" {{if .Manifest.IsModule}}type="module"{{end}}></script>
|
||||
<script src="{{.Manifest.AppJSBundlePath}}" {{if .Manifest.IsModule}}type="module"{{end}}></script>
|
||||
<script src="{{.Manifest.MainJSBundlePath}}" {{if .Manifest.IsModule}}type="module"{{end}}></script>
|
||||
{{.Injected.BodyBottom}}
|
||||
</body>
|
||||
|
||||
|
||||
@ -37,8 +37,8 @@
|
||||
<br />
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
{{if .Manifest.AppJSRuntimeBundlePath}}
|
||||
<script src="{{.Manifest.AppJSRuntimeBundlePath}}"></script>
|
||||
{{if .Manifest.RuntimeJSBundlePath}}
|
||||
<script src="{{.Manifest.RuntimeJSBundlePath}}"></script>
|
||||
{{end}}
|
||||
<script src="{{.Manifest.ReactJSBundlePath}}" {{if .Manifest.IsModule}}type="module" {{end}}></script>
|
||||
<script src="{{.Manifest.OpenTelemetryJSBundlePath}}" {{if .Manifest.IsModule}}type="module"{{end}}></script>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
```
|
||||
4. Verify that the phabricator assets are served:
|
||||
- `%NGROK_URL%/.assets/extension/scripts/phabricator.bundle.js`
|
||||
- `%NGROK_URL%/.assets/extension/css/app.bundle.css`
|
||||
- `%NGROK_URL%/.assets/extension/css/main.css`
|
||||
5. Set [`sourcegraph.url`](https://phabricator.sgdev.org/config/edit/sourcegraph.url/) to your tunnelled ngrok URL
|
||||
6. Verify the [`sourcegraph.callsignMappings`](https://phabricator.sgdev.org/config/edit/sourcegraph.callsignMappings/) are correctly set
|
||||
7. Verify [`sourcegraph.enabled`](https://phabricator.sgdev.org/config/edit/sourcegraph.enabled/) is set to `true`
|
||||
|
||||
@ -27,7 +27,7 @@ This means the `frontend` server failed to start, for some reason. Look through
|
||||
If you see this error when opening the app:
|
||||
|
||||
```
|
||||
500 Internal Server Error template: app.html:21:70: executing "app.html" at <version "styles/styl...>: error calling version: open ui/assets/styles/app.bundle.css: no such file or directory
|
||||
500 Internal Server Error template: app.html:21:70: executing "app.html" at <version "styles/styl...>: error calling version: open ui/assets/styles/main.css: no such file or directory
|
||||
```
|
||||
|
||||
that means Webpack hasn't finished compiling the styles yet (it takes about 3 minutes). Simply wait a little while for a message from webpack like `web | Time: 180000ms` to appear in the terminal.
|
||||
|
||||
@ -7,22 +7,22 @@ type WebpackManifest struct {
|
||||
// OpenTelemetryJSBundlePath contains the file name of the OpenTelemetry
|
||||
// dependency bundle, that is required by our main app bundle.
|
||||
OpenTelemetryJSBundlePath string `json:"opentelemetry.js"`
|
||||
// AppJSBundlePath contains the file name of the main
|
||||
// Webpack bundle that serves as the entrypoint
|
||||
// MainJSBundlePath contains the file name of the main
|
||||
// bundle that serves as the entrypoint
|
||||
// for the webapp code.
|
||||
AppJSBundlePath string `json:"app.js"`
|
||||
MainJSBundlePath string `json:"main.js"`
|
||||
// EmbedJSBundlePath contains the file name of the
|
||||
// Webpack bundle that serves as the entrypoint
|
||||
// for the embeddable webapp code.
|
||||
EmbedJSBundlePath string `json:"embed.js"`
|
||||
// AppJSRuntimeBundlePath contains the file name of the
|
||||
// RuntimeJSBundlePath contains the file name of the
|
||||
// JS runtime bundle which is served only in development environment
|
||||
// to kick off the main application code.
|
||||
AppJSRuntimeBundlePath *string `json:"runtime.js"`
|
||||
RuntimeJSBundlePath *string `json:"runtime.js"`
|
||||
// IsModule is whether the JavaScript files are modules (<script type="module">).
|
||||
IsModule bool `json:"isModule"`
|
||||
// Main CSS bundle, only present in production.
|
||||
AppCSSBundlePath *string `json:"app.css"`
|
||||
MainCSSBundlePath *string `json:"main.css"`
|
||||
// Embed CSS bundle, only present in production.
|
||||
EmbedCSSBundlePath *string `json:"embed.css"`
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user