A Vue.js and PrimeVue frontend towards the API that runs the the pre-ingest tooling.
For details or a quick demo, please contact us.
This uses Vue 3 preview, PrimeVue, PrimeIcons and PrimeFlex with TypeScript.
Details
This project was bootstrapped with Vue CLI v4.5.9. Initial vue create
options:
- Please pick a preset: Manually select features
- Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
- Choose a version of Vue.js that you want to start the project with: 3.x (Preview)
- Use class-style component syntax? No
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
- Use history mode for router? (Requires proper server setup for index fallback in production) Yes
- Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
- Pick a linter / formatter config: Prettier
- Pick additional lint features: Lint on save, Lint and fix on commit
- Pick a unit testing solution: Jest
- Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
- Pick the package manager to use when installing dependencies: Yarn
Next, upgraded Prettier to fix errors in the generated code, configured .editorconfig
and Prettier
rules, added vue.config.js
to set the app's title, and added PrimeVue, PrimeIcons and PrimeFlex.
The configuration is kept in .env files.
The free PrimeVue templates are pure CSS and do not expose any SASS variables:
PrimeVue only ships the generated CSS of Material, Bootstrap, Saga, Vela, Arya, Soho, Fluent UI and legacy themes whereas Designer provides full access to the whole SASS structure and the variables of these pre-built themes for easier customization.
To reuse a style from an imported theme, add it to _variables.scss, but note that changing those will not affect the theme itself. Webpack has been set up to include this file in the SCSS of all custom components.
-
Download project dependencies:
yarn install
-
Compile and hot-reload for development:
yarn serve
This runs on http://localhost:8081 (or 8082 and up if ports are already in use) and uses a proxy for the API, to avoid CORS limitations. The default configuration expects the API to be running on http://localhost:8000/api/.
-
Compile and minify for production:
yarn build
-
Lint, Prettify and fix files:
yarn lint
Unlike the pre-commit hook (see below), this is not limited to staged files.
For a quick demo of both backend and frontend, you may want to use the docker-compose.yml
file
included in the backend project.
The Dockerfile creates a temporary (partially cached) build image, builds the
project, and creates a final image that serves the static result using Nginx. To avoid CORS issues,
this also proxies /api/*
and /preingestEventHub/*
to whatever is set in
the environment variables PROXY_API_DEST
and PROXY_EVENTHUB_DEST
. These settings default to
http://host.docker.internal:8000/api/
and http://host.docker.internal:8000/preingestEventHub/
to delegate to port 8000 running on your local machine.
To build and tag:
docker build -t noordhollandsarchief/preingest-frontend:development .
To run on http://localhost:9000, proxy requests for /api/*
to http://localhost:8000/api/ and
proxy requests for /preingestEventHub/*
to http://localhost:8000/preingestEventHub/:
docker run -p 9000:80 --rm noordhollandsarchief/preingest-frontend:development
To proxy to different ports or locations, set PROXY_API_DEST
and PROXY_EVENTHUB_DEST
:
docker run -p 9000:80 --rm \
--env PROXY_API_DEST=http://host.docker.internal:55004/api/ \
--env PROXY_EVENTHUB_DEST=http://host.docker.internal:55004/preingestEventHub/ \
noordhollandsarchief/preingest-frontend:development
For Linux set --add-host=host.docker.internal:host-gateway
or use 172.17.0.1
instead of host.docker.internal
:
docker run -p 9000:80 --rm \
--env PROXY_API_DEST=http://172.17.0.1:8000/api/ \
--env PROXY_EVENTHUB_DEST=http://172.17.0.1:8000/preingestEventHub/ \
noordhollandsarchief/preingest-frontend:development
A pre-commit hook ensures that linting errors and formatting errors cannot be committed. Note that the hook uses lint-staged, which temporarily hides unstaged changes of partially staged files. This may make your IDE show warnings about files that were changed outside of the IDE.
Beware that Sourcetree may silently skip the pre-commit hook.