The front-end module of the Svarog framework, containing the core functionalities such as login, admin console, plugin management and providing the React framework to other modules.
npm install| Command | Description |
|---|---|
npm run build |
Production build under /www (minified, no source maps, no debug) |
npm run build-dev |
Production build under /www with source maps and debug enabled |
npm run dev |
Starts a development server with hot reloading, source maps, and debug enabled |
npm run test |
Lints and auto-fixes the code using eslint |
| Variable | Description | Required |
|---|---|---|
GA_TRACKING_ID |
Google Analytics tracking ID | No |
For local development, create a .env file in the project root:
GA_TRACKING_ID=UA-XXXXXXXXX-X
For CI/CD, set the variable in your GitLab CI/CD settings under Settings > CI/CD > Variables.
The following workflow applies both when developing perun-core itself and when developing a project that uses it as a dependency.
- Build perun-core:
Or use
npm run build
npm run build-devif you need source maps for debugging. - Copy
perun-core/www/perun-core.jsinto your project atyour-project/node_modules/perun-core/www/.
Since the built script is periodically committed to the repository, your project may already have a recent version of perun-core.js in node_modules/perun-core/www/ after running npm install. This step is only necessary when you need changes that haven't been published yet.
Create the following files in the www directory when developing Perun Core, or backend/www when developing other projects.
config.js - Configure the server URL for your environment:
window.server = 'http://<host>:<port>/services'index.html - A minimal entry point that dynamically loads stylesheets and scripts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script src="config.js"></script>
<script>
// If your project uses spatial features, add these (see Spatial Support section):
// window.sysCrs = 'EPSG:3857'
// window.sysCenter = { lat: 41.294, lng: 74.597 }
</script>
<script>
const assetsUrl = `${window.server}/WsConf/params/get/sys/FRONTEND_ASSETS_LOCATION`
fetch(assetsUrl).then(response => response.json()).then(res => {
if (res.VALUE) {
const assetsLocation = res.VALUE
window.assets = assetsLocation;
const server = window.server.substring(0, window.server.lastIndexOf('/'));
// Load locale script
// ...
// Load custom stylesheets — list all available stylesheets for your environment
const stylesheets = [
'datagrid', 'forms', 'logon', 'homepage', 'style',
'footer', 'loading', 'topnavmenu', 'sidelistmenu',
'adminconsole', 'modal', 'userguide', 'not-found-page',
// ... add more as needed
];
// Each entry loads: ${server}${assetsLocation}/styles/${name}.css
// Load Font Awesome stylesheets
// ...
// Load title script
// ...
}
}).catch(err => console.log(err))
</script>
<!-- Replace with your project's bundle filename -->
<script src="bundle-name.js"></script>
</body>
</html>Note: This is a simplified template. The full boilerplate is available at
docs/index.html.template— copy it into your project'sbackend/wwwdirectory and customize as needed.
If your project uses spatial features, you must manually add the following parameters to index.html (inside a <script> tag, before other scripts):
window.sysCrs = 'EPSG:3857'
window.sysCenter = { lat: 41.294, lng: 74.597 }These values correspond to the following system parameters (SVAROG_SYS_PARAMS) at the environment level:
| Window Variable | System Parameter |
|---|---|
window.sysCrs |
SYS_CRS |
window.sysCenter |
SYS_CENTER |
Perun Core includes the @tabler/icons-react icon library. Browse the available icons at https://tabler.io/icons.
When developing a project, replace the Icon component at frontend/elements/util/Icon.js with the following static import version:
import React from 'react'
import * as TablerIcons from '@tabler/icons-react'
const Icon = ({ name, ...props }) => {
const IconComponent = TablerIcons[name]
return IconComponent ? <IconComponent {...props} /> : null
}
export default IconAfter replacing the component, rebuild perun-core:
npm run buildWhy? The default
Iconcomponent uses dynamic imports for code-splitting. The static import version above bundles all icons upfront, which is simpler for local development of dependent projects.