Where To Put Your Code

The codebase is divided into three main areas:

  • paas/ contains the "Platform-as-a-Service" code. This forms the basis of the Frontastic Catwalks and provides extension points for projects build on that basis. This part of the code is shipped to every customer so beware of what you add there! Backward compatibility is also a very important topic here. DON'T create any dependencies to code outside of paas/ as it will break.
  • saas/ covers code that forms the "Software-as-a-Service" part of Frontastic (For example, Backstage, central daemons, etc.). This code is entirely internal to us.
  • template/ contains files and ansible scripts to generate a customer project.

Any other top-level directory contains a Project based on Frontastic which is used as an example, concept verification, and showcase. Parts of this project structure are auto-generated from the scripts in template/ and will be overwritten by updates. The corresponding files should all contain a warning message. For details on the customer Project structure see below.

Any other top-level file is auto-generated from template/ and will be overwritten by updates.

Frontastic provides you with dedicated directories for your project code. These directories follow the naming scheme  <customer>_<project>/. For example, if your Customer ID is demo and the Project you are working is swiss, the Project Directory would be named demo_swiss. All your Project code should reside in this directory.

There's one exceptional Project Directory which is named `<customer>_developer/`. This contains our interactive tutorial and you can play with this however you like.

Each Project folder contains application code and has the following directories (some of them are optional):

<your>_<project>/
+ bin/			# Executable scripts shipped with the Project
+ config/		# Application configuration
+ src/			# Source files
     + php/		# Custom PHP code
     + js/		# Custom JavaScript code
	+ tastic/	# This is where you put source code of your Tastics
     + sass		# SASS files, put your SCSS here
+ test/			# Test files
     + php		# PHP tests, execute with `ant test` in VM
     + js		# JavaScript tests, execute with `ant test` in VM
     + ...
+ public/		# Public web folder, maybe containing generated assets
+ templates/		# HTML template files, usually exactly 1
+ build.xml		# Build file for local and continuous integration
+ environment		# Global configuration (configuration, ...)
+ environment.local 	# Local configuration overwrites (generated by Ansible)

These directories contain your own code. There are small exceptions of files which are generated by Frontastic (clearly mentioned at the top of the file) and some configuration files (for example,   package.json and yarn.lock) which require special handling. But besides these, you're basically free to do whatever you want in these directories.

The structure of any other component of Frontastic (for example,   saas/backstage/ and paas/replicator/) is very similar. This ensures every application is configurable through the same files (environment.local) and integrates the same way (ant).

There are many additional directories under paas/ this is where our platform code lives. Especially interesting are the directories paas/catwalk(frontastic-catwalk) and paas/libraries/common (frontastic-common). frontastic-catwalk contains the base application where your code "lives". It also contains many frontend components that you can use and extend. The frontastic-common package contains our shared libraries, like API abstractions. Feel free to browse these directories and get inspirations, but DON'T CHANGE code here.

Each of the mentioned directories contains the same source code directory structure under src/. In your project directories, you can simply place your source code files there and they'll be picked up by the system:

  • src/js/ contains all JavaScript code
  • src/scss/ holds the SCSS code
  • src/layout/ contain static assets that are required by SCSS or JS
  • src/php/ is the home to all PHP files

Depending on what you want to achieve you might be working on one or multiple directories. But before we get in that, let's take a look at the Frontastic Coding Guidelines so we're consistent in the way we code.


‹ Back to Article List

Next Article ›

Frontastic Coding Guide

Still need help? Contact Us Contact Us