diff --git a/README.md b/README.md index 902e5f66a..34a039981 100644 --- a/README.md +++ b/README.md @@ -12,10 +12,6 @@ For more details about the project's architecture, development guidelines and in This project uses [Vite](https://vitejs.dev/). -## Code structure - -The project is structured as a monorepo. This means that the actual code packages are located under `inventory-management-system` - ### Available Scripts In the project directory, you can run: diff --git a/index.html b/index.html index b4979f2d3..5ab3c36a6 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,27 @@ - - - - - - - - - - Inventory Management System - - - - - -
- - - + + Inventory Management System + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index d99242094..85f23cd8a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,5 @@ import axios from 'axios'; -import * as log from 'loglevel'; -import { SetupWorker } from 'msw/browser'; +import log from 'loglevel'; import React from 'react'; import ReactDOMClient from 'react-dom/client'; import singleSpaReact from 'single-spa-react'; @@ -167,11 +166,19 @@ export const fetchSettings = }); }; +const settings = fetchSettings(); +setSettings(settings); + async function prepare() { - if (import.meta.env.DEV || import.meta.env.VITE_APP_INCLUDE_MSW === 'true') { + // When in dev, only use MSW if the api url is given, otherwise load MSW as it must have been explicitly requested + const settingsResult = await settings; + if ( + import.meta.env.VITE_APP_INCLUDE_MSW === 'true' || + settingsResult?.apiUrl === '' + ) { // Need to use require instead of import as import breaks when loaded in SG const { worker } = await import('./mocks/browser'); - return (worker as SetupWorker).start({ + return worker.start({ onUnhandledRequest(request, print) { // Ignore unhandled requests to non-localhost things (normally means you're contacting a real server) if (request.url.includes('localhost')) { @@ -181,14 +188,9 @@ async function prepare() { print.warning(); }, }); - } - return Promise.resolve(); + } else return Promise.resolve(); } -const settings = fetchSettings(); - -setSettings(settings); - /* Renders only if we're not being loaded by SG */ const conditionalSciGatewayRender = () => { if (!document.getElementById('scigateway')) { @@ -196,27 +198,12 @@ const conditionalSciGatewayRender = () => { } }; -if (import.meta.env.DEV) { - // When in dev, only use MSW if the api url or otherwise if MSW is explicitly requested - settings - .then((settings) => { - if ( - (settings && settings.apiUrl !== '') || - import.meta.env.VITE_APP_INCLUDE_MSW === 'false' - ) - conditionalSciGatewayRender(); - else prepare().then(() => conditionalSciGatewayRender()); - }) - .catch((error) => log.error(`Got error: ${error.message}`)); +if (import.meta.env.DEV || import.meta.env.VITE_APP_INCLUDE_MSW === 'true') { + prepare().then(() => conditionalSciGatewayRender()); log.setDefaultLevel(log.levels.DEBUG); } else { - // When in production, only use MSW if explicitly requested - if (import.meta.env.VITE_APP_INCLUDE_MSW === 'true') { - prepare().then(() => conditionalSciGatewayRender()); - log.setDefaultLevel(log.levels.DEBUG); - } else { - conditionalSciGatewayRender(); - log.setDefaultLevel(log.levels.ERROR); - } + conditionalSciGatewayRender(); + + log.setDefaultLevel(log.levels.ERROR); } diff --git a/vite.config.ts b/vite.config.ts index a3dfe1399..1657513cd 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,7 +27,7 @@ function jsonHMR(): PluginOption { if (file.endsWith('.json')) { console.log('reloading json file...'); - server.hot.send({ + server.ws.send({ type: 'full-reload', path: '*', }); @@ -38,10 +38,11 @@ function jsonHMR(): PluginOption { // Obtain default coverage config from vitest when not building for production // (to avoid importing vitest during build as its a dev dependency) -let coverageConfigDefaultsExclude: string[] = []; +let vitestCoverageConfigDefaultsExclude: string[] = []; if (process.env.NODE_ENV !== 'production') { await import('vitest/config').then((vitestConfig) => { - coverageConfigDefaultsExclude = vitestConfig.coverageConfigDefaults.exclude; + vitestCoverageConfigDefaultsExclude = + vitestConfig.coverageConfigDefaults.exclude; }); } @@ -90,7 +91,11 @@ export default defineConfig(({ mode }) => { // Config for deployment in SciGateway config.build = { lib: { - // https://github.com/vitejs/vite/issues/7130 + // We use `umd` here as `es` causes some import statements to leak into the main.js, breaking the build + // removing this entirely uses a default of both, which for build results in `umd` taking precedence but when + // using --watch, `es` appears to replace it intermittently. Hopefully this can be fixed in the future and we + // can use `es` instead. + formats: ['umd'], entry: 'src/main.tsx', name: 'inventory-management-system', }, @@ -147,7 +152,7 @@ export default defineConfig(({ mode }) => { ['lcov', { outputFile: 'lcov.info', silent: true }], ], exclude: [ - ...coverageConfigDefaultsExclude, + ...vitestCoverageConfigDefaultsExclude, 'public/*', 'server/*', // Leave handlers to show up unused code