Merge pull request #1565 from rust-lang/frontend-npm

Introduce frontend build system using npm, Parcel and TypeScript

Author: Kobzol

.dockerignore

@@ -2,6 +2,8 @@
 !/database
 !/intern
 !/site
+/site/frontend/node_modules
+/site/frontend/dist
 !/collector
 !/Cargo.toml
 !/Cargo.lock

Dockerfile

@@ -1,3 +1,10 @@
+FROM node:18 as frontend
+
+COPY ./site ./site
+RUN cd site/frontend && npm ci
+RUN cd site/frontend && npm run check
+RUN cd site/frontend && npm run build
+
 FROM ubuntu:20.04 as build
 
 RUN apt-get update -y && \
@@ -18,10 +25,11 @@ RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- \
 
 COPY ./Cargo.lock ./Cargo.lock
 COPY ./Cargo.toml ./Cargo.toml
-COPY ./site ./site
 COPY ./collector ./collector
 COPY ./database ./database
 COPY ./intern ./intern
+COPY ./site ./site
+COPY --from=frontend ./site/frontend/dist ./site/frontend/dist
 
 RUN bash -c 'source $HOME/.cargo/env && cargo build --release -p site'
 RUN bash -c 'source $HOME/.cargo/env && cargo build --release --bin postgres-to-sqlite'

site/.gitignore

@@ -1,2 +1,4 @@
 /data
 /target
+frontend/node_modules
+frontend/dist/**/

site/frontend/README.md

@@ -0,0 +1,28 @@
+# `rustc-perf` site frontend
+This directory contains code for the `rustc-perf` website frontend.
+
+## Build instructions
+- Install dependencies
+   ```console
+   $ npm install
+   ```
+- Development build - dynamically reloads after each change.
+    ```console
+    $ npm run watch
+    ```
+- Production build - build optimized and minimized files.
+    ```console
+    $ npm run build
+    ```
+
+The files are packaged into the `dist` directory, from which they are embedded into the `rustc-perf`
+binary.
+
+## Build system
+The frontend is built using the `Parcel` bundler. It generates several JavaScript files (one for each
+page in the perf.RLO website) into the `dist` directory.
+
+It uses a custom backend for transpiling `TypeScript`, which transpiles for browsers defined in
+the `browserslist` attribute in `package.json`. It does not perform type-checking, that is why
+there is a dedicated `npm run check` action that uses `tsc`. It is performed on CI to find typ errors.
+The `tsconfig.json` file is only used by the type-checking action.