ARK2/Frontend
Contents
Frontend
ARK2 has imposed a clear separation between the backend and front-end, allowing the front-end to operate completely independently. ARK2 provides a number of standard front-end implementations, but sites can adapt or implement their own. This also supports multi-tenant mode where a single ARK2 install can be configured to run multiple ARK2 sites using different frontends.
The standard frontends are implemented in Bootstrap, jQuery, and Twig, the most popular and well-supported front-end ui component and template systems. Frontends can be cloned and modified for a specific site, allowing for easier customisation of ARK's appearance by third party designers. Frontends can also be implemented in other technologies such as React and Vue using the ARK2 API.
The standard front-ends shipped with ARK2 are:
- api - The absolute minimal front-end required to run an API-only server, all admin is performed via the admin console.
- admin - A minimal Web Admin front-end for configuring an API-only server
- ark2 - The default front-end supporting the full ARK2 feature set
- bootstrap3 - A minimal Bootstrap 3 frontend designed as a base for custom frontends
- bootstrap4 - A minimal Bootstrap 4 frontend designed as a base for custom frontends
- flat - A simple, non-js, read-only front-end designed for scraping, e.g. for static archiving or web-bots
Source
Frontend source is saved in the src directory by Namespace and Name:
src/<namespace>/frontend/<frontend>
For example, the main ark2 frontend in the ARK name space is stored in:
src/ARK/frontend/ark2
Within each frontend source folder, the source is organised by general type:
|- <frontend>/
|- assets/
|- fonts/
|- images/
|- scripts/
|- styles/
|- bin/
|- console
|- config/
|- credentials.json
|- database.json
|- site.json
|- public/
|- .htaccess
|- index.php
|- templates/
|- translations/
The following source types generally use the default source and remain unchanged:
- bin - Any executables used by the frontend, usually just the site console
- config - The default config files for the frontend, the main site.json file, the database.json file, and the credentials.json file
- public - The default contents of the public webroot folder, including the index.php file
The following source types are usually modified for a custom frontend and rebuilt using the build tooling when changed:
- assets - The public assets for the frontend that get included under the public webroot, i.e. fonts, images, scripts and stylesheets
- templates - The twig templates used to render the html
- translations - Vendor provided translation files
Customising the scripts and stylesheets requires various tooling which is covered in the next section.
Build Tooling
Build tooling for frontend assets is required for a number of reasons:
- Bootstrap can be customised most easily by changing variables used in the Sass templates, which then requires a build step to compile them into CSS
- Production deployment is more efficient if CSS and JS is stripped, merged and minified, while development is easier if a map is generated for the original code
- Multiple versions and combinations of assets may be required for performance reasons
- NPM library management downloads the entire package, not just the assets required, an extra step is required to copy just the required assets into the web root folder
- All the steps required for packaging and release management can be automated, e.g. clean, compile, tag, package, etc
- The build tooling for the default ARK bootstrap and twig theme can be generalised to allow clients to build and deploy their own customised themes with minimal effort
The build tooling works as follows:
- All build tooling and source assets are isolated in the /build folder so it can be excluded from any release packages or production deployments
- Nothing in the /build folder may be depended on by any code outside the /build folder or required for running ARK itself
- Node, npm, Gulp and Symfony Console are used to run the tooling
- NPM is used to manage the Node packages used which are installed into /build/node_packages
- Node packages are used both for the build tools themselves and for vendor libraries providing assets
- Gulp is used to ensure the build scripts run cross-platform
- Symfony Console is used to manage and run the build tasks
- Running tasks will only work inside the /build folder, trying to run outside the build folder will fail
- The assets required to be built for a frontend are defined in a manifest file
- The built frontend assets are then installed into the frontend source directory
Build
The front end build is managed by the Build Console. The Build console is in the 'build/' folder and is used to build/rebuild/install a front-end if required. To run the console you must be in the build folder:
cd build ./build
Running the console without a chosen command will show the list of available commands:
ARK Build Console 1.9.80
Usage:
command [options] [arguments]
Options:
-h, --help Display this help message
-q, --quiet Do not output any message
-V, --version Display this application version
--ansi Force ANSI output
--no-ansi Disable ANSI output
-n, --no-interaction Do not ask any interactive question
-v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
Available commands:
help Displays help for a command
list Lists commands
cache
cache:clear Clear the system cache
database
database:reverse Reverse engineer an existing database as DoctrineXML
frontend
frontend:all Build an ARK frontend. (Args: frontend)
frontend:assets Build the frontend assets (Fonts, Images, Scripts, Styles). (Args: frontend)
frontend:base Build the frontend base (Bin, Config, Templates, Translations, Web). (Args: frontend)
frontend:create Create a new ARK frontend (Args: namespace, frontend).
frontend:scripts Build the frontend scripts (JavaScript). (Args: frontend)
frontend:styles Build the frontend styles (CSS and SASS). (Args: frontend)
frontend:templates Build the frontend templates (Twig). (Args: frontend)
The first time you need to build/rebuild a frontend, you need to install the required Node packages. You will need to have installed Node and NPM on your system first.
npm install
To update an existing installation, especially after an ARK upgrade:
npm update
To check the status of your Node environment (including available updates), run:
npm doctor
To build a frontend run the frontend command with the name of the frontend:
./build frontend:all <frontend>
This will install the built front end into 'src/<namespace>/frontend/<frontend>'.
You can also choose to build just one type of asset to save time, e.g. if you only changed a template and don't want to wait for the js to be rebuilt as well:
./build frontend:styles <frontend> ./build frontend:scripts <frontend> ./build frontend:templates <frontend> ./build frontend:assets <frontend> ./build frontend:base <frontend>
Manifest
The assets built into a frontend are defined by the build manifest.json file.
Linking
The front-end is built from the source assets files in the 'build/' folder and installed in the 'src/' folder. The individual site folders then symlink to the required front-end in 'src/', or copy if they wish to edit in place. (See the FileLayout section below for more on this).
To clone the build assets for a new front end from the Core front-end, run the create command. You must provide a name for your new front end, and the source code Namespace it will use, e.g. ARK, Wibble, or Foo. Only use the ARK namespace if the front end is intended for the main ARK project. This Namespace will be remembered by the system.
./build frontend:create <namespace> <frontend>
To use a front end for a site, run the System Console in the '<install>/bin' folder.
To create an entirely new site, use the create command. This will create a new database, site folder, config and web subfolders, and link/copy the chosen front-end.
cd ../bin ./sysadmin database:server:add <server> ./sysadmin site:create <site> <frontend=core>
You will be asked if you want to link or copy the front-end. It is recommended to use the default link option as you will not need to update the site folder when the front-end changes. Only copy the front-end if you want to make small changes to the front-end without having to build a new namespaced front-end. This however is discouraged, you should build a namespaced front-end instead.
To enable a front-end other than core, you will need to edit the '<site>/config/site.json' file to set the name of the front-end. [TODO: Write a command for this!]
To add another front-end to a site, or to refresh a copied front-end:
site:frontend <site> <frontend>
File Layout
Build:
/
|- build/
|- .jsbeautifyrc
|- .jshintrc
|- build
|- gulpfile.js
|- packages.json
|- assets/
|- <name>/
|- bin/
|- config/
|- css/
|- fonts/
|- img/
|- js/
|- less/
|- scss/
|- twig/
|- xliff/
|- node_packages/
|- vendor/
Sites:
/
|- sites/
|- <site>/
|- config/
|- files/
|- schema/
|- src/
|- <frontend>/
|- php/
|- templates/
|- translations/
|- web/
|- .htaccess
|- index.php
|- assets/
|- <frontend>/
|- fonts/
|- images/
|- scripts/
|- styles/
