Platon

English

O'zbekcha

English

O'zbekcha

Appearance

Project structure ​

Welcome to Platon! This guide will help you understand the project structure and get you up and running quickly.

Table of Contents ​

Project Overview ​

Platon is a modular low-code platform built with Vue. The platform consists of several interconnected projects that work together to provide a powerful development experience.

Platform Architecture

Platon follows a modular architecture where each project has a specific role. Understanding these projects will help you navigate and contribute to the platform effectively.

Included Projects ​

Platon consists of several projects. The main projects are Core and Shared. Let's explore each of them:

Core ​

The Core project is the heart of the Platon platform. It serves as the central hub that:

  • Collects all configurations from various modules
  • Manages remote projects and their connections
  • Combines everything into a unified application
  • Provides the main entry point for the platform

Key Responsibilities:

  • Configuration management
  • Remote module orchestration
  • Application bootstrapping
  • Core routing and navigation

Shared ​

The Shared project contains reusable resources that are used across the entire platform:

  • Components - Reusable Vue components
  • Utils - Utility functions and helpers
  • Composables - Vue composition API composables
  • Helpers - Helper functions for common tasks
  • Constants - Shared constants and configurations

To take full advantage of Shared capabilities, configure the ModuleFederationPlugin in the webpack.config.js file as follows.

js
  const { ModuleFederationPlugin } = require("webpack").container;
  new ModuleFederationPlugin({ 
        ...
      remotes: {
        shared: `shared@http://localhost:8083/remoteEntry.js`
      }, 
    })

Create sharedApp.js file

js
const PlatonSharedApp = await import("shared/PlatonSharedApp") 
export const {
  // Components
	NotFound,
	PModal,
	PlatonChart,
	PlatonMapChart,
	Notification,
	NotificationContainer,
	PageLoadingView,
  EIMZOSign,
  RsImzoSign,
  IconPickerDialog,
  MapViewer,
  MapMarkerPicker,
	LangPicker,

  // Utils
	MapTiles,
  translations,
  themeChange,
  SharedStore,
  SharedStyles,
  SharedMixins,
  SharedDirectives,
  CreateHttpClient,
  VueLeafletImport,
  CodeMirrorImports,
  langLa,
  DrawingToolbarUz,
  PlatonModule
} = PlatonSharedApp

export default PlatonSharedApp.default

Declare shared in main.js

js
  import PlatonSharedApp, {SharedStore} from "./sharedApp.js" 
  Vue.use(PlatonSharedApp, { 
    components: ["LangPicker", ...], 
    $api: { baseURL: API_ENDPOINT, store: SharedStore },
    ...
    })

Write any component name inside components, and it will be added to the list of global Vue components.

Key Benefits:

  • Code reusability across modules
  • Consistent UI/UX patterns
  • Shared business logic
  • Centralized utilities

Remotes ​

The Remotes folder is a container for all remote projects. This is not a project itself, but rather a directory that organizes remote modules.

Structure:

remotes/
├── moduleName1/
├── moduleName2/
└── moduleName3/

Usage Pattern: All remote modules are referenced as remotes/moduleName throughout the platform. Each remote module is an independent project that can be developed and deployed separately.

Key Characteristics:

  • Independent development and deployment
  • Module federation support
  • Lazy loading capabilities
  • Isolated codebases

Starter ​

Starter serves as a starting project for writing a Platon remote module. The Starter module can be downloaded from the Platon Starter page and should be configured for a new module.

Starter consists of the following files and folders. It is similar to a new project, but the required plugins are already installed and configured.

.
├─ src
│  ├─router
│  ├─utils
│  ├─views
│  ├─App.vue
│  ├─bootstrap.js
│  ├─main.js
│  └─sharedApp.js
├─ .env 
├─ package.json 
├─ ...
└─ webpack.config.js.json

Warning

To develop a new module using Starter, you need to have a full understanding of the Platon Shared module. All plugins used in the Starter module fully depend on the Platon Shared module.

Starter Shared config ​

The shared module is already configured for the starter module, if not configured, configure it as follows. If you have the shared module configured, replace sharedUrl with the link to the shared module. Example: http://localhost:8080/

...
 plugins: [ 
    new ModuleFederationPlugin({ 
      ...,
      remotes: {
        shared: `shared@${sharedUrl}remoteEntry.js`
      },
      shared: {
        vue: {
          singleton: true,
          eager: true,
          requiredVersion: "^2.7.16"
        }
      }
    })
  ]

If the Shared module is configured correctly in Starter, all components and utilities in the Shared module will work in Starter.

Warning

If Platon Shared is not configured correctly for the Starter module, the starter module will not work. Using the Starter module without Platon Shared.

Starter Router ​

The starter router structure consists of two files index.js and routes.js. index.js```` is where the routers are written to run this starter, just like a Vue project. routes.js``` is a list of routers specific to Host. The information in this file is exposed to Host and the Host project automatically adds a prefix.

export default [
  {
    path: "/",
    name: "MyPage",
    meta: { platonLayout: true },
    component: () => import("../views/MyStarterPage.vue")
  }, 
];

What is publicPath? ​

When using Module Federation in Webpack, publicPath is the base path that tells the browser which URL to load the built files (chunks, remoteEntry.js, etc.). Webpack tells the browser where to get the files from via publicPath. publicPath is very useful for the host module. publicPath is used to load components and pages in your module.

Summary ​

To write a new module, download the shared and starter modules with all the configs in the starter and configure the ports in the config .env. All components and pages in the starter will be like vue projects. Additional router and webpack settings are available. Any plugin or component that is not available in shared can be downloaded as an npm package, the host app supports all npm plugins and components.

Advantages:

  • Config and plugins ready
  • Theme and Components are taken from Platon Shared
  • Ability to create a new module without a Host module

Next Steps ​

Now that you understand the project structure, here are some recommended next steps:

  1. Review Shared Components - Check out the Shared project to see what reusable resources are available
  2. Read the Documentation - Continue reading other guides for more detailed information

Copyright © 2026 Platon. Version 1.1.0