-
Notifications
You must be signed in to change notification settings - Fork 49
Useful links for developers
New to React? Make sure to read (and code!), start with the excellent official documentation.
Below are some useful links that will make you a better developer:
Hajk uses Material UI. As a dev, make sure that you know which components are available and how they can be used. For example, here's the demo page for a Button component, but there are tons of other components which will help you build better plugins. Get to know them now!
When talking about Hajk, it's good to have some common terminology. What follows is an attempt to explain some of Hajk's parts, what they are and what we call them.
Hajk consists of three applications: Client, Admin and Backend.
A React application that renders the UI that user sees. We further differentiate between Core and Plugins within Client, see below.
Also a React app, but built using some older components than the Client application. Renders the administration UI, where site admin can set all properties for maps that will be rendered in Client.
A .NET application written in C# that essentially is a REST API. Client gets its config files from Backend, and uses it for some special use cases, such as creating a PDF with map content or exporting map features to KML.
Admin uses backend to both read and write config files.
Backend is frequently called MapService in Hajk.
When we talk about Client, it's useful to distinguish between different parts of the application.
Core is the part of Client that is responsible for starting the application, reading config files, initiating plugins and rendering a map, as well as some special Components of the map (Zoom buttons, MapSwitcher, etc).
Currently Core is not a part of Client per se (it's more a concept than a module in code). Parts of code that we see as Core can be found everywhere in new-client/src except the plugins directory.
Most of Hajk's functionality is found in its plugins. A Plugin will (usually) render a button (either in Drawer or as Widget button). When a plugin's button is clicked it will result in displaying a Window (which mostly is based on the BaseWindowPlugin component).
There are some special cases: plugins that don't render a button and/or Window. One example is Search (that renders the search box directly on map). Another is Infoclick (that adds an onClick-handler to the map and displays infobox for clicked feature).
Hajk's plugins are found in new-client/src/plugins.
As Client is a React application, everything that gets rendered is a Component. Both Core and the different Plugins consist of Components.
A Component (whether being part of Core or Plugin) will often consist of several more Components, which is a normal pattern for React components.
Here's an example of .vscode/launch.json that allows you to set breakpoints and debug the three Hajk applications (Client, Admin and NodeJS Backend).
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Client in Firefox (ensure it's already running on 3000)",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/new-client/node_modules/**/*.js",
"${workspaceFolder}/new-client/node_modules/**",
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/node_modules/**"
]
},
{
"name": "Admin in Firefox (ensure it's already running on 3001)",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3001",
"webRoot": "${workspaceRoot}",
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/new-admin/node_modules/**/*.js",
"${workspaceFolder}/new-admin/node_modules/**",
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/node_modules/**"
]
},
{
"name": "Backend (Start and attach debugger)",
"cwd": "${workspaceFolder}/new-backend",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/new-backend/node_modules/nodemon/bin/nodemon.js",
"runtimeArgs": ["--inspect"],
"program": "server/index.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"outputCapture": "std",
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/new-backend/node_modules/**/*.js",
"${workspaceFolder}/new-backend/lib/**/*.js"
],
"serverReadyAction": {
"pattern": "Launched on port ([0-9]+)",
"uriFormat": "http://localhost:%s",
"action": "openExternally"
}
}
]
}