Sackmesser

Sackmesser provides the core of a web project. It contains configuration in order to get you started.

Components

• js-base: @goldinteractive/js-base

Available Features

Gold Features, checkout all features

How to install a Gold Feature

To install a feature just use make feature-install-[name of the component] for example:

$ make feature-install-modal

How to install other frontend frameworks

Respect the proper scope of the dependency (runtime vs. compile time)

Run these commands in your terminal:

$ make connect-frontend
$ yarn add dependency-name

and it will add the new utility into the node_modules folder.

Install all the dependencies

Use the Makefile to install all the current project dependencies (yarn & composer):

$ make install

Configure your machine to start working with Sackmesser

Make sure you have Docker installed.

Setup the Project

To setup the project you need to change the RECIPE in build to your corresponding project:

• default: Default project (Mostly static html or js app)
• craft: A project setup with Craft CMS
• laravel: A project for laravel

The recipe defined how a project is built and packaged for the deployment.

Maintain the Project

To build the project we need to use several command line tools and bash scripts. You can have a full list of all the available tasks by typing:

$ make

Please note, that we encourage you to use Docker to develop. So you must always start a docker container before working on the project. To do so, simply execute:

$ make up

All other command will automatically use the docker container instance, so in order to start working on the frontend, use:

$ make watch

$ make watch-designsystem

Start web container with custom port

The web container will start with a default port of 8000. If you need to use another port you can create a .env file in the project root:

DOCKER_PORT_WEB=1337

With that configuration the container will use the port given in the .env file.

Work on the Frontend

Quick help for common questions while working on the frontend.

App Configuration (.config/app-configuration.js)

This file is responsible for telling webpack which bundles shall be produced.

Currently there is support for css and js (with optional css) bundles.

It will also generate and reference external resources automatically.

Please note that if you use any css in your js bundle it will generate a standalone css file which must be imported manually.

Static assets

All assets within frontend/_public are directly copied to the output directory without any futher processing. Except for potential asset hash replacement.

Replace asset hash of resources in static files

This feature can be used to set the asset hash in static files. .config/build contains the configuration in which files the constant @ASSET_HASH shall be replaced. The variable name is ASSET_HASH_TEMPLATE_REPLACE_PATH. It can be a file or a directory. But the replacement will be performed only on text files - so no binary files will be transformed.

Favicons

Based on frontend/_public/assets/img/favicons/source.png the different sizes for favicons will be generated. Make sure the source has a dimension of 512px × 512px. The output can be found in frontend/_public/generated/favicons.

Icons

All .svg files in frontend/_public/assets/img/icons will be processed. Firstly SVGs are optimized using svgo. Afterwards all files will be put into one file and a meta information file is being generated.

Load special resources

Currently these file types are handled and can be used as resources:

• .gif
• .png
• .jpg / .jpeg
• .svg
• .ttf
• .eot
• .woff
• .woff2

In order to use them, create a folder in frontend with the given resource category as name. e.g. font or img.

All folders inside of frontend can be automatically used for resource imports - there is no additional configuraiton required.

JS

Resources can be imported with import 'img/file.png'.

CSS

To import resources of another type (e.g. background-image), use it in your SASS file as url('~img/file.png').

Deployment

Setup

To setup the project for the deployment you need to edit the deployment configuration files for each environment (production, staging …) you will use:

.config/deployment.*

* = environment (production, staging …)

Deploy the Project

The deployment is handled by a CI server

So in order to deploy your changes to any environment simply push them into the corresponding release branch.

You are allowed to use --force when pushing to the release branch. Do not use merge or rebase!

The defaults are following branches:

• staging release/staging
• production release/production

The actual branches are dependent on the project and can change. Look in the .drone.yml file for the branches key.

Synchronize uploaded files

To synchronize uploaded files with an environment you have 2 actions:

# Push data to environment
make push-data-%

# Pull data from environment
make pull-data-%

# % = environment (production, staging …)