Split dist/ to individual subdirectories

Author: canova

docs-developer/deploying.md

@@ -2,6 +2,9 @@
 
 Our hosting service is [Netlify](https://www.netlify.com/). Deploying on a nginx instance is also possible, see below.
 
+The repository config sets Netlify's publish directory to `dist/browser` in
+[`netlify.toml`](/netlify.toml).
+
 ## Deploy to production
 
 The `production` branch is configured to be automatically deployed to
@@ -94,6 +97,6 @@ document](https://docs.google.com/document/d/16YRafdIbk4aFgu4EZjMEjX4F6jIcUJQsaz
 # Deploying on a nginx instance
 
 To deploy on nginx (without support for direct upload from the Firefox UI), run `yarn build-prod`
-and point nginx at the `dist` directory, which needs to be at the root of the webserver. Additionally,
+and point nginx at the `dist/browser` directory, which needs to be at the root of the webserver. Additionally,
 a `error_page 404 =200 /index.html;` directive needs to be added so that unknown URLs respond with index.html.
 For a more production-ready configuration, have a look at the netlify [`_headers`](/res/_headers) file.

netlify.toml

@@ -1,2 +1,5 @@
+[build]
+  publish = "dist/browser"
+
 [context.l10n]
   command = "yarn build-l10n-prod"

package.json

@@ -34,8 +34,8 @@
     "protoc": "npx -p protobufjs-cli pbjs -t static-module -w commonjs -o ./src/profile-logic/import/proto/simpleperf_report.js ./src/profile-logic/import/proto/simpleperf_report.proto && npx -p protobufjs-cli pbts -o ./src/profile-logic/import/proto/simpleperf_report.d.ts ./src/profile-logic/import/proto/simpleperf_report.js",
     "license-check": "devtools-license-check",
     "preinstall": "node bin/pre-install.js",
-    "publish": "rimraf public_html && cp -r dist public_html",
-    "serve-static": "ws -d dist/ -s index.html -p 4243",
+    "publish": "rimraf public_html && cp -r dist/browser public_html",
+    "serve-static": "ws -d dist/browser/ -s index.html -p 4243",
     "start": "cross-env NODE_ENV=development node scripts/run-dev-server.mjs",
     "start-prod": "yarn build-prod && yarn serve-static",
     "start-l10n": "cross-env NODE_ENV=development L10N=1 node scripts/run-dev-server.mjs",

scripts/build-symbolicator.mjs

@@ -8,7 +8,7 @@ const symbolicatorConfig = {
   ...nodeBaseConfig,
   metafile: true,
   entryPoints: ['src/symbolicator-cli/index.ts'],
-  outfile: 'dist/symbolicator-cli.js',
+  outfile: 'dist/node-tools/symbolicator-cli.js',
 };
 
 async function build() {

scripts/build.mjs

@@ -7,7 +7,7 @@ import { mainBundleConfig } from './lib/esbuild-configs.mjs';
 import { cleanDist, saveMetafile } from './lib/build-utils.mjs';
 
 async function build() {
-  cleanDist();
+  cleanDist('dist/browser');
   const buildResult = await esbuild.build(mainBundleConfig);
   saveMetafile(buildResult);
   console.log('✅ Main browser build completed');

scripts/lib/esbuild-configs.mjs

@@ -19,6 +19,7 @@ const __dirname = path.dirname(__filename);
 const projectRoot = path.normalize(path.join(__dirname, '..', '..'));
 
 const isProduction = process.env.NODE_ENV === 'production';
+const browserDistDir = 'dist/browser';
 
 // Configuration shared by both node and browser builds
 const baseConfig = {
@@ -68,7 +69,7 @@ export const mainBundleConfig = {
   sourcemap: true,
   splitting: true,
   entryPoints: ['src/index.tsx'],
-  outdir: 'dist',
+  outdir: browserDistDir,
   metafile: true,
   publicPath: '/',
   entryNames: '[name]-[hash]',
@@ -90,14 +91,14 @@ export const mainBundleConfig = {
     copy({
       resolveFrom: projectRoot,
       assets: [
-        { from: ['res/_headers'], to: ['dist'] },
-        { from: ['res/_redirects'], to: ['dist'] },
-        { from: ['res/contribute.json'], to: ['dist'] },
-        { from: ['res/robots.txt'], to: ['dist'] },
-        { from: ['res/service-worker-compat.js'], to: ['dist'] },
-        { from: ['res/img/favicon.png'], to: ['dist/res/img'] },
-        { from: ['docs-user/**/*'], to: ['dist/docs'] },
-        { from: ['locales/**/*'], to: ['dist/locales'] },
+        { from: ['res/_headers'], to: [browserDistDir] },
+        { from: ['res/_redirects'], to: [browserDistDir] },
+        { from: ['res/contribute.json'], to: [browserDistDir] },
+        { from: ['res/robots.txt'], to: [browserDistDir] },
+        { from: ['res/service-worker-compat.js'], to: [browserDistDir] },
+        { from: ['res/img/favicon.png'], to: [`${browserDistDir}/res/img`] },
+        { from: ['docs-user/**/*'], to: [`${browserDistDir}/docs`] },
+        { from: ['locales/**/*'], to: [`${browserDistDir}/locales`] },
       ],
     }),
     generateHtmlPlugin({
@@ -122,7 +123,7 @@ export const photonConfig = {
   sourcemap: true,
   publicPath: '/photon/',
   entryPoints: ['res/photon/index.js'],
-  outdir: 'dist/photon',
+  outdir: `${browserDistDir}/photon`,
   metafile: true,
   plugins: [
     generateHtmlPlugin({

scripts/run-dev-server.mjs

@@ -20,7 +20,7 @@ const argv = yargs(hideBin(process.argv))
 startDevServer(mainBundleConfig, {
   port,
   host,
-  distDir: 'dist',
+  distDir: 'dist/browser',
   cleanDist: true,
   onServerStart: (profilerUrl) => {
     const barAscii =

scripts/run-photon-dev-server.mjs

@@ -10,9 +10,9 @@ const host = process.env.FX_PROFILER_PHOTON_HOST || 'localhost';
 startDevServer(photonConfig, {
   port,
   host,
-  distDir: 'dist',
+  distDir: 'dist/browser',
   fallback: 'photon/index.html',
-  cleanDist: false, // Don't clean the whole dist, just photon
+  cleanDist: false, // Don't clean the whole dist/browser, just photon
   onServerStart: (url) => {
     console.log(`> Photon styling is listening at: ${url}/photon/\n`);
   },

src/symbolicator-cli/index.ts

@@ -5,11 +5,11 @@
  * To use it it first needs to be built:
  *   yarn build-symbolicator-cli
  *
- * Then it can be run from the `dist` directory:
- *   node dist/symbolicator-cli.js --input <input profile> --output <symbolicated profile> --server <symbol server URL>
+ * Then it can be run from the `dist/node-tools` directory:
+ *   node dist/node-tools/symbolicator-cli.js --input <input profile> --output <symbolicated profile> --server <symbol server URL>
  *
  * For example:
- *   node dist/symbolicator-cli.js --input samply-profile.json --output profile-symbolicated.json --server http://localhost:3000
+ *   node dist/node-tools/symbolicator-cli.js --input samply-profile.json --output profile-symbolicated.json --server http://localhost:3000
  *
  */
 

workbox-config.js

@@ -37,7 +37,7 @@ module.exports = {
     // convenient that we can just access it from a browser.
     /^\/sw\.js/,
   ],
-  globDirectory: 'dist',
+  globDirectory: 'dist/browser',
   globPatterns: ['**/*'],
   globIgnores: [
     // exclude user docs and photon from the cache
@@ -55,5 +55,5 @@ module.exports = {
   // This is the service worker file name. It should never change if we want
   // that the browser updates it. If this changes it will never be updated
   // and the user will be stuck with an old version.
-  swDest: 'dist/sw.js',
+  swDest: 'dist/browser/sw.js',
 };