736590558b
This commit changes the web application's build, transpilation and minification process from Vue CLI to Vite. This shift paves the way for a full migration to Vite as the primary build tool (#230). Configuration changes: - `.vscode/extensions.json`: Update recommended plugins, replacing unmaintained ones with official recommendations. - Legacy browser support: - Use `@vitejs/plugin-legacy` to transpile for older browsers. - Remove `core-js` dependency and `babel.config.cjs` configuration as they're now handled by the legacy plugin. - Delete `@babel/preset-typescript` and `@babel/preset-typescript` dependencies as legacy plugin handles babel dependencies by default. - Add `terser` dependency that's used by the legacy plugin for minification, as per Vite's official documentation. - `tsconfig.json`: - Remove obsolete `webpack-env` types. - Add `"resolveJsonModule": true` to be able to read JSON files in right way. - Use correct casing as configuration values. - Simplify `lib` to align with Vite and Vue starter configuration. - Add `"skipLibCheck": true` as `npm run build` now runs `tsc` which fails on inconsistent typings inside `node_modules` due to npm's weak dependency resoultion. - PostCSS: - Add `autoprefixer` as dependency, no longer installed by Vue CLI. - Epxlicitly added `postcss` as dependency to anticipate potential peer dependency changes. - Remove related `@vue/cli` dependencies. - Remove `sass-loader` as Vite has native CSS preprocessing support. - Run integration tests with `jsdom` environment so `window` object can be used. Client-side changes: - Abstract build tool specific environment variable population. Environment variables were previously populated by Vue CLI and now by Vite but not having an abstraction caused issues. This abstraction solves build errors and allows easier future migrations and testing. - Change Vue CLI-specific `~@` aliases to `@` to be able to compile with Vite. - Update types in LiquorTree to satisfy `tsc`. - Remove Vue CLI-specific workaround from `src/presentation/main.ts`. Restructuring: - Move `public/` to `presentation/` to align with the layered structure, which was not possible with Vue CLI. - Move `index.html` to web root instead of having it inside `public/` to align with official recommended structure. - Move logic shared by both integration and unit tests to `tests/shared`. - Move logo creation script to `scripts/` and its npm command to include `build` to align with rest of the structure.
69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
# Development
|
|
|
|
Before your commit, a good practice is to:
|
|
|
|
1. [Run unit tests](#testing)
|
|
2. [Lint your code](#linting)
|
|
|
|
You could run other types of tests as well, but they may take longer time and overkill for your changes. Automated actions executes the tests for a pull request or change in the main branch. See [ci-cd.md](./ci-cd.md) for more information.
|
|
|
|
## Commands
|
|
|
|
### Prerequisites
|
|
|
|
- Install node >15.x.
|
|
- Install dependencies using `npm install`.
|
|
|
|
### Testing
|
|
|
|
- Run unit tests: `npm run test:unit`
|
|
- Run integration tests: `npm run test:integration`
|
|
- Run e2e (end-to-end) tests
|
|
- Interactive mode with GUI: `npm run test:e2e`
|
|
- Headless mode without GUI: `npm run test:e2e -- --headless`
|
|
|
|
📖 Read more about testing in [tests](./tests.md).
|
|
|
|
### Linting
|
|
|
|
- Lint all (recommended 💡): `npm run lint`
|
|
- Markdown: `npm run lint:md`
|
|
- Markdown consistency `npm run lint:md:consistency`
|
|
- Markdown relative URLs: `npm run lint:md:relative-urls`
|
|
- JavaScript/TypeScript: `npm run lint:eslint`
|
|
- Yaml: `npm run lint:yaml`
|
|
|
|
### Running
|
|
|
|
**Web:**
|
|
|
|
- Run in local server: `npm run dev`
|
|
- 💡 Meant for local development with features such as hot-reloading.
|
|
- Preview production build: `npm run preview`
|
|
- Start a local web server that serves the built solution from `./dist`.
|
|
- 💡 Run `npm run build` before `npm run preview`.
|
|
|
|
**Docker:**
|
|
|
|
1. Build: `docker build -t undergroundwires/privacy.sexy:latest .`
|
|
2. Run: `docker run -it -p 8080:80 --rm --name privacy.sexy undergroundwires/privacy.sexy:latest`
|
|
|
|
### Building
|
|
|
|
- Build web application: `npm run build`
|
|
- Build desktop application: `npm run electron:build`
|
|
- (Re)create icons (see [documentation](../img/README.md)): `npm run create-icons`
|
|
|
|
### Utility Scripts
|
|
|
|
- Run fresh NPM install: [`./scripts/fresh-npm-install.sh`](../scripts/fresh-npm-install.sh)
|
|
- This script provides a clean NPM install, removing existing node modules and optionally the package-lock.json (when run with -n), then installs dependencies and runs unit tests.
|
|
- Configure VSCode: [`./scripts/configure-vscode.sh`](../scripts/configure-vscode.sh)
|
|
- This script checks and sets the necessary configurations for VSCode in `settings.json` file.
|
|
|
|
## Recommended extensions
|
|
|
|
You should use EditorConfig to follow project style.
|
|
|
|
For Visual Studio Code, [`.vscode/extensions.json`](./../.vscode/extensions.json) includes list of recommended extensions.
|