Web app developer section
RawCMS is shipped with a Web App that acts as a GUI to view and modify entities schema, as well to configure the RawCMS instance. The web app will be pluggable in the future.
RawCMS GUI is an SPA built on top of:
All files of web app are under the raw-cms-app
directory. In the following document, we will refer
to this directory as the root directory for the webapp, unless stated otherwise.
Prerequisites
To tinker with the web app, you must have this tools installed on your machine:
- NodeJS + npm (tested with version v10.15.2/6.4.1)
To install needed dependencies, just run npm i
in the project root.
Start dev server
Just run npm run serve
. After you edit a file, you have to manually refresh the browser page to
see the difference.
Build for deployment
Run npm run build
. Files will go under the dist
directory.
Architecture
All source files are under src
directory.
Source file are splitted in modules, where each module contains a set of components with related
features. Each module has its own directory under src/modules/<module name>
. Exception to this
rule are the entry points (src/index.html
and src/main.js
) and the root component under
src/app
.
Components are usually splitted in 2/3 files: <name>.js
(component logic),
<name>.tpl.html
(component view) and optionally <name>.css
(styles). The vast majority of
components are lazy loaded when the app needs them via an utility (more on that later).
Notable/config files
src/index.html
and src/main.js
are the main entry points where the whole application is
bootstrapped.
Under src/app
there is the root component, with the app wireframe (top bar, left menu and central
view for content).
In the src/env
directory there is an env.json
file with environment constants.
In the src/utils
directory there are JS common utilities.
Concerning src/config
directory:
i18n.js
: containsvue-i18n
initialization and an helper class to lazy load internationalized messages for a module (seei18nHelper.load
function in the file).router.js
: containsvue-router
initialization and routing settings. Internazionalization files are loaded automatically if you follow the i18n assets convention explained in the module section.vuetify.js
: containsvuetify
initialization.vuelidate.js
: contains initialization code forvuelidate
.vuex.js
: contains init code forVuex
.raw-cms.js
: it exports a commodity objectRawCMS
(also exposed onwindow
) with aloadComponentTpl
function, which can used along with native VueJS async component loading to obtain a full lazy-loading component experience, with view and logic files splitted on source code. For an usage example, see one of the views under thecore
module. Note that this object contains also theeventBus
to dispatch events through all the application and can be augmented at will to share objects/states within the application.
Module structure
We can use src/modules/core
to explain a module structure:
assets
directory: contains all static files (e.g. images). It has a sub-directoryi18n
where you should put i18n files with this filename template:i18n.<lang-code>.json
.views
directory: contains the components which acts as main views for the module.services
directory: contains classes/helpers/utils providing business logic to the module components and possibly to other modules.components
directory: contains components which are logically contained in the module, but have been splitted from the view for maintainability or can potentially be used also elsewhere. Each subdirectory contains a component with its own 2/3 files.