medplum · codyebberson · Jun 26, 2023 · Jun 24, 2023 · Jun 24, 2023 · Jun 24, 2023
@@ -6,6 +6,7 @@
     "node": ">=18.0.0"
   },
   "scripts": {
+    "clean": "turbo run clean",
     "build": "turbo run build",
     "test": "turbo run test",
     "lint": "eslint packages/",
@@ -22,18 +23,14 @@
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
     "@cyclonedx/cyclonedx-npm": "1.12.1",
-    "@emotion/babel-plugin": "11.11.0",
-    "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.1.0",
-    "@rollup/plugin-replace": "5.0.2",
-    "@rollup/plugin-terser": "0.4.3",
-    "@rollup/plugin-typescript": "11.1.1",
     "@types/jest": "29.5.2",
     "@types/node": "20.3.1",
     "@typescript-eslint/eslint-plugin": "5.60.0",
     "@typescript-eslint/parser": "5.60.0",
     "babel-jest": "29.5.0",
+    "babel-preset-vite": "1.1.0",
     "cross-env": "7.0.3",
+    "esbuild": "0.18.6",
     "eslint": "8.43.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-jsdoc": "46.2.6",
@@ -46,20 +43,14 @@
     "nyc": "15.1.0",
     "prettier": "2.8.8",
     "rimraf": "5.0.1",
-    "rollup": "3.25.1",
-    "rollup-plugin-copy": "3.4.0",
-    "rollup-plugin-peer-deps-external": "2.2.4",
     "source-map-explorer": "2.5.3",
     "ts-node": "10.9.1",
     "tslib": "2.5.3",
     "turbo": "1.10.3",
-    "typescript": "5.1.3",
-    "webpack": "5.87.0",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1"
+    "typescript": "5.1.3"
   },
   "overrides": {
-    "fast-xml-parser": "4.2.4",
+    "esbuild": "0.18.6",
     "got": "11.8.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-  "plugins": [["@emotion/babel-plugin"]]
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", "babel-preset-vite"]
 }
@@ -10,11 +10,11 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="theme-color" content="#5b2876" />
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="apple-touch-icon" href="/img/medplum-logo-512x512.png">
-    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/img/medplum-logo-512x512.png" />
   </head>
 
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
@@ -16,10 +16,8 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
-    "dev": "webpack serve --mode development",
-    "build": "npm run clean && tsc && cross-env NODE_ENV=production webpack --mode production",
-    "debug": "webpack --mode development",
-    "start": "http-server dist --port 3000 --proxy http://localhost:3000?",
+    "dev": "vite",
+    "build": "npm run clean && tsc && vite build",
     "test": "jest",
     "source-map-explorer": "source-map-explorer dist/**/*.js --gzip"
   },
@@ -41,19 +39,11 @@
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
     "@types/react-router-dom": "5.3.3",
-    "babel-loader": "9.1.2",
-    "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.8.1",
-    "dotenv-webpack": "8.0.1",
-    "html-webpack-plugin": "5.5.3",
-    "http-server": "14.1.1",
-    "identity-obj-proxy": "3.0.0",
-    "mini-css-extract-plugin": "2.7.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.13.0",
-    "webpack-manifest-plugin": "5.0.0",
-    "workbox-webpack-plugin": "7.0.0"
+    "vite": "4.3.9",
+    "vite-plugin-pwa": "0.16.4"
   },
   "browserslist": [
     "last 1 Chrome versions"

@@ -7,11 +7,11 @@ export interface MedplumAppConfig {
 }
 
 const config: MedplumAppConfig = {
-  baseUrl: process.env.MEDPLUM_BASE_URL as string,
-  clientId: process.env.MEDPLUM_CLIENT_ID || undefined,
-  googleClientId: process.env.GOOGLE_CLIENT_ID || undefined,
-  recaptchaSiteKey: process.env.RECAPTCHA_SITE_KEY || undefined,
-  registerEnabled: process.env.MEDPLUM_REGISTER_ENABLED !== 'false', // default true
+  baseUrl: import.meta.env?.MEDPLUM_BASE_URL as string,
+  clientId: import.meta.env?.MEDPLUM_CLIENT_ID || undefined,
+  googleClientId: import.meta.env?.GOOGLE_CLIENT_ID || undefined,
+  recaptchaSiteKey: import.meta.env?.RECAPTCHA_SITE_KEY || undefined,
+  registerEnabled: import.meta.env?.MEDPLUM_REGISTER_ENABLED !== 'false', // default true
 };
 
 export function getConfig(): MedplumAppConfig {

@@ -4,11 +4,11 @@ import { MedplumClient } from '@medplum/core';
 import { MedplumProvider } from '@medplum/react';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { App } from './App';
 import { getConfig } from './config';
 
-if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+if (import.meta.env?.PROD && 'serviceWorker' in navigator) {
   window.addEventListener('load', () => {
     navigator.serviceWorker
       .register('/service-worker.js')

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "esnext",
-    "lib": ["esnext", "dom", "dom.iterable"]
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "types": ["vite/client"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "./jest.setup.ts"]
 }
@@ -0,0 +1,46 @@
+/// <reference types="vite/client" />
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig({
+  envPrefix: ['MEDPLUM_', 'GOOGLE_', 'RECAPTCHA_'],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: null,
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: 'Medplum',
+        short_name: 'Medplum',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#ffffff',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/img/medplum-logo.svg',
+            type: 'image/svg+xml',
+            sizes: '512x512',
+          },
+          {
+            src: '/img/medplum-logo-512x512.png',
+            type: 'image/png',
+            sizes: '512x512',
+          },
+          {
+            src: '/img/medplum-logo-maskable.png',
+            type: 'image/png',
+            sizes: '512x512',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
+  ],
+  server: {
+    port: 3000,
+  },
+  publicDir: 'static',
+});
@@ -1,3 +1,2 @@
 cdk.context.json
 cdk.out
-
@@ -0,0 +1,46 @@
+/* global console */
+/* eslint no-console: "off" */
+
+import esbuild from 'esbuild';
+import { writeFileSync } from 'fs';
+
+const options = {
+  entryPoints: ['./src/index.ts'],
+  bundle: true,
+  platform: 'node',
+  loader: { '.ts': 'ts' },
+  resolveExtensions: ['.ts'],
+  target: 'es2021',
+  tsconfig: 'tsconfig.json',
+  minify: true,
+  external: [
+    '@aws-sdk/client-acm',
+    '@aws-sdk/client-ssm',
+    '@aws-sdk/client-sts',
+    'aws-cdk-lib',
+    'aws-cdk-lib/aws-ecr',
+    'aws-cdk-lib/aws-rds',
+    'cdk',
+    'cdk-nag',
+    'cdk-serverless-clamscan',
+    'constructs',
+  ],
+};
+
+esbuild
+  .build({
+    ...options,
+    format: 'cjs',
+    outfile: './dist/cjs/index.cjs',
+  })
+  .then(() => writeFileSync('./dist/cjs/package.json', '{"type": "commonjs"}'))
+  .catch(console.error);
+
+esbuild
+  .build({
+    ...options,
+    format: 'esm',
+    outfile: './dist/esm/index.mjs',
+  })
+  .then(() => writeFileSync('./dist/esm/package.json', '{"type": "module"}'))
+  .catch(console.error);
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "clean": "rimraf dist cdk.out",
-    "build": "npm run clean && tsc && rollup --config rollup.config.mjs",
+    "build": "npm run clean && tsc --project tsconfig.build.json && node esbuild.mjs",
     "cdk": "cdk",
     "test": "jest --runInBand"
   },