Migrate from Webpack to Vite

[blcham]

@shellyear

A/C:

• Work with development server + enviroment variables
• Have sourcemap
• Dockerization is working (we have working dockerization here)
• Dockerization with environment variables at runtime
• Make dockerization work with relative path (see Make dockerization work with relative path fta-fmea-ui#167)

[blcham]

Similar issue in different project:
kbss-cvut/fta-fmea-ui#151

[blcham]

Notes on how to migrate

Some information about Vite

• script vite accepts from .env.development variables starting with VITE_
• script vite preview accepts from .env.production variables starting with VITE_
• it should be possible to recognize in .env different prefixes than VITE_ using envprefix configuration

Solution

• config.js file
  • need to be included in index.html
  • public/config.js should be an empty object window.__config__
• .env files
  • we should have a naming convention for application variables (i.e. prefix RECORD_MANAGER_). This way, we can use .env file entries directly in docker-compose file and it is separated to Vite variables starting with VITE_)
  • we will have .env.development and .env.production files
• javascript utility to retrieve variables
  • it should work in the following way:

for the requested variable V :
    provide a default value
    override it by V from import.meta.env
    override it by value from window.__config__

• legacy dependencies that access pocess.env should be solved by one of the possible solutions:
  • solution 1:

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      // those two env vars are used by this lib
      // ref: https://github.com/thlorenz/parse-link-header/blob/f380d3f99de4a5411b2d7f8da6069bb7529cbf4a/index.js#L7
      'process.env.PARSE_LINK_HEADER_MAXLEN': JSON.stringify(env.PARSE_LINK_HEADER_MAXLEN),
      'process.env.PARSE_LINK_HEADER_THROW_ON_MAXLEN_EXCEEDED': JSON.stringify(
        env.PARSE_LINK_HEADER_THROW_ON_MAXLEN_EXCEEDED,
      ),
    },
    // ...
}

• solution 2:
  

[blcham]

Open questions:

• What does it mean to have .env variable not set up for external dependencies?

[blcham]

@LaChope @shellyear